body{
    font-family: 'Roboto';
    font-size: 1.6dvh;
    color: rgb(32, 59, 77);
    text-align: left;
    background-color: #fafafa;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap : 3dvh;
}

#research-internship{
    color: rgb(77, 32, 44);
}

body *{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

a {
  color: inherit;
  text-decoration: none;
}

img{
    border-radius: 2dvh;
    height: 24dvh;
}

h2{
    margin: 2dvh;
    font-size: 2.5dvh;
    font-weight: 900;
}

strong{
    font-size: 1.7dvh;
    font-weight: 900;
}

h3 {
    font-weight: 900;
}

h4 {
    font-size: 1.7dvh;
    margin: 0.5dvh;
    font-weight: 700;
}

p {
    font-size: 1.4dvh;
    margin: 0.5dvh;
    font-weight: 500;
}



.band{
    align-self: stretch;
    flex: 0 0 5dvh;
    gap: 8dvh;
    background-color: rgb(223, 220, 226);
}

.box{
    width: 100dvw;
    flex-flow: row wrap;
    flex: 1 1 5dvh;
}

#content-box{
    flex-grow: 3;
    align-items: flex-start;
    justify-content: center;
}

.content{
    background-color: rgb(223, 220, 226);
    border-radius: 2dvh;
    min-height: 32dvh;
    margin: 1dvh 1dvh;
    padding: 0 1dvh 1dvh;
    flex-direction: column;
    justify-content: flex-start;
    flex: 0 0 38dvh;
    transition: flex-grow 200ms ease;
}

#skills, #display{
    min-height: 32dvh;
}

.information{
    flex-direction: column;
}

#display{
    align-items: stretch;
    align-self: center;
    flex: 0 1 80dvh;
}

.card{
    border-radius: 1.5dvh;
    flex-direction: column;
    padding: 0 1dvh 1dvh;
}

.holder{
    align-self: center;
    padding: 0 1dvh 1dvh;
}

.information .card{
    align-self: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.button:hover{
    background-color: rgb(184, 179, 202);
}

.appear{
    animation: appear 0.5s ease-in;
}

.overshoot-up {
  animation: overshoot-up 0.5s ease-out;
}

.overshoot-straight-up {
  animation: overshoot-straight-up 0.5s ease-out;
}

.overshoot-down {
  animation: overshoot-down 0.5s ease-out;
}

@keyframes overshoot-up {
    0% {transform: translateY(14.5dvh) translateX(-21dvh);}
}

@keyframes overshoot-straight-up {
    0% {transform: translateY(7dvh);}
}

@keyframes appear{
    0%{transform: translateX(-80dvh) scale(0.01);}
    80%{transform: scale(1.1);}
}

@keyframes overshoot-down {
    0% {transform: translateY(-23.5dvh) translateX(21dvh);}
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Thin.ttf") format("ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Light.ttf") format("ttf");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Regular.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Bold.ttf") format("ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Black.ttf") format("ttf");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}