body {
  margin: 0%;
  font-family: "Archivo", sans-serif;
}

.divider{
width:100%;
height:0.1vh;
background-color: #767676;
}

.content {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: 15% 1fr 40%;
}

.top-section {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  height: 10.5vh;
  grid-column: 1 / span2;
  grid-row-start: 1;
  background-color: white;
}

.menu-icon,
.mobile-menu {
  display: none;
}

nav {
  transform: rotate(270deg);
  margin-top: -8%;
  margin-right: 17%;
  width: 8%;
  height: 40vh;
}

a {
  text-decoration: none;
}

.nav-links {
  color: rgb(0, 0, 0);
  margin-top: 50%;
  transform: rotate(45deg);
}

.nav-links:hover {
  color: rgb(118, 118, 118);
}

#code {
  color: rgb(118, 118, 118);
}

.socials {
  display: flex;
  justify-content: space-evenly;
  width: 10%;
  height: 10vh;
  margin-left: 10%;
  margin-top: 0%;
}

.linkedin {
  width: 25%;
  margin-top: 0%;
  cursor: pointer;
}

.github {
  margin-top: 20%;
  margin-left: -10%;
  cursor: pointer;
  color: #cd6e29;
}

.code-imgs {
  height: 100%;
  width: 100%;
  grid-column: 1 / span16;
  grid-row-start: 2;
}

#codeorange {
  margin-left: -9%;
  margin-top: -3%;
}

#codeblue {
  margin-left: 10%;
  margin-top: -3%;
}

#collab {
  grid-area: 3/2/3/5;
}

#tech {
  grid-area: 3/5/3/8;
}

#education {
  grid-area: 3/8/3/10;
}

.page-titles {
  font-size: 16px;
  color: black;
}

#collab-title,
#tech-title,
#education-title {
  margin-left: 10%;
}

li {
  font-size: 14px;
  letter-spacing: 1.68px;
  margin-top: 3%;
  line-height: 150%;
}

p {
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 1.68px;
}

#collab-li {
  margin-left: -15%;
}

#tech-li {
  margin-left: -20%;
}

.code-content{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 60vh;
  box-shadow: 0px 5px 55px rgba(0, 0, 0, 0.50);
}

.code-projects{
  display:flex;
  justify-content: space-around;
  align-items: center; 
  width: 100%;
  height: 60vh;
  background-color: #EBF3FF;
}

.code-project-imgs{
  width:25%;
  cursor: pointer;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.45);
}

.project-img{
  width:100%;
}

.code-project-descriptions {
  width: 40%;
  height: 50vh;
}


.modal{
  display: block; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100vw; 
  height: 100vh; 
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.85);
}

.modal-content{
  display:flex;
  align-items: center;
  justify-content: center;
}

.exit-button{
    background-color: transparent; 
    color: white;               
    border: none;                
    font-size: 25px;             
    cursor: pointer;             
    margin-top:-39%;
    margin-left:2%;
}