@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=DotGothic16&family=Potta+One&family=Yusei+Magic&display=swap');

 .yusei-magic-regular {
    font-family: "Yusei Magic", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .dotgothic16-regular {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .potta-one-regular {
    font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  .dela-gothic-one-regular {
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 100;
    font-style: normal;
  }  

 html{
    font-size: 16px;
    font-family: "DotGothic16";
    color: rgb(16, 80, 144);
 }

 h1{
    display: block;
    font-family: "Dela Gothic One";
    font-size: 2em;
    text-decoration: underline;
    margin: auto;
 }

 h2{
    display: block;
    font-family: "Dela Gothic One";
    font-size: 1.5em;
    margin: auto;
 }

 h3{
   display: block;
   font-family: "DotGothic16";
   font-size: 1em;
   text-decoration: underline;
 }

 .mainbox{
    display: block;
    width: 70%;
    border: 1px solid;
    border-radius: 0.3em;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    background-color: gold;
 }

 .mainbio{
    border: 1px solid blue;
    padding: 1em;
    background-color: rgba(193, 227, 255, 0.774);
 }
 .mainbio p{
    font-size: 0.8em;
    color: midnightblue;
 }
 .mainbio details p{
       font-size: 0.85em;
 }

 .bio{
    padding: 1em;
    font-size: 0.8em;
 }

 .links{
   font-size: 0.85em;
 }
.links a{
   text-decoration: none;
   color: blue;
}
.links a:hover{
   text-decoration: underline;
   color: darkslateblue;
}

.update{
   display: block;
   text-align: end;
   font-size: 0.7em;
   color: midnightblue;
}

.back{
   display: block;
   text-align: center;
   padding: 0.7em;
}
.back a{
   text-decoration: none;
   font-family: "Dela Gothic One";
   color: blue;
}
.back a:hover{
   color: darkslateblue;
}

footer{
   display: block;
   text-align: center;
   font-size: 1em;
}

@media screen and (max-width: 800px) {
   .mainbox{
      display: block;
      width: auto;
      margin: auto;
   }

   h1{
      font-size: 1.7em;
   }
   h2{
      font-size: 0.85em;
   }

   .mainbio p{
      font-size: 0.7em;
   }
}