body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("media/background2.jpg");
  background-size: cover;
  z-index: -1;
}
body {
  padding-bottom: 2000px;
}



h1 {
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 50pt ;
  margin: 5px 0px 0px 0px;
}

h2 {
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20pt ;
  margin: 0;
}

h3 {
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-weight:bold;
  font-size: 12pt ;
  margin: 0px;
}

h4{
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 50pt ;
}

h5{
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 60pt;
  margin: 0;
  text-align: center;
}

h6 {
  color: #daf89d;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20pt ;
  margin: 0;
}

p {
  color: #102A14;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12pt;
}


.main-flex{
  display: flex;
  justify-content: space-evenly;
  height: 98vh;
  overflow: visible;
  position: fixed;
  top:0;
  left: 0;
}

@media (max-width: 800px) {
  .main-flex {
    flex-direction: column;
    overflow: scroll;
  }
}

.sidenav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width:25%;
  min-width: 300px;

  position: sticky;
  top:0;
  overflow: hidden;
  padding: 2%;
  max-height: 98vh;
}

@media (max-width: 800px) {
  .sidenav {
    width:96%;
    position: static;
    min-height:fit-content;
    overflow: visible;
    max-height: 98vh;
  }
}


.sidenav>a:hover{
  filter: blur(2px);
  
}


.content{
  width: 75%;
  padding:2%;
  overflow: auto;
}

@media (max-width: 800px) {
  .content {
    width:96%;
    overflow: visible;
  }
}

.cv-background{
  background-color: #adefffcb;
  padding: 1% 3% 3% 3%;
  border-radius: 10px;
}


.papers-background{
  background-color: #adefffcb;
  padding: 3% 3% 3% 3%;
  margin-top: 10px;
  border-radius: 10px;
}

.collapsible {
  background-color: #eeeeee00;
  color: #0d411f;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  font-weight:normal;
  font-size: 12pt ;
  margin-bottom: 20px;
}

.collapsible:hover {
  color: #82ff00;
}

.details {
  margin-top: -20px;
  margin-bottom: 20px;
  padding: 0px 24px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f100;
}

.cv-info{
  display: flex;
  flex-direction: row;
  overflow: auto;
}


@media (max-width: 1000px){
  .cv-info{
    flex-direction: column;
    justify-content: center;
  }
}


.left{
  margin: 0px;
  width: fit-content;
  padding-right: 20px;
  flex-shrink: 1;
}
.sidebar-container{
  position: relative;
  align-self: center;
  max-width: 250px;
  margin: 5px;
}

.sidebar{
  width: fit-content;
  length: fit-content;
  outline: solid;
  outline-color:#0d411f;
  outline-width: medium;
  border-radius: 30px;
  padding: 10px 5px 5px 5px;
  flex-shrink: 2;
}


ul {
  /*
  list-style-image: url('spacer.png');
  */
  padding: 0px 15px;
}

ul li {
  margin-bottom: 10px;
  font-family: Futura, Verdana, Geneva, Tahoma, sans-serif;
  color:#0d411f;
}

.meet-me{
  padding: 3%;
}

.meet-me p{
  font-size: 30px;
}

.facts{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

@media (max-width: 750px) {
  .facts {
    flex-direction: column;
    align-items: center;
  }
}


.facts > div{
  justify-content: center;
  width:fit-content;
  height: fit-content;
  text-align: center;
}

.circle{
  background-color: #daf89d;
  position: static;
  justify-content: center;
  border-radius: 50%;
  width:150px;
  height: 150px;
}