/* 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." */

body {
  background-image: url('plague_header.png');
  background-color: #262626;
  background-repeat: no-repeat;
  color: white;
  font-family: Verdana;
}

h1 {
  margin: 0;
}

a {
 color: #fff; 
}

a:visited {
 color: #fefefe; 
}

a:visited, a:active {
 color: #eeeeee; 
}
  
img {
 max-width: 100%;
}

  #lightbox {
   z-index: 2;
  }
  
  #lightnav {
   z-index: 3;
  }
  
  .header_title a {
   text-decoration: none;
   font-family: monospace;
   font-size: 1.2em;
  }
  
  .main h1, .main h2, .main h3 {
    text-align: center;
    margin: 10px 0;
  }
  
  .main p {
    text-indent: 20px;
    text-align: justify;
  }
  
  #crumbs a {
    text-decoration: none;
    filter: opacity(0.5);
  }
  
  #crumbs a::after {
    content: " »";
  }
  
  #crumbs a:last-child::after {
    content: "";
  }
  
  #crumbs a:hover {
    filter: opacity(1);
  }
  
  #idx_main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 20px;
    gap: 2%;
  }
  
  #idx_main a {
    display: block;
    text-align:center;
    font-size: 1.2em;
  }
  
  #idx_main a:nth-child(1) {
    aspect-ratio: 2/3;
  }

  #idx_main img {
    border: 5px solid #ffffff11;
    border-radius: 10px;
    object-fit: cover;
    height: 100%;
  }
  
  #crumbs, #idx_main, #idx_card, .main {
    background-color: #262626;
    border-radius: 10px;
    box-shadow: inset 0 0 5px 1px #000;
  }

  #idx_card img {
   width: 100%;
   border-radius: 10px;
  }

  #idx_footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2%;
  }

  #idx_footer img {
    border-radius: 10px
  }

  #sort, #filter {
	  display: inline-block;
  }
  
  #sort {
   width:fit-content;
   background-color:#333;
   box-shadow:inset 0px 0px 3px 1px #fff;
   border-radius:5px;
   margin: auto;
   padding: 5px;
  }

  #sort a {
   margin: 2px;
   padding: 2px;
   text-decoration: none;
  }

  #sort .s_select {
   background: #ccc;
   border-radius:5px;
   color: #333;
  }

  #filter select {
    box-shadow: inset 0px 0px 3px 1px #fff;
    border-radius: 5px;
    background-color: #333;
    padding: 5px;
	color: #fff;
	font-size: 1rem;
  }

     .grid_single, .grid_headshot {
       display: block;
       margin: 20px auto;
       width: fit-content;       
      }
      
     .grid_few {
       display: flex;
       flex-wrap: nowrap;
       justify-content: space-evenly;
       margin: 20px auto;
      }

     .grid_few > div:hover {
       transform: scale(1.0) rotate(0deg)!important;
       z-index: 1;
     }
     
     .grid_few img {
       height: 100%;
     }
      

     .grid_many, .grid_gallery {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-evenly;
     }

     .grid_many > div {
       background-color: #262626;
       overflow: hidden;
       text-align: center;
       text-transform: capitalize;
       margin-bottom: 10px;
       padding-bottom: 10px;
       border-radius: 10px;
       box-shadow: inset 0 0 5px 1px #000;
       transition: box-shadow .5s ease-in-out;
     }

     .grid_many > div:hover {
       box-shadow: inset 0 0 8px 5px #00000087;
     }

     .grid_many > div.grid_cat {
       width: 100%;
       background-color: #333;
       border-radius: 10px;
       margin-top: 50px;
       padding: 3px;
       font-size:2em;
     }

     .grid_many > div.grid_cat:nth-child(1) {
       margin-top: 10px;
     }

     .grid_many img {
       aspect-ratio: 2/3;
       border: 5px solid #ffffff11;
       border-radius: 10px;
       box-sizing: border-box;
       object-fit: cover;
       transition: transform .5s ease-in-out;
       width: 100%;
       transform: scale(0.9);
     }

     .grid_many div:hover img {
       transform: scale(0.95);
       z-index: 1;
     }
      

     .grid_single > div, .grid_few > div, .grid_headshot > div {
       overflow: hidden;
       transition: transform .5s ease-in-out;
     }

     .grid_single img, .grid_few img, .grid_headshot img {
       border: 5px solid #ffffff11;
       border-radius: 10px;
       box-sizing: border-box;
       object-fit: cover;
       transition: transform .5s ease-in-out;
     }
         
     .grid_headshot > div {
      position:relative;
      cursor: pointer;
    }
    
    .grid_headshot > div > img {
      max-height: 100vh
    }

    .grid_headshot > div > img:nth-child(2) {
      position:absolute;
      left: 0px;
    }
	
	.gallery_tag {
		display: inline-block;
		width: fit-content;
		font-size: .7rem;
		border-radius: 5px;
		background-color: #333;
		margin: 3px auto;
		padding: 3px;
		border: 2px solid #999;
		text-decoration: none;
	}

	.gallery_tag:hover {
		background-color: #444;
	}


    @keyframes spin-out {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(90deg);}
      100% { transform: rotateY(90deg);}
    }

    @keyframes spin-in {
      0%   { transform: rotateY(90deg);}
      50%  { transform: rotateY(90deg);}
      100% { transform: rotateY(0deg); }
    }

    .grid_headshot img:nth-child(1) { animation: spin-in  1s ease-in-out 1; animation-fill-mode: both; }
    
    .grid_headshot img:nth-child(2) { animation: spin-out 1s ease-in-out 1; animation-fill-mode: both; }
    
    .grid_headshot div:hover img:nth-child(1) { animation: spin-out 1s ease-in-out 1; }
    
    .grid_headshot div:hover img:nth-child(2) { animation: spin-in  1s ease-in-out 1; }
      
     .grid_gallery > div {
       background-color: #262626;
       overflow: hidden;
       margin-bottom: 10px;
       border-radius: 10px;
       box-shadow: inset 0 0 5px 1px #000;
       max-width: 48%;
       flex-grow: 1;
       margin: 1%;
     }

     .grid_gallery > div img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       cursor: pointer;
       transform: scale(1);
       transition: transform .5s ease-in-out;
     }

     .grid_gallery > div:hover img {
       transform: scale(1.1);
     }

     #lightbox {
       box-sizing: border-box;
       padding: 10px;
       height:100vh;
       cursor: pointer;
       position: fixed;
       top: 0;       
       left: 0;
       width: 100%;
       background-color: #000000aa;
       visibility: hidden;
     }
     
     #lightbox img {
      margin: auto;
      display: block;
      height: 100%; 
      border-radius: 20px;
      box-shadow: 0 0 20px 10px black;
      object-fit: contain;
     }

     #lightnav {
       box-sizing: border-box;
       cursor: pointer;
       position: fixed;
       top: 0;       
       visibility: hidden;
     }
     
     #lightnav div {
      width: 10%;
      height: 100vh;
      position: fixed;
      top: 0px;
     }
     
     #lightnav div:nth-child(1) {
      left: 0px;
     }
     
     #lightnav div:nth-child(2) {
      right: 0px;
     }
     
     #lightnav div::after {
      content: " ";
      position: fixed;
      top: 40%;
      border-style: solid;
      filter: opacity(0.5);
     }

     #lightnav div:hover::after {
      filter: opacity(1.0);
     }


     #lightnav div:nth-child(1)::after {
      border-color: transparent #808080 transparent transparent;
     }
     
     #lightnav div:nth-child(2)::after {
      border-color: transparent transparent transparent #808080;
     }
     
     blockquote.q {
      position: relative;
      border: 5px dotted #262626;
      border-radius: 20px;
      background-color: #fff;
      padding: 10px 30px;
      margin: 10px 20%;
      transform: rotate(1deg);
      color: #262626;
      font-size: 1.2em;
     }
         
    blockquote.q::before {
      content: open-quote;
      top: 0;
      left: 0;
    }
    
    blockquote.q::after {
      content: close-quote;
      bottom: 0;
      right: 0;
    }
  
    blockquote.q::before, blockquote.q::after {
      position: absolute;
      text-align: center;
      font-size: 3em;
      height: 50px;
      line-height: 1.3;
      color: #262626;
    }

    #nsfw, #lock_box {
      display: none;
    }



    
 /*Desktop only CSS*/

  @media only screen and (min-width: 1000px) {

      body {
        background-attachment: fixed;
      }

      .header_title {
        margin: 20px 0 100px 65px;
      }
      
      .header_title a {
       color: #333;
      }
      
     #lightnav div::after {
      border-width: 50px;
     }

     #lightnav div:nth-child(1) {
          background-image: linear-gradient(90deg, #000000, transparent);
     }
      
     #lightnav div:nth-child(2) {
          background-image: linear-gradient(-90deg, #000000, transparent);
     }

     #lightnav div:nth-child(1)::after {
      left: -20px;
     }
     
     #lightnav div:nth-child(2)::after {
      right: -20px;
     }
     
  #crumbs, #idx_main, #idx_card, .main {
    margin: 20px;
    padding: 10px;
  }

      #idx_main > div {
       width: 23%;
      }
    
      #idx_card {
       display: grid;
       grid-template-columns: 300px 1fr;
       gap: 10px;
      }
    
     .grid_many, .grid_gallery {
       margin: 20px;
     }

     .grid_many > div {
       width: 300px;
     }

     .grid_gallery > div {
       height: 40vh;
     }

    .grid_chars {
      margin: 5px;
    }
    
    .grid_chars div {
      width: 200px;
    }
    
  }

   
 /*Tablet only CSS*/

  @media only screen and (max-width: 999px) {
      
      body {
        background-size: contain;
      }
      
      .header_title {
       text-align: center;
      }
  
      .header_title a {
       text-shadow: 5px 5px 5px #000;
      }
      
     #lightnav div::after {
      border-width: 50px;
     }

     #lightnav div:nth-child(1) {
          background-image: linear-gradient(90deg, #000000, transparent);
     }
      
     #lightnav div:nth-child(2) {
          background-image: linear-gradient(-90deg, #000000, transparent);
     }

     #lightnav div:nth-child(1)::after {
      left: -20px;
     }
     
     #lightnav div:nth-child(2)::after {
      right: -20px;
     }
     
  #crumbs, #idx_main, #idx_card, .main {
    margin: 20px;
    padding: 10px;
  }

      #idx_main > div {
       width: 32%;
      }
    
      #idx_card {
       display: grid;
       grid-template-columns: 1fr;
       gap: 10px;
      }
    
     .grid_many, .grid_gallery {
       margin: 10px;
     }

     .grid_few {
       flex-wrap: wrap;
      }

     .grid_few > div {
       width: 48%;
       flex-grow: 1;
     }
     
     .grid_few img {
       width: 100%;
     }
     
     .grid_many > div {
       width: 33%;
     }

     .grid_gallery > div {
       height: 20vh;
     }

     blockquote.q {
      margin: 10px;
     }
         
  }


 /*Mobile only CSS*/

  @media only screen and (max-width: 500px) {

      .header_title a {
       text-shadow: 5px 5px 5px #000;
      }
      
     #lightnav div::after {
      border-width: 30px;
     }

     #lightnav div:nth-child(1) {
          background-image: linear-gradient(90deg, black, transparent);
     }
      
     #lightnav div:nth-child(2) {
          background-image: linear-gradient(-90deg, black, transparent);
     }

     #lightnav div:nth-child(1)::after {
      border-color: transparent white transparent transparent;
      left: -10px;
     }
     
     #lightnav div:nth-child(2)::after {
      border-color: transparent transparent transparent white;
      right: -10px;
     }
     
  #crumbs, #idx_main, #idx_card, .main {
    margin: 5px;
    padding: 5px;
  }

      #idx_main > div {
       width: 48%;
      }
    
     .grid_many, .grid_gallery {
       margin: 5px;
     }

     .grid_many > div {
       width: 50%;
     }

     blockquote.q {
      margin: 10px;
     }
         
  }