/* -- General settings -- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
}/* ---------------------------------------------------------- */

/* -- Burger Menu -- */
#burger_menu{
  position: fixed;
  cursor: pointer;
  font-size: 3vw;
  top: 2%;
  left: 94%;
}/* ---------------------------------------------------------- */

/* -- Footer -- */
#footer_text{
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 0.9vw;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 195%;
}/* ---------------------------------------------------------- */

/* -- Overlay -- */
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-y: hidden;
  transition: 0.4s;
}

.overlay-content {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 4vw;
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  color: black;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: grey;
}

.overlay .closebtn {
  position: absolute;
  color: black;
  font-size: 4vw;
  top: 1%;
  left: 93.5%;
}/* ---------------------------------------------------------- */
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}/* ---------------------------------------------------------- */
@media (orientation: portrait){
  #footer_text{
    font-size: 1.5vh;
  }
  #burger_menu{
    font-size: 4vh;
    left: 89%;
  }
  .overlay .closebtn {
    font-size: 5vh;
    top: 1%;
    left: 88%;
  }
  .overlay-content {
    font-size: 5vh;
    top: 25%;
  }
}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* ----------------- Page Specific Content ------------------ */

/* -- Font Settings -- */
h1, h2, h3,{
  font-family: 'Barlow Semi Condensed', sans-serif;
}/* ---------------------------------------------------------- */

/* -- Section 1 -- */
.div1 {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}/* ---------------------------------------------------------- */

/* -- Portrait Image -- */
#portrait{
  width: 31%;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  filter: grayscale(100%);
}
#portrait:hover{
  filter: grayscale(0%);
  transition: .2s;
}/* ---------------------------------------------------------- */

/* -- Flex Container -- */
.table_container{
  font-family: 'Roboto', sans-serif;
  width: 55%;
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.table_container_mobile{
  display: none;
  font-family: 'Barlow Semi Condensed', sans-serif;
}/* ---------------------------------------------------------- */

/* -- Accordion (Flex Container Mobile) -- */
.accordion {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: solid black 1px;
  font-size: 18px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #eee;
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}/* ---------------------------------------------------------- */

@media (max-width: 980px){
  #portrait{
    display: none;
  }
  .table_container{
    width: 100%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }
}/* ---------------------------------------------------------- */
@media (max-width: 600px){
  .table_container{
    display: none;
  }
  .table_container_mobile{
    display: block;
    padding-top: 10vh;
  }
  #portrait{
    display: block;
    position: relative;
    width: 37vh;
    left: 50%;
    top: 33vh;
    padding-bottom: 4vh;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    filter: grayscale(0%);
  }
}/* --------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */

/* -- Section 2 -- */
.div2 {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}/* ---------------------------------------------------------- */

.about_me{
  font-family: 'Roboto', sans-serif;
  font-size: 1.3vw;
  padding-left: 18vw;
  padding-right: 18vw;
  padding-top: 17vh;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.5;
}

a{
  text-decoration: none;
}

a:link.in_text{
  color: black;
  font-weight: 800;
}
a:visited.in_text{
  color: black;
}
a:hover.in_text{
  color: grey;
  text-decoration: underline;
}
a:active.in_text{
  color: white;
}

@media (orientation: portrait){
  .about_me{
    font-size: 2.2vh;
    padding-top: 4vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #footer_text{
    display: none;
  }
}
/* ---------------------------------------------------------- */