.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 210px;
  margin-top: -210px;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 30%;
  max-width: 100%;
  padding: 0 4px;
}


@media screen and (min-width: 600px) {
  .dropdown {
    display: none;
  }

  .self {
    margin-top: -200px;
  }

  .bio {
    margin-left: 30%;
    margin-right: 30%;
  }
}
  /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
  /* Responsive layout - makes the one column stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  body {
    background-color: #f5f5f5;
  }

  .column {
    flex: 100%;
    max-width: 100%;
  }

  .row {
    display: inline;
  }

  /* hides nav bar */
  .navbar {
    display: none;
  }

  /* hides socials */
  .social {
    display: none;
  }

  /* hides header */
  .header {
    display: none;
  }

  .modal {
    display: none !important;
  }

  .clickable-content {
    cursor: default;
  }

  /* drop down menu on small page */
  .dropbtn {
    background-color: #f5f5f5;
    color: #555f6a;
    padding-right: 7px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 25px;
    border: none;
  }

  .menu .dropdown {
    position: static;
    /* top: 0;
    margin: 0; */
    background-color: #f5f5f5;
    z-index: 1;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: #555f6a;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* this one worked for overing over bars and name */
  .dropbtn:hover + .dropdown-content,
  .dropdown-content:hover {
    display: block;
  }

  .self {
    margin-top: -10px;
    max-width: 100%; /* Ensures the image doesn't exceed the width of its container */
    height: auto;    /* Maintains the aspect ratio of the image */
    display: block;  /* Removes extra space below inline images */
    margin: 0 auto;   /* Centers the image within its container */
  }

  .bio {
    margin-left: 10%;
    margin-right: 10%;
  }

  @media (prefers-color-scheme: dark) {
    body {
      color: #EDEADE;
      background-color: #24282c;
    }

    a {
      color: #EDEADE;
    }

    a:hover {
      color: #666666;
    }

    .header {
      color: #EDEADE;
    }

    .content {
      background-color: #24282c;
    }

    .dropbtn {
      background-color: #24282c;
      color: #EDEADE;
    }

   .menu .dropdown {
      background-color: #24282c;
    }

    .dropdown-content {
      background-color: #24282c;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
      color: #EDEADE;
    }

    .dropdown-content a:hover {
      background-color: #66666630;
    }
  }
}

/* when in dark mode  */
@media (prefers-color-scheme: dark) {
  body {
    color: #EDEADE;
    background-color: #24282c;
  }
  a {
    color: #EDEADE;
  }
  a:hover {
    color: #666666;
  }
  .header {
    color: #EDEADE;
  }
  .content {
    background-color: #434c55;
}
}