@font-face {
    font-family: 'Roboto Slab';
    src: url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap);
  }
  
  @keyframes twirlR{
    0% {transform: rotateY(0deg);}
    25% {transform: rotateY(90deg);}
    50% {transform: rotateY(0deg);}
    75% {transform: rotateY(-90deg);}
    100% {transform: rotateY(0deg);}
  }
  
  .emblem{
    grid-area: 3/4/3/4;
    justify-self: end;
    margin-top: 7%;
    margin-bottom: 10%;
    
  }
  
  .emblem:hover , .emblemL:hover, .emblemR:hover{
    animation: twirlR 7s infinite linear;
  }
  
  .unitTitle{
    grid-area: 1/2/1/span 3;
    display: flex;
    align-self: flex-end;
    z-index: 1;
  }
  
  .unitBanner{
    grid-area: 1/1/1/span 5;
    z-index: -1;
    grid-row: 11vw;
  }
  
  .unitGrid{
    display: grid;
    grid-template-columns: 15% 20% 30% 20% 15%;
    background-color: black;
  }
  
  .unitGridW{
    display: grid;
    grid-template-columns: 15% 20% 30% 20% 15%;
    background-color: #ffffff;
  }
  
  .unitName{
    grid-area: 1/2/1/span 3;
    border-bottom: #ffffff 2px solid;
    display: flex;
    z-index: 1;
    margin-top: 3%;
  }
  
  .unitNameW{
    grid-area: 1/2/1/span 3;
    border-bottom: black 2px solid;
    z-index: 1;
    margin-top: 3%
  }
  
  .unitLocat{
    grid-area: 1/3/1/span 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 0;
    margin-top: 5%
  }
  
  .unitLocatW{
    grid-area: 1/3/1/span 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 0;
    margin-top: 5%
  }
  
  .unitDesc{
    grid-area: 2/2/2/span 2;
    display: flex;
    align-self: center;
  }
  
  .unitDescW{
    grid-area: 2/3/2/span 2;
    display: flex;
    align-self: center;
  }
  
  .triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 11vw 0px 8vw 98vw;
    grid-area: 1/1/1/span 2;
    border-image-source: linear-gradient(to right, rgb(20, 20, 20,1), rgb(20,20,20,0));
  }
  
  
  
  .emblemL{
    grid-area: 2/2/2/2;
    justify-self: start;
    margin-top: 7%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
  }
  
  .emblemR{
    grid-area: 2/4/2/4;
    justify-self: end;
    margin-top: 7%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
  }

  .p{
    font-size: 1.5em;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
  }
  
  .h4{
    font-family: 'Roboto Slab';
    font-weight: 900;
    color: #c41e32;
    font-size: 1.6em;
  }
  
  .h3{
    font-size: 1.9em;
    color: #ffffff;
    font-family: 'Roboto Slab';
    font-weight: 900;
  }
  
  .h2{
    font-size: 2.3em;
    color: #c41e32;
    font-family: 'Roboto Slab';
    font-weight: 700;
    line-height: 105%;
  }
  
  .h2 a, .h2 a:visited{
    text-decoration: none;
    font-size: 1em;
  }
  
  .h2 a:hover{
    color: #fcd116;
  }
  
  .h2Alt{
    font-size: 2.3em;
    color: #c41e32;
    font-family: 'Roboto Slab';
    font-weight: 700;
    line-height: 105%;
  }
  
  .h2Alt a, .h2Alt a:visited{
    text-decoration: none;
    font-size: 1em;
  }
  
  .h2Alt a:hover{
    color: #0c1c8d;
  }
  
  
  .h1{
    font-size: 2.8em;
    color:#fcd116;
    font-family: 'Roboto Slab';
    font-weight: 900;
  }

  a.soflink:link{
    color: #fcd116;
    font-size: 1em;
    grid-column: 1/1;
  }
  
  a.soflink:visited{
    color: #caa82d;
    font-size: 1em;
  }
  
  a.soflinkB:link{
    color: #0c1c8d;
    font-size: 1em;
    grid-column: 1/1;
  }
  
  a.soflinkB:visited{
    color: #1d1c52;
    font-size: 1em;
  }

  body{
    background-color: black;
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth !important;
  }

  @media only screen and (max-width: 767px){
    .unitBanner{grid-area: 1/1/1/span 3;visibility: hidden;}
    .unitDesc{grid-area: 4/2;border-top: white 2px solid;}
    .unitDescW{grid-area: 4/2;border-top: black 2px solid;}
    .unitGrid{grid-template-columns: 5% 90% 5%;grid-auto-rows: min-content;}
    .unitGridW{grid-template-columns: 5% 90% 5%;row-gap: 0px;}
    .unitLocat{grid-area: 2/2;justify-self: center;text-align: center;}
    .unitLocatW{grid-area: 2/2;justify-self: center;text-align: center;}
    .unitName{grid-area: 1/2;border-bottom: none;justify-self: center;text-align: center;}
    .unitNameW{grid-area: 1/2;border-bottom: none;justify-self: center;text-align: center;}
    .unitTitle{grid-area: 1/2;justify-content: center;margin-bottom: 0%;border-bottom: white 2px solid;}
    .emblemL{grid-area: 3/2;justify-self: center;margin-top: 0%;margin-bottom: 0%;height: 80%;width: 80%;}
    .emblemR{grid-area: 3/2;justify-self: center;margin-top: 0%;margin-bottom: 0%;height: 80%;width: 80%;}
    .triangle{grid-area: 1/1/1/span 3;visibility: hidden;}
  }

  @media screen and (max-width: 1024px) and (min-width: 768px){
    .unitBanner{grid-area: 1/1/1/span 4;}
    .unitTitle{grid-area: 1/2;margin-bottom: 0%;}
    .unitGrid{grid-template-columns: 5% 60% 30% 5%;}
    .unitGridW{grid-template-columns: 5% 30% 60% 5%;row-gap: 0px;}
    .unitName{grid-area: 1/2/1/span 2;align-self: bottom;border: none;}
    .unitNameW{grid-area: 1/2/1/span 2;align-self: bottom;border-bottom: none;}
    .unitLocat{grid-area: 2/2/2/span 2;border-bottom:white 2px solid;display: block;}
    .unitLocatW{grid-area: 2/2/2/span 2;border-bottom:black 2px solid;display: block;}
    .unitDesc{grid-area: 3/2;}
    .unitDescW{grid-area: 3/3;}
    .emblemL{grid-area: 3/2;justify-self: flex-start;margin-top: 7%;margin-bottom: 7%;height: 92%;width: 92%;}
    .emblemR{grid-area: 3/3;justify-self: flex-end;margin-top: 7%;margin-bottom: 7%;height: 92%;width: 92%;}
    .triangle{grid-area: 1/1/1/span 4;}
  }