/* @import url('/css/palette.css'); */

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
    position: relative;
}
/* 
body {
    display: grid;
    grid-template-rows: 150px 1fr 150px;
} */

main {
    width: 100%;

    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;

    overflow-y: auto;

    background-color: hsl(0 0 30);

    background-image: url("/images/lines.png");
    background-size: 300px;

}

/* Nav */
/* nav {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    background-color: hsl(0 0 0);
    color: hsl(0 0 100);
    border: solid hsl(0 0 100);
}

nav img {
    height: 100px;
    position: absolute;
    left: 22px;
    top: 22px;
    border: solid hsl(0 0 100);
}

nav .about {
    padding: 0 20px;
} */

.menu-button {
    display: none;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

/* Text */
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

p, a {
    font-size: 20px;
    text-decoration: none;
}

a:visited {
    color: hsl(0 0 100);
}

a:hover {
    color: hsl(0 0 100);
    text-decoration: underline;
}

/* Footer */
a:hover {
    color: var(--text);
    /* border: solid var(--text); */
}

a, a:active {
    color: var(--text-muted);
}

footer {
    width: 100%;

    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;

    background-color: hsl(0 0 20);

    color: hsl(0 0 100);
}

@media (max-width: 700px) {
    /* Text */
    h1 {
        font-size: 33px;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 13px;
    }

    p, a {
        font-size: 15px;
        text-decoration: none;
    }

    /* Footer */
    a:hover {

    }

    a, a:active {

    }

    footer {
        height: 100px;
    }

}