@font-face {
      font-family: 'AtlantaCollege'; 
      src: url('AtlantaCollege.ttf') format('truetype');
    }
        @font-face {
      font-family: 'CornerStore'; 
      src: url('CornerStoreJF.ttf') format('truetype');
    }
            @font-face {
      font-family: 'CardsNarrow'; 
      src: url('cardcharactersnarrow.ttf') format('truetype');
    }
    
    
html {
  --s: 27px; /* control the size*/
  --c1: #000000;
  --c2: #c11502;
  
  --c:#0000,var(--c1) .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));
  background:
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) 
    var(--c2);
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
} 
body {
  background-image: linear-gradient(to right, rgba(10, 0, 0, 1), rgba(10, 0, 0, 0.75), rgba(10, 0, 0, 0));
  padding: 0 0;
  margin: 0 0;
  border-style: solid; /* makes it so gradient extends to full top and bottom */
  background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;

} 


ul {
 list-style-image: url("/yellowjackets/bullet.svg"); 
 font-family: Verdana;
 font-size: 1em;
  
}



.container-biggest {
 display: flex;
 flex-direction: row;
}

.container-outer img {
 bottom: 0; 
 position: fixed;
 width: 20%;
 height: auto;

}

.container-outer {
 flex-direction: column; 
 margin: 0 1rem 0 2rem;
 width: 75%;
}

    .container {
     flex-direction: column;
     margin: 1rem 1rem 1.5rem 1rem;
     padding: 0.5rem 7rem 1rem 3rem;
     background-color: #FFF55E;
     color: black;
     border: 10px double black;
     box-sizing: border-box;
     max-height: 60vh;
     width: auto;
     overflow-y: auto;
     overflow-x: none;
     scrollbar-color: black transparent;
     scrollbar-width: thin;
     width: 90%;
     
    }
    
    h1 {
     font-family: 'CornerStore'; 
     font-size: 2.5em;
     margin: 0.4rem 0;
    }
    
    h2 {
     font-family: 'CardsNarrow'; 
     font-size: 2em;
     margin: 0.4em 0;
    }
    
    p {
     font-size: 1em; 
     font-family: Verdana;
    }
    
    
  .card a {
     color: white;
     font-weight: bolder;
    }
   
 .card a:hover {
    background-color: black;
    color: yellow;
   }
   
   a {
    font-weight: bolder;
    color: black;
   }
   
   a:hover {
    background-color: black;
    color: yellow;
   }
    
    #yjnav {
     top: 0;
     left: 0;
     right: 0;
     position: static;
     display: flex;
     flex-direction: row;
     display: flex;
 flex-direction: row; 
 justify-content: flex-start;
 background-color: yellow;
 padding: 0.2rem 4rem 0.2rem 1.8rem;
 color: black;
}

#yjnav a {
 color: black; 
  text-decoration: none;
  padding: 0 1rem 0 1rem;
  margin: 0;

}

#yjnav a:hover {
 color: yellow;
 background-color: black;
}

#yjnav p {
  font-size: 1.1em;
}

#yjnav h1 > a {
 color: black; 
}

#yjnav h1 > a:hover {
color: red;
background-color: yellow;
}


    /* card stuff from codepen */
.card {
  width: 300px;
  height: 400px;
  perspective: 500px;
  margin: 0.1rem 0.8rem 1rem 0.1rem;

}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  color: black;
  text-align: center;
  border-radius: 5px;
  backface-visibility: hidden;
  box-sizing: border-box;
}

.front {
 background: #FFF55E; 
   padding: 1rem 1rem;
     border: 10px double black;

   

}

.back {
  background: black;
  transform: rotateY( 180deg );
  padding: 0.5rem 1rem;
   border: 10px double red;
   color: white;
     overflow-y: auto;
  overflow-x: none;
  scrollbar-color: yellow transparent;
  scrollbar-width: 10px;
}

/* fitting cards into page */

  

.card-container-outer {
 display: flex;
 flex-direction: row;
 margin: 1rem 1rem 1rem 1rem;
 flex-wrap: wrap;
}

.card-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

} 


#antlerqueen {
 position: fixed; 
 width: 20%;
 height: auto;
 bottom: 0;
}