/* font-family: "Public Sans", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap')

@font-face {
  font-family: lastresort;
  src: url(https://website.com/coolfont.otf);
}


@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap')




* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    /* max-width: 100%; */
    background-color: rgba(255, 255, 255, 0);
   
}
body {
  background: white;
  margin: 0 auto;
  padding: 0;
}

nav {
    display: flex;
    justify-content: space-between;
}
.naver {
  position: fixed;
  width: 100%;
  z-index: 2000;

}
#studentgridholder {
    padding: 40px 6vw;
}
.topnav {
    overflow: hidden;
    /* background-color: #333; */
    display: flex;
    justify-content: space-between;
  }
header {
    /* text-align: center; */
    /* background: white; */
    text-align: left;
  }
  .topnav a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav a.news {
    display: none;
  }
  
  .topnav a:hover {
    /* background-color: rgb(132, 132, 132); */
    color: rgb(106, 106, 106);
  }
  
  .topnav a.active {
    background-color: #ffffff;
    color: white;
  }
  article {
    margin: 0;
    padding-right: 10px;
  }
h1 {
  font-family: "league-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #cf0d1d;
    font-size: 200px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: -.01em;
    vertical-align: top;
    padding: 0;
    margin: 100px 0;
    line-height: 180px;
    margin: 100px 0 25px 0;
  
  }
header h2 {
    font-size: 64px;
    line-height: 54px;
    font-family: "league-gothic", sans-serif;
    font-weight: 700px;
    text-transform: uppercase;
    text-align: left;
    color:  #cf0d1d;
    /* animation: reveal 2s ease-in-out forwards; */
    margin: 50px 0 20px 0;
    
  }
#studentnames {
    padding-left: 2em;
    column-count: 2;
    column-gap: .8em;
    width: 85%;
}

  #studentnames a {
    color: #cf0d1d;
    text-decoration: none;
    font-family: "Red Hat Mono", monospace;  
    font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 30px;
  padding-right: 10px;
  }
  #studentnames a:nth-child(odd) {
    color:   #cf0d1d;
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: italic;
  padding-right: 10px;
  font-size: 15px;
  line-height: 30px;

  }
 
#studentnames a:hover, #studentnames a:visited {
  color:#5e5d5d;
}
/* .grid-item a:visited ~ .grid li ::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.328); /* Change the color and opacity as needed */
  } */

  .topnav .icon {
    display: none;
  }



  .grid li a, .grid li img {
    outline: none;
    border: none;
    display: block;
    max-width: 100%;
    width: 100%;
    transition: all .3s ease-in-out;
    text-align: left;
    
}


/* .grid li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(250, 46, 46, 0.864); /* Change the color and opacity as needed */
} */

.grid li a {
  color: black;
    font-family: "Public Sans", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding-top: 20px;
}

.grid li a span {
  font-style: italic;
  font-weight:400;
  text-transform: uppercase;
}


.grid-item a {
  color: black;
    font-family: "Public Sans", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding-top: 20px;
}

.grid-item a span {
  font-style: italic;
  font-weight:400;
  text-transform: uppercase;
}

.grid li img:hover {
 
  transform: scale(1.05);
}
/* .grid-item a:hover, .grid-item a:visited {
  opacity: .5 !important;
} */
/* .grid-item a:visited {
  color:#504f4f;
  
} */

.grid-item:visited img.low {
  border: red solid 5px;
}


.grid-item a:hover + a.stuname {
  opacity: .5 !important;
  
}



/* Add a black background color to the top navigation */
.topnav {
  /* background-color: rgb(255, 255, 255); */
  overflow: hidden;
  border-bottom: solid black 1px
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "Red Hat Display", sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: .07em;
}
.alice {
  font-family: "Alice", serif;
  font-size: 15px;
  font-weight: 400;
  text-transform: initial;
}
/* Change the color of links on hover */


/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #ffffff;
  color: rgb(6, 6, 6);
  padding-left: 30px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* * {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
  } */
  
  
  /* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
  
  .grid {
    text-align: center;
    max-width: 97vw;
    margin: 2.5vw auto;
  }
  
  
  /* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
  
  .grid-item {
    padding: 25px !important;
    box-sizing: border-box;
      display:inline;

  }
  span a {
    font-family: "Public Sans", sans-serif;
    text-align: left;
    color: black;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding-top: 23px;
    display: block;
    padding-left: 15px;
  }
  
  /* .animate {
    animation: animate 2s ease-in-out forwards;
  }
  
  @keyframes animate {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  } */

  /* @keyframes titler {
    0% {
      transform: skewX(-33deg) translateX(-500px);
      opacity: 0;
    }
    30% {
      transform: skewX(-40deg);
    }
  
    100% {
      transform: skewX(0deg) translateX(0);
      opacity: 1;
    }
    
  
  } */
  @keyframes myh2 {
    0% {
        transform: scale(2.0) translateY(-300);
    }
    100% {
        transform: scale(1.0) translateY(0);
    }
}
@keyframes slidein {
  0% { margin-left:-1000px; 
  opacity: 0;}
  50% { margin-left:-1000px; 
  opacity: 0;}
  75% { margin-left:0px; }
  100% { margin-left:0px; 
  opacity: 1;}
}

@keyframes reveal {
  0% {
    font-size: 150px;
    line-height: 140px;
    letter-spacing: -8px;
    transform: translateY(-200px);
  }





  20% {font-size: 150px;
    line-height: 140px;
    transform: translateY(-200px);
    letter-spacing: -8px;
  }





  100% {font-size: 36px;
    line-height: 38px;
    letter-spacing: -1px;
    transform: translateY(0px);}
}







  /* Step 4: Add media queries (subjective) to make the whole grid resposive. */
  
  /* @media (min-width: 500px) {
    .grid-item {
      width: 50%;
    }
  }
  
  @media (min-width: 1000px) {
    .grid-item {
      width: 33.333%;
    }
  }
  
  @media (min-width: 1700px) {
    .grid-item {
      width: 25%;
    }
  }
  
  @media (min-width: 2100px) {
    .grid-item {
      width: 20%;
    }
  } */
      
  @media screen and (max-width: 1200px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav a.news {
      display: none !important;
    }
  }
  @media screen and (max-width: 1200px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav {
        display: block;
    }
  }
  @media (max-width: 625px) {
                
    #studentnames {
      padding-left: 2em;
      column-count: 1;
      column-gap: .8em;
      width: 98%;
  }
  h1 {
    font-family: "league-gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #cf0d1d;
    font-size: 120px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: -.01em;
    vertical-align: top;
    padding: 0;
    margin: 100px 0;
    line-height: 120px;
    margin: 100px 0 25px 0;
}
  }