:root {
    --brown: #46320a;
    --lightbrown: #815909;
    --beige: #cdae7a;
    --red: #a20000;
    color: var(--brown);
    font-family: rsfont;
}


@font-face {
    font-family: RuneScape;
    src: url("/fonts/RuneScape.woff2");
}

@font-face {
    font-family: RuneScape;
    src: url("/fonts/RuneScape_Bold.woff2");
       font-weight: bold;
}

@font-face {
    font-family: RuneScapeQuill;
    src: url("/fonts/RuneScape_Quill.woff2");
       font-weight: bold;
}

@font-face {
    font-family: RuneScapeQuill_8;
    src: url("/fonts/RuneScape_Quill_8.woff2");
       font-weight: bold;
}

* {
    text-decoration-thickness: 2px!important;
}

/* holds the sidebar and container next to each other */
.wrapper {
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: 100rem;
}

body {
    font-family: RuneScape;
    font-size: 200%;
    
    margin: 0;
    padding: 0;

    background-image: url("/images/site/background_v1.png");
    background-repeat: no-repeat;
    background-color: #acc5e9;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: contain;
    font-smooth: none;
    -webkit-font-smoothing : none;
}

article {
    padding: 2rem;
    margin: 0rem auto 20rem auto;
    min-width: 32rem;
}

article, .vnav {
    background-color: var(--beige);
    border: var(--brown) .3rem solid;
    box-shadow: rgba(0, 0, 0, 0.463) 0rem 1rem 1rem;
}

a:link, a:visited {
  color: var(--red);
}

a:link:hover, a:visited:hover {
  filter:brightness(150%)
}

h1 {
    font-family: RuneScapeQuill;
    font-size: 200%;

    margin: 0;
}

h2 {
    font-size: 100%;
    font-style: bold;
    margin: 2rem 0 .5rem 0;
}

h3 {
    font-family: RuneScapeQuill_8;
    font-size: 100%;
    text-decoration: underline;
    margin: 2rem 0 .5rem 0;
}


p {
    margin: 0.5rem 0rem;
}


hr {
    border: none;
    border-bottom: solid var(--brown);
}

ul {
    list-style: none;
    margin: 0;
    margin-left: 1rem;
    padding: 0;
}

ul li:before
{
    content: '-';
    margin-right: .2rem;
}

/* navigation */
.column {
    position: -webkit-sticky;
    position: sticky;

    min-width: 16.5rem;
    
    top: 14.4rem;
    height: 100%;
    margin: 0rem 2rem;
}

.vnav {
    padding: 2rem 0rem;
    margin-bottom: 1rem;

    max-height: fit-content;

    background-color: var(--beige);
}

.vnav ul li {
    list-style-type: none;
    margin: 0 auto;
    text-align: center;
}

.vnav ul li:before {
    content: '';
    margin-right: .2rem;
}

.telenav {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    
    margin: 0;
    padding: 0;
}

.telenav img {
    padding: 4px;
}

.telenav a:hover {
    filter: brightness(130%);
}

/* automatically makes header */

header:before {
    content: "OSRS Zine"
}

header {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 4rem auto;

    font-family: RuneScapeQuill;
    font-size: 400%;
    color:beige;
    line-height: 80%;
    text-shadow:    0px -4px var(--lightbrown),
                    -4px 0px var(--lightbrown),
                    4px 0px var(--brown),
                    0px 4px var(--brown),
                    0px 8px var(--brown);
}

.desat {
    filter: saturate(0%);
}


/* mobile compatibility */
@media only screen and (max-width: 800px) {
  .wrapper {
    flex-wrap: wrap;
    }

  .column {
    position: static;
    justify-self: center;
    margin: 1rem auto;
    }

    body {
        font-size: 150%;
        font-smooth:always;
        -webkit-font-smoothing: antialiased;
    }
    
    article {
        margin: 1rem 1rem 5rem;
        min-width: 10px!important;
    }

    header {
        font-size: 400%;
        font-smooth: none;
        -webkit-font-smoothing : none;
        margin: 0;
    }

}