:root{
    --gridColGap:2rem;
    --orangeHighlight:#e0a013;
    --purpleHighlight:#9767ff;
    --hoverHightlight:#f1e0ba;
    --mainPadding:2rem; 
    --subtractPadding:-2rem;
    /* how much the main-content blocks are padded, for full spans */
    --transparentBackground: rgba(34, 34, 34, 0.75);
    --twoColBreak:40.625rem;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(76, 71, 65) 33%, rgb(0, 0, 0) 100%);
    
    /* background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 0%, rgb(147, 250, 255) 23%, rgb(142, 255, 140) 35%, rgb(255, 255, 255) 50%, rgb(230, 240, 61) 67%, rgb(255, 145, 55) 78%, rgb(204, 68, 68) 87%, rgb(19, 19, 19) 100%, rgb(25, 25, 25) 100%);
     */
    
    /* background-image:url(../img/yummyBackground2.png);
    background-size:cover; 
    background-position:center; */
}

/* gradient from https://cssgradient.io/ */



/* miscellaneous elements */
img{
    display:block;
    max-width: 100%;
    height:auto;
}
picture img{
    width:auto;
}

figure{
    margin:0;
    width:fit-content;
}
figcaption{
    margin-top:0.5rem;
    color:rgb(173, 173, 173);
}

video{
    display:block;
    max-width: 100%;
    height:auto;
}
.imagePlaceholder{
    height:100%;
    width:100%;
    background-color:grey;
}



.slugBody{ 
/* For especially important body text I want to highlight. */
  padding:0.5rem;
  padding-left:2rem;
  border-left-style:solid;
  border-left-color:var(--purpleHighlight);
  font-weight:500;
  background-color: var(--transparentBackground);
  line-height: 1.4rem;
  margin:0;
}


/* Main content; general page styling */
#main-content{
    display:flex;
    flex-direction:column;
    max-width:80rem;
    justify-items: center;
    margin:auto;
    margin-top:0;
    margin-bottom:0;

    background: rgba(33, 29, 35, 0.71);
    padding: var(--mainPadding);
     color: white;

     border-left-style: solid;
     border-left-width: 0.1rem;
     border-left-color: var(--orangeHighlight);
}
/* kinda wonder if I should align more to a grid? & if so, what? having consistent gutters and all? */




/* header stuff: */
#header{
    
    margin:auto;
    background-color:#d2d2d24a;
    
    border-bottom-style: solid;
  border-bottom-width: 0.1rem;
  border-bottom-color: #9767ff;
  min-height: 5rem;
  
  overflow: hidden;
  display:grid;
  max-width: 100%;
  width: 100%;
  position: relative;
  
}

#headerContent{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    padding:2rem;
    justify-content: space-between;
    align-content: end;
    flex-wrap:wrap;
  background-size: cover;
  z-index: 1;
  position:relative;
  padding-bottom:0;
}

#header #headerImg{
    min-height: 100%;
    position: absolute;
    min-width: 100%;
    display: grid;
    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    max-height:100%;
}


.webIcon{
    width: auto;
    min-width:2rem;
    height:100%;
    
    fill:rgba(255, 187, 0, 0);
    stroke-width:2px;
    stroke:var(--orangeHighlight);
    transition-property:fill, stroke;
    transition-duration:0.3s;
}
.webIcon:hover{
    fill:var(--hoverHightlight);
    stroke:var(--hoverHightlight);
}

#webIconLinks{
    max-height:2rem;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    background-color:var(--transparentBackground);
    padding:0.5rem;
    align-self: flex-end;
    margin:0.5rem;
    min-width:10rem;
}


/* gridIcons for the header grid */
.gridIcon{
    max-width:100%;
    display:flex;
    overflow:hidden;
    align-items: center;
}
.gridIcon picture{
    width:100%;
    align-self:baseline;
}
.gridIcon picture img{
    width:20rem;
    /* messy solution to keep images scaled up in a stacked view */
}

@media (width<59.375rem){
    #header #headerImg{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .gridIcon picture{
        align-self:center;
    }
    #headerContent{
        justify-content: center;
    }
    
}

@media (width<26.25rem){
    #header #headerImg{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-auto-flow: column;
    }
    #headerContent{
        padding:0rem;
    }

    :root{
        --mainPadding:1rem;
    }
}


/* header name & title stuff */
#header #nameBlock{
    display:flex;
    flex-wrap:wrap;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
    align-content:baseline;   
    padding:1rem;
    color:white;
    background-color:var(--transparentBackground);
    align-items:flex-end;
    margin: 0.5rem;
    max-width: min-content;

    display:inline-block;

}
#header #name{
    font-family: "Smooch Sans", serif;
    font-size:2.5rem;
    font-weight:700;
    margin:0rem;
    margin-right:0.3rem;
    padding: 0.2rem;
    text-wrap: nowrap;
    max-width:100%;
}

#header #subtitle{
    font-family: "Smooch Sans", serif;
    font-size:1.5rem;
    font-weight:400;
    margin:0;
    text-wrap: nowrap;
    max-width:100%;
}

#header #logo{
    max-width:3rem;
    height:auto;
}

/* main nav */
#header #mainNav{
    padding:1rem;
    background-color:rgba(34, 34, 34, 0.637);
    display:flex;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
    height: fit-content;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    margin: 0.5rem;
    align-self: flex-end;
}

@media(width<=31.25rem){
    #header .navButton{
        font-size:1.2rem;
        padding:0.3rem;
    }
}


