/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   * {
    box-sizing: border-box;
    }
    

/* Legacy WebKit — older Chrome/Edge/Safari, radius, borders & shadows */
*::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

*::-webkit-scrollbar-track {
  background-color: #847667;
  border-radius: 4px;
  padding: 2px;
  border: 3px solid #e5d3bf;
}

*::-webkit-scrollbar-track:hover {
  background-color: #847667;
}

*::-webkit-scrollbar-track:active {
  background-color: #7b6c5b;
}

*::-webkit-scrollbar-thumb {
  background-color: #839195;
  border-radius: 5px;
  min-height: 48px;
  border: 2px solid #495b60;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #839195;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #738084;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
    
    
    .gluten-headers {
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 48px;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;}
          
    .quicksand-body {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-style: normal;}
  
  .nerko-one-regular {
  font-family: "Nerko One", cursive;
  font-weight: 400;
  font-style: normal;}

  
    h1{
      font-family: "Gluten", serif;
      font-size: 4em;
      margin: 0}
      
    h2{
      font-family: "Gluten", serif;
      font-size: 2em;
      padding: 10px;
      margin: 0}
      
    h3{
      font-family: "Gluten", serif;
      font-size: 1.2em;
      padding: 10px;
      margin: 0}
      
    h4{
      font-family: "Gluten", serif;
      font-size: 0.85em;
      padding: 10px;
      margin: 0}
  
     p, span{
       font-family: "Quicksand", sans-serif;
       font-size: 0.85em;
      padding: 10px;}
     a{
       font-family: "Quicksand", sans-serif;
       font-size: 0.85em;}
  
       .review title, .review h1{ 
       font-family: "Nerko One", cursive;
       font-size: 3.5em;
       padding: 10px;
      margin: 0px;}
         .review h2{
       font-family: "Nerko One", cursive;
       font-size: 2em;
       padding: 10px;
       margin: 0px;}
          .review h3{
       font-family: "Nerko One", cursive;
       font-size: 1.2em;
       padding: 10px;
       margin: 0px;}
          .review h4{
       font-family: "Nerko One", cursive;
       font-size: 0.85em;
       padding: 10px;
       margin: 0px;}


    
    nav a {
      font-family: "Quicksand", sans-serif;
      color: #e5d3bf;
      text-decoration: none;}
        nav a:hover {
          color: #c7b5a2;
          text-decoration: underline;}
          nav a:not(:last-child)::after {
    content: "|";
    margin: 30px;}
      
    a {
      font-family: "Quicksand", serif;
      color: #495b60;
      text-decoration: none;}
      a:hover {
      text-decoration: underline;}
    
    header{
    background-color: #e5d3bf;
    border: 3px solid #c7b5a2;
    height: 80px;
    margin: 0px;}
    
    
    header h1{
    color: #495b60;
    position: relative;
    margin: -35px;
    text-align: center; }

    body{
    margin: 0px;
    background-image: url(background.png);
    color: #c7a574 ;}
    
    nav{
    background-image: linear-gradient(#738084, #738084, #495b60) ;
    border: 2px solid #495b60 ;
    border-radius: 4px;
    height: 30px;
    margin: 0px;
    color: #e5d3bf; 
    font-family: 'Quicksand', sans-serif;
    text-align: center; }

    main{
    width: 45%;
    color: #495b60;}

    main .onsite, .bookshelf{
    background-color: #e5d3bf ;
    border: 4px solid #847667 ;
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 10px;}
    
    .archive {
    color: #495b60;
    width: 55%;
    background-color: #e5d3bf ;
    border: 4px solid #847667 ;
    border-radius: 8px;
    text-align: center;
    margin: 30px auto 10px;}
    .archive p{
      margin: 0 !important;}
    




    
    main .more {
    background-color: #e5d3bf ;
    border: 4px solid #847667 ;
    border-radius: 8px;
    margin: 0px;}
    
    .selfie{
      border: 10px transparent;
      border-radius: 10%;}
 
    aside{
    width:10%;
    background-color: #e5d3bf ; 
    border: 4px solid #847667 ;
    border-radius: 8px;
    margin: 30px;}
    
    aside .about{
    width: 85%;
    background-color: #738084;
    color: #e5d3bf;
    border: 2px solid #304754;
    border-radius: 4px;
    margin: 8%;}
    
    aside .updates{
    width: 85%;
    background-color: #304754;
    color: #e5d3bf;
    border: 2px solid #495b60;
    border-radius: 4px;
    margin: 8%;
    max-height: 130px;
    overflow: auto;}
    
      aside h2{
      margin: 0%;}
      
      /* LIBRARY */
      
    .books-label, .tv-label, .film-label, .essays-label, .crewrite-label, .blogs-label, .rating-label, .thoughts-label{
    color: #e5d3bf;
    background-color: #738084;
    border: 2px solid #304754;
    border-radius: 4px;
    margin: 5px;
    justify-content: center;}
     .books-label h3, .tv-label h3, .film-label h3,.essays-label h3, .crewrite-label h3, .blogs-label h3, .rating-label h3, .thoughts-label h3{
      margin: 0;
      padding: 0;
      text-align: center;}
      .rating-label h4,
      .thoughts-label h4 {
      padding: 0;
      text-align: center;}
      
    .books {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;}
    
.cover {
    display: block;
    margin-left: 20px;}

      
      .bookshelf{
        max-height: 580px;
        overflow: auto;
        padding: 15px;}
        
    .archive-row {
     display: flex;
     justify-content: center;
     gap: 20px;}
     
     .review{
    width: 45%;
    color: #495b60;
    background-color: #e5d3bf ;
    border: 4px solid #847667 ;
    border-radius: 8px;
    margin: 30px auto;}
    
    .review-content {
      display: flex;
      align-items: flex-start;
      gap: 20px;}

.review-info {
    flex: 1;}
    
    .rating-label h3, .thoughts-label h3{
    margin: 0;
    padding: 0;
    text-align: center;
}

.review h2 {
text-align: center;}

.cover {
width: 300px;
height: auto;
margin: 10px;
}

/* ARCHIVE */
     
    .resources {
      width: 20%;
      color: #e5d3bf;
      background-color: #738084;
      border: 4px solid #495b60;
      border-radius: 4px;
      margin-top: 30px;
      padding: 5px;
      max-height: 375px;
      overflow: auto;}
      
    .gallery {
      width: 40%;    
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;}
    .gallery img {
      max-width: 100%;
      max-height: 300px;
      width: auto;
      height: auto;
      display: block;}
    
    
    /* PORTFOLIO */
     .portfolio{
     text-align: center;
     width: 85%;
     margin: 30px auto 10px;}


    .portfolio h2{
     background-color: #e5d3bf ;
     color: #495b60;
     width: 85%;
     border: 4px solid #847667 ;
     border-radius: 8px;
     text-align: center;
     margin: 30px auto 10px;}
    

.portfolio input {
    display: none;}

.portfolio label {
    text-align: center;
    margin: 20px auto;}


.portfolio label {
    display: inline-block;
    background-color: #e5d3bf;
    border: 3px solid #847667;
    border-radius: 6px;
    padding: 10px 20px;
    margin: 0px auto 10px;
    color: #495b60;
    cursor: pointer;}


#digital:checked + label,
#traditional:checked + label,
#everything:checked + label, 
#OCs:checked + label{
    background-color: #738084;
    color: #e5d3bf;
}


/* Hide portfolio galleries */

.digital-gallery,
.traditional-gallery,
.everything-gallery,
.OCs-gallery {
    display: none;
}


/* Show selected portfolio gallery */

#digital:checked ~ .digital-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}

#traditional:checked ~ .traditional-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}

#everything:checked ~ .everything-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}

#OCs:checked ~ .OCs-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}

/* portfolio grid */

.digital-gallery,
.traditional-gallery,
.everything-gallery,
.OCs-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


/* portfolio images */

.digital-gallery img,
.traditional-gallery img,
.everything-gallery img,
.OCs-gallery img {
    display: flex;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    justify-content: center;}
    
    
    

    /* sitemap */
.site-map {
    position: relative;
    width: 900px;
    max-width: 100%;
    margin: 30px auto;
}

.library-sitemap {
    position: absolute;
    left: 66%;
    top: 26%;}
.library-sitemap:hover {
  transform: scale(1.1);}

.archive-sitemap {
    position: absolute;
    left: 36% ;
    top: 36% ;}
.archive-sitemap:hover {
  transform: scale(1.1);}

.portfolio-sitemap {
    position: absolute;
    left: 69%;
    top: 66.4%;}
    .portfolio-sitemap:hover {
  transform: scale(1.1);}

.home-sitemap {
    position: absolute;
    left: 9%;
    top: 8.5%;}
    .home-sitemap:hover {
  transform: scale(1.1);}

    




    
    footer {
    color: #495b60;
    width: 50%;
    background-color: #e5d3bf;
    border: 4px solid #847667;
    border-radius: 8px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    gap: 130px;}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;}

.footer-social h3 {
  color: #495b60;
    margin: 0;}

.social-icon {
    width: 20px !important;
    height: 20px;
    object-fit: contain;}

   .layout {
    display: flex;
    justify-content: center;}