html {
    scroll-behavior: smooth;
    scrollbar-color: #b69955 #5b1b1c7d;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2%;
    font-family: "Lexend";
    background-image: url(assets/tile.webp);
    background-size: 25rem;
    font-size: 1.05rem;
}

@font-face { font-family: "Shine Typewriter"; src: url(fonts/ArbutusSlab-Regular.ttf) format("truetype"); }
@font-face { font-family: "Aestera"; src: url(fonts/Aestera.ttf) format("truetype"); }
@font-face { font-family: "Lexend"; src: url(fonts/Texturina-VariableFont_opsz\,wght.ttf) format("truetype"); }

::selection {
    background-color: #77a90369;
    color: rgb(239, 247, 212);
}

#gototop {
   display: none;
   position: fixed;
   bottom: 1rem;
   right: 1rem;
   text-align: justify;
   z-index: 4;
   background-color: #b69955;
   color: #5b1b1c;
   border: #5b1b1c 2px solid;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  animation: popup 0.3s;
}

#gototop:hover {
   background-color:#d2b570;
   box-shadow: #bc4141b1 0 0 8px;
}

@keyframes popup {
   0%{
      transform: translateY(40px);
   }
   100%{
      transform: translateY(0px);
   }
}

header {
    text-align: center;
    padding: 1%;
    color: #b69955;
}

h1 {
    font-family: "Aestera";
    line-height: 3.1rem;
    margin-bottom: 0;
    padding: 0 2%;
    user-select: none;
}

a {
    color: #acd478e8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#home {
    color: #c49f4ff5;
    padding: 0rem 0.6rem 0.2rem 0.6rem;
    border-radius: 0.2rem;
    position: absolute;
    top: 0.2rem;
    left: 0;
    font-size: 0.95rem;
    font-family: "Lexend";
}

nav {
    text-align: center;
    color: #d2b570;
    font-size: 0.95rem;
}

main {
    width: min(43rem, 100vw);
    background-color:#5b1b1c;
    box-shadow: inset #a90306 0 0 10px;
    color: #fff4d8e3;
    padding: 0 3%;
    border-radius: 0.2rem;
    border: #cda955 3px groove;
    box-sizing: border-box;
    position: relative;
}

dl {
    padding: 0.2rem;
    padding-top: 0;
}

dt {
    padding-top: 3%;
    color: #e3be67;
}

dd {
    margin: 0.1rem 4%;
    border: #b699557d 2px groove;
    border-style: none none none solid;
    padding-left: 0.4rem;
    line-height: 1.6rem;

}

@media screen and (max-width: 500px) {
    main {
        border-style: solid none;
        font-size: 1rem;
        border-radius: 0;
    }
    body {
        padding: 2rem;
        background-size: 15rem;
    }

    h1 {
        margin-top: 2rem;
    }

}

@media screen and (max-width: 371px) {
    #for {
        font-size: 1.5rem;
    }
}