.navButton{
    text-decoration:none;
    font-size:1.5rem;
    padding:0.5rem;
    outline-style:solid;
    outline-width:0.1rem;
    outline-color:var(--orangeHighlight);
    transition-duration:0.3s;
    transition-property: color, outline-color, outline-width;
    color:var(--orangeHighlight);
}
.navButton:hover, .navButton:focus{
    color:var(--hoverHightlight);
    outline-color:var(--hoverHightlight);
}
.navButton:focus{
    outline-width:0.3rem;
}



/* Footer stuff: */
#footer{
    background-color:black;
    color:white;
    border-top-style: solid;
    border-top-width: 0.05rem;
    border-top-color: var(--orangeHighlight);
    text-align:center;
    max-width:100%;
    position:relative;
    padding:1rem;
}
#footerContent{
    max-width:70rem;
   display:flex;
    margin:auto;
    justify-content: space-between;
    row-gap:var(--gridColGap);
}
#footer h2{
    margin:0;
}
#footerLinks{
    display:grid;
    /* row-gap:var(--gridColGap); */
    text-align: end;
    align-content:center;
}
#footerLinks a{
    margin:0.5rem;
}

#footerTitle{
    text-align:left;
}
#footerName{
    font-size:2rem;
    font-weight:600;
}
#footerCitations{
    color:#bbb;
    display:flex;
    flex-direction:column;
    max-width:70rem;
    text-align:left;
    margin:auto;
}
#footerCitations p{
    max-width:100%;
}



/* miscellaneous grid styles */
.twoOneGrid{
    display:grid;
    grid-template-columns: 2fr 1fr;
    max-width:100%;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
    margin-top:3rem;
    margin-bottom:3rem;
    align-items:center;
}
.twoOneGrid figure{
    margin-left: auto;
  margin-right: auto;
}
.reversedTwoGrid{
    grid-template-columns: 1fr 2fr;
}

.fullTwoGrid{
    /* for 2x1 grids that take up the whole main body area */
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width:100%;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
    margin-top:1rem;
    margin-bottom:1rem;
}
@media (width<=53.125rem){
    .fullTwoGrid{
        grid-template-columns:1fr;
    }
}

.betweenSpaceGrid{
    display:grid;
    align-content: space-between;
}


.flexGallery{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
    
}


.threeColGrid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    column-gap:var(--gridColGap);
    row-gap:var(--gridColGap);
}

/* breakpoint at 650px */
@media (width<=40.625rem){
    .twoOneGrid{
        grid-template-columns: 1fr;
    }
    .reverseItem{
        /* item to reverse inside a grid once it changes to vertical layout */
        order:-1;
    }
}






/* FONTS / TEXT: */

/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */

/* taken from fonts.google.com 's embed code */


h1,h2,h3{
    font-family: "Smooch Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

h4, h5, p, li, a, figcaption{
    font-family: "Bai Jamjuree", serif;
}

h1{
    font-size:4rem;
    font-weight:700;
}

h2{
  font-size: 3.2rem;
  font-weight: 600;

}

h3{
    font-size:2.3rem;
    font-weight:600;
}

h4{
    font-weight: 600;
}

h5{
    font-weight: 500;
}

p{
    line-height:1.4rem;
    font-weight: 400;
    max-width:50rem;
    margin-bottom: 1.5rem;
  margin-top: 1.5rem;

}

p strong{
    font-weight:600;
}

.largeParaStart{
    font-weight:600;
    font-size:1.2rem;
}



/* Miscellaneous; list items, etc */
ul{
  padding-left:2rem;
  border-left-style:solid;
  border-left-color:var(--purpleHighlight);
  margin-top:2rem;
  margin-bottom:2rem;
}
li{
    line-height:1.3rem;
    margin-bottom:1rem;
}
.sectionHeader{
  margin-bottom:0rem;
  text-align: center;
  border-bottom-style: dotted;
  border-bottom-color: var(--purpleHighlight);
  border-bottom-width: 0.1rem;
}



.topAlignedHeader{
  margin-top:0;
  margin-bottom:1rem
  /* background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 80%);
  padding:0.5rem; */
}

.marginless{
    margin:0;
}


.repeatText{
  position:absolute;
  color: rgba(255, 255, 255, 0.2);
  margin:0;
  width: 100.2%;
  left:auto;
  right:auto;
  transition-property:left,right;
  
  transition-duration:0.5s;
}

.repeatContainer{
  width: 100%;
  display: grid;
  align-content: center;
  grid-template-columns: 1fr;
  position: relative;
  justify-content: center;
}


a{
  color:var(--orangeHighlight);
}
a :hover{
  color:var(--hoverHighlight);
}







.smooch-sans {
  font-family: "Smooch Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.bai-jamjuree-extralight {
    font-family: "Bai Jamjuree", serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .bai-jamjuree-light {
    font-family: "Bai Jamjuree", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .bai-jamjuree-regular {
    font-family: "Bai Jamjuree", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .bai-jamjuree-medium {
    font-family: "Bai Jamjuree", serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .bai-jamjuree-semibold {
    font-family: "Bai Jamjuree", serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .bai-jamjuree-bold {
    font-family: "Bai Jamjuree", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .bai-jamjuree-extralight-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .bai-jamjuree-light-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .bai-jamjuree-regular-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .bai-jamjuree-medium-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .bai-jamjuree-semibold-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .bai-jamjuree-bold-italic {
    font-family: "Bai Jamjuree", serif;
    font-weight: 700;
    font-style: italic;
  }