/* 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=Archivo:ital,wght@0,100..900;1,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* max-width: 100%; */
    /* background-color: rgba(255, 255, 255, 0); */
   
}
.smallx {
  text-transform: lowercase;
  display: inline;
  flex: 0 0 auto;
}
body {
  background: ##2D3544;
  margin: 0;
  padding: 0;
  background-image: url(../images/26.png);
  background-repeat: no-repeat;
  /* background-size: 100%;
  background-attachment: fixed; */
  background-position: right bottom;
}
.brandline {
  background-color: #7B8799;
  height: 15px;
  width: 100%;
  margin-bottom: 24px;

}
.mclogo {
 
 
  display: flex;
  gap: 17px;
  align-items: center;
  padding-left: 48px;
}
nav {
    /* display: flex; */
    /* justify-content: space-between; */
    align-items: center;
      margin: 0 24px 0 48px;

}
nav a {
  width: 465px;
  width: 33.2%;
    min-width: 300px; /* stops shrinking below this width */
    /*smax-width: 465px;tops growing past this width */
}
nav div  {
  width: 100%;
  border: solid 2px #8796AB;
  flex: 1;  /* fixed width */
  /* height: 46px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
    padding: 21px 25px 21px 25px;
  flex-wrap: wrap;
   
  min-width: 300px; /* stops shrinking below this width */
  max-width: 468px; /* stops growing past this width */

  

}

nav div span {
  display: flex;
  gap: 19px;
}
nav div.active  {
  background-color: #8796AB;
}
nav a {
   font-family: "Chivo Mono", monospace;
  font-optical-sizing: auto;
 
  font-style: normal;
  /* font-variation-settings:
    "width" 100; */
    font-size: 16.62px;
    color: #C7CDD5;
    letter-spacing: 0.2em;
    /* text-transform: uppercase; */
    text-decoration: none;
}

nav a div article {
  display: flex;
  justify-content:space-between;
}
nav div article span {
 align-self:center;
}
nav div img {
  align-self:center;
}
.container {
    padding-left: 48px;
}
.showinfo span {
  color: white;
  font-size: 18px;
  line-height: 30px;
  font-family: "Chivo Mono", monospace;
  font-weight: 600;
  padding: 30px 0;
}
/* gd */
#gd:hover, #gd.active {
  background-color: #EE9E5F;
  color: white;
}

#gd.active span img  {
  content: url("../images/icon-gd-square-hoveractive.png");
}

#gd span img {
  content: url("../images/icon-gd-square.png");
}

#gd:hover span img {
  content: url("../images/icon-gd-square-hoveractive.png");
}

/* photo */

#photo:hover, #photo.active {
  background-color: #62C0D3;
   color: white;
}

#photo.active span img  {
  content: url("../images/icon-ux-circle.png");
}

#photo span img {
  content: url("../images/icon-ux-circle.png");
}

#photo:hover span img {
  content: url("../images/icon-ux-circle-hoveractive.png");
}

/* ux/id */

#uxid:hover, #uxid.active {
  background-color: #DF5A64;
   color: white;
}
#uxid.active span img  {
  content: url("../images/icon-vad-triangle-hoveractive.png");
}

#uxid span img {
  content: url("../images/icon-gd-square.png");
}

#uxid:hover  span img {
   content: url("../images/icon-gd-square-hoveractive.png");
}

/* vad */

#vad:hover, #vad.active {
  background-color: #6abf92;
   color: white;
}
#vad.active span img  {
  content: url("../images/video_square.png");
}

#vad span img {
  content: url("../images/video_square.png");
}

#vad:hover  span img {
  content: url("../images/icon-vad-triangle-hoveractive.png");
}

#pht span img {
  content: url("../images/icon-ux-circle.png");
}
#pht:hover  span img {
  content: url("../images/icon-ux-circle-hoveractive.png");
}
#pht:hover, #pht.active {
  background-color: #8796AB;
}


.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: 700;
  font-style: normal;
    color: #cf0d1d;
    font-size: 200px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    vertical-align: top;
    padding: 0;
    margin: 100px 0;
    line-height: 180px;
    margin: 100px 0 25px 0;
 
  font-size: 40px;
  line-height: 43px;
  color: white;

font-family: "Chivo", sans-serif;
   text-transform: inherit;
  
  }
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%;
    margin-top: 40px;
}

#studentnames a {
  color: #C7CDD5;
  font-family: "Chivo Mono", monospace;
  /* font-style: italic; */
  padding-right: 3px;
  font-size: 18px;
  line-height: 30px;
font-weight: 600;
}
  /* #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:#ffffff;
}
/* .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-weight:400;
  text-transform: uppercase;
}


	.grid-item a {
    color: #ffffff;
      font-family: "Chivo Mono", monospace;
    font-weight: 600;
    text-transform: none;
    padding-top: 20px;
    font-size: 22px;
    /* letter-spacing: 0.04em; */
    line-height: 20px;
}
.grid-item a span {
      font-family: "Chivo Mono", monospace;
    font-weight: 400;
    font-style: normal;
    /* text-transform: none; */
    color: #C7CDD5;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: 0px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.grid li img:hover {
 
  transform: scale(1);
}
/* .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: 1 !important;
  
}
.programLinks {
  display: flex;
  justify-content: center;
  gap: 40px;
padding: 72px 0;
}
.programLinks a {
  color: white;
  font-size: 24px;
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
/* text-transform: uppercase; */
display: inline-block;
}

footer {
  background-color: #8796AB
  /* padding: 10px;
  text-align: center; */
display: flex;
justify-content: space-between;
padding: 0 24px;
height: 130px;
}
footer p {
  font-size: 11px;
    font-family: "Chivo Mono", monospace;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #060606;
  letter-spacing: .2em;
  font-weight: 600;

}

footer h3, footer h3 a, footer a, footer span {
    font-family: "Chivo Mono", monospace;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
font-size: 13.4px;
letter-spacing: .2em;
  color: #060606 !important;
margin: 0;
align-self: center;

}
footer h3, footer h3 a, footer a, footer span a{

text-decoration: underline;
 text-underline-offset: 4px;
}
footer h3, footer span a:hover {
  color: #dfdfdf !important;
  text-decoration: underline !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;
  }
   */

  footer h3, footer h3 a {
    font-family: "mongoose", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: 32px;
    letter-spacing: .06em;

    margin: 0;
}




  @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;
    }

  }

/* RESPONSIVE DESIGN */
@media screen and (max-width: 970px) {
body {
  background-color: #e2f2ef;
}
.programLinks {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
padding: 72px 0;
}
.programLinks a{
  display: block;
  justify-content: center;
  gap: 40px;
  font-size: 20px;
padding: 12px 0;
}
.mainimage {
  display: flex;
  justify-content: center;
  }
.mainimage img{
width: 95%;
}


}