@font-face {
    font-family: Minecraft;
    src: url("/fonts/Minecraft-Seven_v2.ttf");
}
:root{
    --bg:#FDF8EC;
    --altbg:#8B8B8B;
    --main: black;
    --lighter: #bca387;
    --font:"Minecraft", serif;
  }
html{
    height:100%;
    width:100%;
    font-size: 19px;
}
body:before{
    background-attachment: scroll;
    content: '';
    display: block;
    position: fixed;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    transform: scale(1);
    z-index: -700;
    background-image: url("/img/book.png");
    background-size: cover, auto;
    background-position: center, 0% 0%;
    background-repeat: no-repeat, repeat;
}
body{
    font-family: var(--font);
    color: var(--main);
    font-size:1rem;
    line-height:normal;
    font-weight:150;
}
body, html {
    scrollbar-width: auto;
    scrollbar-color:  var(--lighter) var(--bg);
}
::selection {
    background: var(--lighter);
    color:white
  }
/*main stuff*/
#container{
    max-width:600px;
    text-align:left;
    margin: auto;
    display:flex;
}
.content{
    background-color: var(--bg);
    width: 90%;
    height:15rem;
    font-size: 1rem;
    padding: 0 15px;
    margin: 15px 15px 0;
    text-align: center;
    overflow-y: auto;
    scrollbar-width: thin;
}
p{text-align: start;}
/*nav*/
#nav h2{
    font-size: 19px;
    display: inline;
}
#nav ul, p{
    list-style-type: square;
    text-align: start;
    line-height: 1.2rem;
}
#blog h2{display: block;font-size: 20px !important;text-decoration: none !important;}
#blog h2:before, #blog h2:after{content:' ▪ '}
a#blog{text-decoration: none !important;}
/*images*/
#logo img{
    display:flex;
    width:75%;
    margin:auto;
    text-align: center;
}
#logo img:hover{
    transform: scale(1.1);
    transition: 0.6s ease;
    -webkit-transition: 0.6s ease
}
/*text*/
a{
    text-align: inherit;
    text-decoration: underline;
    color:inherit
}
a:hover{
    color: var(--lighter);
}
/*other*/
button{
    font-family: "Minecraft", serif;
    font-size: 17px;
    background-color: #C6C6C6;
    color: #4D4D4E;
    border: outset black;
    width:200px;
    height:45px;
    margin: auto
}
button:hover{
    background-color: var(--altbg);
}
#btns{
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}
hr{
    background-color:var(--lighter);
    border:none;
    border-radius:5px;
    height: 2px;
}
#big{
    display:inline;
}
#big li{
    margin-left:1rem;
}
#little{display: none;}
@-moz-document url-prefix() {
    .content {
        margin-top: -0.5rem
    }
    #nav {
        margin-top: auto
    }
    #btns{
        margin-top: 2rem;
    }
  }
/*media querey*/
@media (max-width: 1225px){
    #container{
        max-width:540px;
    }
    .content{
        background-color: var(--bg);
        width: 90%;
        height:14rem;
        font-size: 1rem;
        padding: 0 15px;
        margin: 15px 15px 0;
        text-align: center;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    @-moz-document url-prefix() {
        #btns{
            margin-top: 1.5rem;
        }
      }
}
@media (max-width: 770px){
    body:before{
        background-image: '';
        background: #603A22;
    }
    html{
        font-size:15px
    }
    #container{
        max-width:100%;
        margin: auto;
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .content{
        width: 80%;
        height:auto;
        font-size: 1rem;
        padding: 0 15px;
        margin: 15px 15px 0;
        text-align: center;
    }
    #nav{padding-top: 15px;}
    #big{display:none}
    #little{display: inline;padding-bottom: 15px;}
    #little li{
        margin-left:-2rem;
    }
}