@font-face {
    font-family: headerfont;
    src: url(Cascadia.ttf);
  }

html, body{
    padding:0px;
    margin:0px;
    background:#000000;
    height:100vh;
}


headertext {
  display: flex;
  position: absolute;
  top: 2.5vh; 
  left: 2.5vw; 
  font-size: 2.5vh;
  font-family: headerfont;
  width: 100vmin;
  height: 100vmin;
  color: white
}

contact {
  display: flex;
  position: absolute;
  top: 2.5vh; 
  right: 2.5vw; 
  font-size: 2.5vh;
  font-family: headerfont;
  color: white;
}


.text-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 12.6%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-size: 4vh;
  max-width: 4;
  max-height: 4vh;
  font-family: headerfont;
  color: white;
  animation-name: move-text;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes move-text {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

#contentbody {
  display: flex;
  position: absolute;
  align-items: center;
  top: 50%;
  margin-top: auto; 
  left: 50%; 
  transform: translate(-50%, -50%);
  min-width: 60vmin;
  height: 60vh;
  border-radius: 15px;
}


#topdesc {
  display: flex;
  align-items: center;
  position: relative;
  width: 100vmin;
  top: -20%;
  font-family: 'Segoe UI';
  color: white;
}

name {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  display:flex;
  font-size: 4vh;
}

occupation {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 100%;
  width: 100vmin;
  text-align: center;
  font-size: 2.5vh;
  font-family: headerfont;
  color: white;
}

email {
  position: absolute;
  display: flex;
  top: 95%;
  font-size: 2.5vmin;
  font-family: headerfont;
  color: white;
}

hr {
  display: flex;
  border-top: 1px dashed whiter;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 80vmin;
  top: 250%;
  font-size: 2.5vh;
  font-family: headerfont;
  color: white;
}

#carreer {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 32.5%;
  margin-top: auto; 
  left: 50%; 
  transform: translate(-50%, -50%);
  min-width: 100vmin;
  height: 30vmin;
}

bio {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  margin-top: 7.5rem;
  width: 100vmin;
  text-align: center;
  font-size: 2.5vh;
  font-family: headerfont;
  color: white;
}