/* 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');


* {
    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: #6B0D25;
  margin: 0;
  padding: 0;
  background-image: url(../images/matc-site-bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}
.brandline {
  background-color: #F5637A;
  height: 15px;
  width: 100%;
  margin-bottom: 24px;

}
.mclogo {
  margin-bottom: 46px;
  margin-left: 48px;
  display: flex;
  gap: 8px;
  align-items: center;
}
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 #F5637A;
  flex: 1;  /* fixed width */
  height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px 0 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: #F5637A;
}
nav a {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    font-size: 11.5px;
    color: white;
    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;
}
/* gd */
#gd:hover, #gd.active {
  background-color: #F5637A;
}

#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");
}

/* ux/id */

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

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

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

/* vad */

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

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

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


.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%;
    margin-top: 40px;
}

#studentnames a {
  color: #F5637A;
   font-family: "Mona Sans", sans-serif;
  /* font-style: italic; */
  padding-right: 3px;
  font-size: 21px;
  line-height: 33px;
font-weight: 400;
}
  /* #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: rgba(255, 255, 255, 0.8);
    font-family: "Mona Sans", sans-serif;
    font-weight: 400;
    text-transform: none;
    padding-top: 20px;
    font-size: 21px;
    /* letter-spacing: 0.04em; */
    line-height: 20px;
}
.grid-item a span {
     font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    color: #F5637A;
    font-size: 12px;
    letter-spacing: 0px;
}

.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: #F5637A;
  /* padding: 10px;
  text-align: center; */
display: flex;
justify-content: space-between;
padding: 0 24px;
height: 130px;
}
footer p {
  font-size: 8px;
   font-family: "Archivo", sans-serif;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #6B0D25;
  letter-spacing: .2em;
  font-weight: 125%;

}

footer h3, footer h3 a, footer a, footer span {
   font-family: "Archivo", sans-serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
font-size: 11.25px;
letter-spacing: .2em;
  color: #6B0D25 !important;
margin: 0;
align-self: center;
}
footer h3, footer h3 a:hover {
  color: #dfdfdf;
}




/* 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%;
}


}