@font-face {
  font-family:QuiteMagical;
  src:url("stuff/QuiteMagicalRegular.ttf");
}

@font-face {
  font-family:Duality;
  src:url("stuff/Duality.ttf");
}

@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

::-webkit-scrollbar {
  width:0.5vw;
}

::-webkit-scrollbar-track {
  background-color:#e3fbff;
}

::-webkit-scrollbar-thumb {
  background:#0e0342;
  border-radius:1vw;
}

body {
  background: linear-gradient(90deg, rgba(0,6,42,1) 0%, rgba(48,0,120,1) 49%, rgba(0,4,45,1) 100%);
  margin:0 auto;
  user-select:none;
}

#header {
  background-image:url("stuff/bg.png");
  display:flex;
  justify-content:center;
  padding:1vw;
}

#header-text {
  background-color:rgba(255,255,255,0.3);
  border-radius:1vw;
  color:rgba(255,255,255,0.9);
  font-family:QuiteMagical;
  font-size:4vw;
  padding:0.4vw 1vw 0 1vw;
}

#menu {
  background-image:url("stuff/bg.png");
  background-color:rgba(255,255,255,0.3);
  border-radius:1vw;
  box-sizing:border-box;
  display:flex;
  font-family:QuiteMagical;
  font-size:2vw;
  justify-content:center;
  text-align:center;
}

#menu span {
  color:rgba(255,255,255,0.9);
  height:3vw;
  padding:2vh 0.5vw 0 0.5vw;
}

#menu span:hover {
  background-color:rgba(48,0,120,1);
  color:#FFFFFF;
  cursor:pointer;
  transition:background-color 0.5s ease;
}
#main {
  background-image:url("stuff/bg.png");
  background-size:20%;
  user-select:text;
  width:100%;
}

#content {
  background-color:#FFFFFF;
  box-sizing:border-box;
  font-family:Duality;
  font-size:1.3vw;
  height:79vh;
  margin:0 15vw 0 15vw;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 5vw 0 5vw;
  width:70vw;
}

#content h1, h2 {
  font-family:QuiteMagical;
  text-align:center;
  user-select:none;
}

#content h2 {
  margin:0;
  padding:0 0 1vw 0;
}

#p1, #p2, #p3, #p4, #p5, #p6, #github, #linkedin, #pixiv, #email {
  border:0.2vw solid #000000;
  border-radius:1vw;
  font-family:QuiteMagical;
  font-size:2vw;
  margin:1vw;
  padding:1vw;
  text-align:center;
  user-select:none;
  width:10vw;
}

#p1 { background-color:#FF9AA2; }
#p2 { background-color:#FFB7B2; }
#p3 { background-color:#FFDAC1; }
#p4 { background-color:#E2F0CB; }
#p5 { background-color:#B5EAD7; }
#p6 { background-color:#C7CEEA; }
#github { background-color:#4d4e4f; }
#linkedin { background-color:#0274b3; }
#pixiv { background-color:#0096fa; }
#email { background-color:#ea4235; }

#p1:hover, #p2:hover, #p3:hover, #p4:hover, #p5:hover, #p6:hover, #github:hover, #linkedin:hover, #pixiv:hover, #email:hover {
  cursor:pointer;
  filter:brightness(80%);
  transition:filter 0.5s ease;
}

#content a{
  color:#000000;
  text-decoration:none;
}

#contact-form {
  display: flex;
  justify-content:center;
}

#contact {
  border:0.2vw solid #000000;
  border-radius:1vw;
  margin-top:1vw;
  padding:1vw;
  width:10vw;
}

#contact-links {
  display:flex;
  justify-content:center;
}

#cv-info-container {
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cv-info {
  border:0.2vw solid #000000;
  border-radius:1vw;
  cursor:text;
  margin:1vw;
  padding:1vw;
  width:40vw;
}

.cv-info table {
  text-align:left;
}

/* PHONE SCREENS */

@media only screen and (max-width:700px){
  ::-webkit-scrollbar {
    width:1vw;
  }

  ::-webkit-scrollbar-thumb {
    border-radius:0;
  }

  #header {
    padding:2vh;
  }

  #header-text {
    font-size:7vw;
    padding:2vw 2vw 0 2vw;
  }

  #menu {
    border-radius:0;
  }

  #menu span{
    font-size:6vw;
    padding:1vw 1vw 3vw 1vw;
  }
  
  #content {
    font-size:4vw;
    height:80vh;
    margin:0;
    width:100vw;
  }
}