/* More intuitive box size by the border*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Allows percentage based heights that are as expected*/
html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  background-color: hsl(0, 0%, 95%);
}

:root {
  --teal: #177f62;
  --off-white: #f1f1f1;
  --clear-teal: rgba(0, 150, 136, 0.4);
  --lightest-teal: hsl(163, 69%, 95%);
}
body {
  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
  max-width: 1600px;
  font-size: 1.25em;
}

@font-face {
  font-family: "CarterOne";
  src: url("../fonts/CarterOne-Regular.ttf") format("truetype");
}

.main {
  max-width: 1000px;
  margin: auto;
}

h3 {
  /* font-family: "Lato", Arial, Helvetica, sans-serif; */
  font-family: "CarterOne", "Lato", Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  margin: 30px 35% 20px 35%;
  text-align: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
}

#all-content {
  position: fixed;
  top: 0px;
  height: 100vh;
  margin: 0 0 0 10%;
  background-color: var(--off-white);
  overflow: scroll;
  z-index: 2;
}

#sidebar {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0px;
  left: 0px;
  height: 100%;
  margin: 0;
  background-color: white;
  max-width: 10%;
  z-index: 3;
  padding-left: 15px;
}

#topbar {
  display: none;
}

#photo {
  width: 75%;
  margin: 2rem 0 2rem 0;
}

#main-project-holder,
#about-holder,
#other-project-holder,
#contact-holder {
  display: flex;
  flex-direction: row;
  flex: 1, 2;
  align-items: flex-end;
  margin: 15px 0 15px 0;
}

#main-project-icon,
#about-icon,
#other-project-icon,
#contact-icon {
  width: 20%;
  margin: 0 10px 0 0;
}

#linkedin-icon-link,
#github-icon-link {
  height: 32px;
  margin: 25px 5px 10px 5px;
}

/* #basketflower {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
} */

#mini-about-holder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--lightest-teal);
  max-width: 100%;
}

#mini-about-bio {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
h1.mini-about {
  color: var(--teal);
  font-size: 3rem;
  font-family: "CarterOne", "Lato", Arial, Helvetica, sans-serif;
  /* word-wrap: break-word; */
  text-align: left;
  padding: 0rem 0.5rem 0.2rem 2rem;
  margin: 0;
}

h2.mini-about {
  color: var(--teal);
  font-size: 2rem;
  font-family: "CarterOne", "Lato", Arial, Helvetica, sans-serif;
  /* word-wrap: break-word; */
  text-align: left;
  padding: 0.5rem 0.5rem 0.2rem 3rem;
  margin: 0;
}

#butterfly {
  max-width: 25%;
  height: auto;
}

.main-project-grid {
  padding: 40px;
  /* Needed for more regular wrapping of 'tiles'. 
    This makes them all the same height, so there will still 
    be vertical gaps, but not horizontal ones */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  column-gap: 40px;
  row-gap: 40px;
  background-color: var(--off-white);
}

.other-project-grid {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 40px;
  row-gap: 40px;
}

/* Add padding BETWEEN each column (if you want) 
.row,
.row > .column {
  padding: 0px 40px;
}
*/
/* Create three equal columns that floats next to each other */
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  padding: 10px;
  background-color: white;
  /*flex-direction: column;*/
}

.column-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  /* Hide columns by default */
  padding: 20px;
  /* margin: 20px; */
  background-color: white;
}

#small-photo,
#hamburger-icon,
#top-conditional-images {
  display: none;
}

@media screen and (max-width: 1000px) {
  #all-content {
    margin: 0;
  }
  .other-project-grid {
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
    row-gap: 40px;
  }
  #sidebar {
    display: none;
  }

  #topbar {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    top: 0px;
    left: 0px;
    padding: 15px 0 5px 0;
    background-color: white;
    max-height: 15%;
    z-index: 3;
    font-size: 1em;
  }

  #main-project-holder-top,
  #about-holder-top,
  #other-project-holder-top,
  #contact-holder-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 2 1;
  }

  #main-project-icon-top,
  #about-icon-top,
  #other-project-icon-top,
  #contact-icon-top {
    max-width: 25%;
  }

  /* #top-conditional-images {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0 0 0;
  }
  */
  #photo {
    max-width: 10%;
    padding: 5px 0 10px 10px;
    margin: 0;
  }

  #linkedin-icon-link,
  #github-icon-link {
    height: 32px;
    margin: 10px 10px 10px 5px;
  }
  /*
  #hamburger-icon {
    display: block;
    scale: 35%;
  }
  #top-conditional-images {
    background-color: white;
  }
  */

  .top-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .all-content {
    margin: 12% 0 0 0;
  }

  /* Gets the section below the top bar */
  #mini-about-holder {
    margin: 18vh 0 0 0;
  }
  #mini-about {
    padding: 0.5em;
  }
}

/* Only have 1 column (instead of 3) if the screen width is < 600px*/
@media screen and (max-width: 800px) {
  .main-project-grid {
    padding: 15px;
    /* Needed for more regular wrapping of 'tiles'. 
      This makes them all the same height, so there will still 
      be vertical gaps, but not horizontal ones */
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0px;
    row-gap: 15px;
    background-color: var(--off-white);
  }

  .other-project-grid {
    padding: 20px;
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0px;
    row-gap: 15px;
  }

  .mini-about {
    font-size: 1.5em;
  }
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "hide" class is added to the projects NOT meant to appear with the given filter options*/
.hide {
  display: none;
}

#myBtnContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  /*Needed to line up the left edge of the button holder with the project cards */
  /* margin: 20px 0 0 calc(40px - 8px); */
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
  margin: 3px;
  /* Helps keep vertical space between buttons when the screen is narrow */
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
  color: white;
}

.image.fit {
  /* Makes the images centered above the text */

  /* Increases image width */
  width: 100%;
}

.method {
  font-size: 10pt;
  text-align: center;
  margin: 3px 0 3px 0;
}

.heading {
  text-align: center;
}

.details {
  text-align: center;
  width: 85%;
}

/* hr divider double lines; has to be >= 3px otherwise the double line disappears*/
.divider {
  width: 100%;
  border-top: 4px solid rgba(144, 144, 144, 0.25);
}

.citation {
  text-align: center;
  font-size: 10pt;
}

.paperlink {
  color: var(--teal);
}

#about {
  background-image: url("../images/basketflower-med.JPG");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 70vh;
}

#about-paragraphs {
  background-color: rgba(255, 255, 255, 0.7);
  width: 70%;
  padding: 10px 20px;
}

#about-title {
  color: var(--off-white);
  text-shadow: 0px 0px 8px black;
  padding: 0 4%;
}