@font-face {
   font-family: "font1";
   src: url("/font1.ttf") format("truetype");
   font-style: normal;
   font-weight: 500;
   font-display: block;
}
@font-face {
   font-family: "font2";
   src: url("/font2.ttf") format("truetype");
   font-style: normal;
   font-weight: 500;
   font-display: block;
}
@font-face {
   font-family: "font3";
   src: url("/font3.ttf") format("truetype");
   font-type: normal;
   font-weight: 400;
   font-display: block;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   line-height: 1.7em;
   transition: 0.3s ease-out;
}
::-webkit-scrollbar {
   width: 0.2em;
}
::-webkit-scrollbar-thumb {
   background-color: #222;
   border-radius: 5em;
}
body {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   overflow-x: hidden;
   background-color: rgb(254,254,254);
}
header {
   position: fixed; 
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   padding: 1em 0;
}
main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 50%;
   height: 100vh;
   margin-left: auto;
   margin-right: auto;
}
main p, a {
   font-size: 1.1em;
   font-family: "font2", sans-serif;
}
h1,p,a {
   text-align: center;
}
main h2 {
   font-family: "font1", sans-serif;
   margin-bottom: 0.5em;
}
a {
   text-decoration: none; 
   color: inherit;
} 
a span {
   font-family: "font3", sans-serif;
}
a svg {
   width: 25px;
   height: 25px;
}

@media (max-width: 460px) {
   header {
      width: 90%;
   }
   main {
      width: 85%;
   }
}