/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
	  background-color: #FFFCDE;
  color: black;
  font-family: 'Cormorant';
   font-size: 16px;
}

.main-container {
  width:100%;
  padding-bottom: 35px;
}

h2 {
    margin: 20px;
    padding: 40px;
    borderstyle: double;
}

h1 {
    font-family: "Faculty Glyphic";
    letter-spacing: 0.1rem;

}

.logo-container {
  width: 80%; 
}

/* The sidebar menu,   overflow-x: hidden;  */
.sidenav {
  height: 100%; 
  width: 25%; 
  position: fixed; 
  z-index: 2; 
  top: 0; 
  left: 0;
  background-color: ; 
  padding-top: 2%;
  padding-left: 2%;
}

/* The navigation menu links */
.sidenav a {
  margin-left: 10%;
  text-decoration: bold;
letter-spacing: 0.1rem;
font-size: 16px;
  font-family: "Faculty Glyphic";
  line-height: 1.5;
  color: #000000;
  display: block;
}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #6DC2CF;
}

@media screen and (min-width: 601px) {
.main-container a.icon {
    display: none;
  }
}

/* Style page content */
.content {
  margin-top: 5%;
  margin-left: 30%; /* Same as the width of the sidebar */
  padding: 0px 20px;
  width: 50vw;
}


.cormorant-medium {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 530;
  font-style: normal;
}

.faculty-glyphic-regular {
  font-family: "Faculty Glyphic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


@media (max-width: 600px) {
  .main-container {
  width:100%;
  }
  body {
    flex-direction: column;
    justify-content: flex-start;
    font-size: 18px;
  }
  .main-container {
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
  }
  .sidenav {
    margin-left:0%;
    padding-bottom: 10px;
    width: 80%;
    position: relative;
    align-items: center;
    justify-content: center;

  }
  
.sidenav a {
margin-left: 0%;
text-decoration: bold;
  font-size: 19px;
  color: #000000;
  display: block;
  width: 60vw;
}
  .sidenav a:not(:first-child) {display: none;}
  .sidenav a.icon {
    display: block;
  }
  

  .content {
  margin-left: 0%; /* Same as the width of the sidebar */
  padding: 0px 20px;
  width: 80vw;
}


}


@media screen and (max-width: 600px) {
  .sidenav.responsive {position: relative;}
  .sidenav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .sidenav.responsive a {
    float: none;
    display: block;
  }
}


::selection {
  color: #6DC2CF;
  background: transparent;
}





.content a.U:link, a.U:visited, a.U:active {
  color: black;
  text-decoration: underline;
}
.content a.U:hover {
  color: black;
  text-decoration: underline;
}

.content a:link, a:visited, a:active {
  color: black;
  text-decoration: none;
}

.content a:hover {
  text-decoration: none;
  background: #B0DFEB;
}

.content a.noU:link, a.noU:visited, a.noU:active, a.noU:hover {
  color: black;
  text-decoration: none;
}
.content a.noU:hover {
  opacity: 0.6;
}



.sidenav a.U:link, a.U:visited, a.U:active {
  color: black;
  text-decoration: bold;
}
.sidenav a.U:hover {
  color: black;
  text-decoration: underline;
}

.sidenav a:link, a:visited, a:active {
  color: black;
  text-decoration: none;
}