@font-face {
  font-family: Metropolis;
  src: url(./font/Metropolis-Regular.otf);
}

@font-face {
  font-family: Metropolis_Italic;
  src: url(./font/Metropolis-RegularItalic.otf);
}

@font-face {
  font-family: Clash_Display;
  src: url(./font/ClashDisplay-Variable.ttf);
}

html body{
  font-family: Metropolis, sans-serif;
  color: #332D2D;
  background-color: #F8F5EF;
  scroll-behavior: none;
  overflow-x: hidden;
}

.container{
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  height: 90vh;
  margin-top: 6vh;
}

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

}

#title{
  font-family:Clash_Display;
  font-weight: 600;
  font-size: 4.5vw;
  color:#A67459;
  margin-bottom: -5px;
  white-space: nowrap;
}

#subtitle{
  font-family: Metropolis;
  font-size: 11pt;
  line-height: auto;
}

.logo_box{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

#logo{
  max-height:4rem;
  width:auto;
  margin-right: 15px;
}

img{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.name_box{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#name{
  font-family: Clash_Display;
  font-weight: 600;
  font-size:1.2rem;
  margin-bottom: 5px;
}

#activity{
  font-size: .95rem;

}

.footer_box{
  display: flex;
  align-self: center;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  width: 25vw;
}

#socials{
  max-width:4vh;
  width:3vh;
}

#socials:hover{
  opacity:.8;
  cursor: pointer;
}