body {
    font-family: "Arimo", sans-serif;
    background-color:rgb(241, 242, 255)
  }

  /* FONTS */
  .bungee-regular {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-style: normal;
}

  .arsenal-regular {
  font-family: "Arsenal", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.arsenal-bold {
  font-family: "Arsenal", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.arsenal-regular-italic {
  font-family: "Arsenal", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.arsenal-bold-italic {
  font-family: "Arsenal", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.arimo-regular {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.newsreader-regular {
  font-family: "Newsreader", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


  
  /* SIDENAV PROPERTIES */
  .sidenav {
    height: 100%;
    width: 20%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  .sidenav a {
    padding: 6px 8px 6px 20px;
    text-decoration: none;
    font-size: 18px;
    color: #000000;
    display: block;
  }

  #name {
    font-size: 36px;
    padding-bottom: 10%;
    font-family: 'Bungee';
  }

  .majors {
    color: #5E8C91;
  }
  
  .sidenav a:hover {
    color: #696969;
  }

  a.active {
    color:#C95B5B;
  }

  .sub-heading {
    color:#C95B5B;
    font-family: 'Newsreader';
  }
  
  h2 {
    color:black;
    font-family: 'Newsreader';
  }

  .skills {
    color:#C95B5B;
    font-family: 'Newsreader';
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

  /* MAIN OVERVIEW */
  .main {
    margin-left: 20%; /* Same as the width of the sidenav */
    margin-right: 3%;
    font-size: 16px; /* Increased text to enable scrolling */
    padding: 30px 10px;
    padding-bottom: 150px;
  }

  .main-projects {
    margin-left: 20%; /* Same as the width of the sidenav */
    margin-right: 3%;
    font-size: 16px; /* Increased text to enable scrolling */
    padding-bottom: 150px;
  }

  .main a {
    color: black;
    text-decoration: none;
  }

  .main a:hover {
    color: #6aabff;
    opacity: 0.95;
  }

  #Home {
    padding-bottom: 0px;
  }

 
  /* ABOUT */
  .about {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    padding-right: 10px;
  }

  .about-text {
    flex: 1;
  }

  .about-photo {
    flex: 0 0 340px; /* photo column width */
  }

  .about-photo img {
    width: 80%;
    height: auto;
    max-width: 340px;
    object-fit: cover;
    display: block;
  }

  .center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

  }

  @media (max-width: 768px) {
    .about { flex-direction: column; text-align: center; }
    .about-text { width: 100%; }
    .about-photo img { width: 60%; max-width: 320px; }
    .about-text ol { margin-left: 1rem; text-align: left; display: inline-block; }
  }

  /* PHOTO  */
  .two-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
    row-gap: 5%;
  }

  .two-grid-container-thirds {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 5%;
    row-gap: 5%;
  }

  .three-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2%;
    row-gap: 5%;
  }

  .grid-item img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
  }

  .three-grid-container img {
    padding-bottom: 20px;
  }

  /* PROJECTS */
  .project-heading {
    font-size: 36px;
    font-family: 'Arsenal'
  }

  .project-blurb {
    font-size: 18px;
    font-family: 'Newsreader'
  }

  .Exit {
    text-align: right;
  }

  /* MEETCUT */
  .drag-text {
    position: absolute;
    z-index: 9;
    background-color: #fdf9f9;
    text-align: center;
    border: 1px solid #d3d3d3;
    width: 300px;
  }
 
  .drag-item {
    position: absolute; /* required */
    z-index: 9;
    cursor: grab;
}

  .drag-item:active {
      cursor: grabbing;
      z-index: 10; /* bring to front while dragging */
  }
  
  .caption {
    text-align: center;
  }

  /* Responsive Layout for Photos */
  .row {
    /* display: -ms-flexbox; IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    /* gap: 5%; */
  }
  
  /* Create three equal columns that sits next to each other */
  .column {
    flex: 30%;   
    -ms-flex: wrap; /* IE10 */
    align-items: flex-start;
    /* justify-content: center; */
  }
  
  .column img {
    vertical-align: left;
    width: 90%;
    padding: 5%;
  }

  .photo-blurb {
    width: 66%;
  }


  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }

  VIDEO
  .two-col .grid-container {
    /* grid-template-columns: 2fr 1fr; */
    align-items: start;
  }
  .grid-item {
    text-align: left;
  }