@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Micro+5&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Ugaritic&display=swap');

:root {
    --color-foreground: #242404;
    --color-background: #441C04;
    --color-bordercolor: #643c04;
    --color-golden: #a66914;
    --color-golden-strong: #df8e1d;
}

html, body {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

body {
    margin: 0;
    background-color: var(--color-background);
    display: flex;
    flex-direction: initial;
}

* {
    font-family: 'Roboto Serif', serif;
}

main {
    padding: 1rem;
    width: 100vw;
    box-sizing: border-box;
    overflow: auto;
}

button {
    border-style: double;
    border-width: 3px;
    border-radius: 4px;
    background-color: var(--color-foreground);
    color: #fff;
    padding: .4rem;
    border-color: var(--color-bordercolor);
}
button:hover {
    background-color: var(--color-bordercolor);
    cursor: pointer;
}

textarea {
    box-sizing: border-box;
    border-style: double;
    border-color: var(--color-golden);
    border-width: 6px;
    color: #fff;
    background-color: var(--color-bordercolor);
}

input {
    box-sizing: border-box;
    border-style: double;
    border-color: var(--color-golden);
    border-width: 6px;
    background-color: var(--color-bordercolor);
    color: #fff;
}

h1, h2, h3 {
    color: #fff;
}

p {
    color: #fff;
}

table {
    border-collapse: collapse;
    border-style: solid;
    border-color: var(--color-foreground);
    border-width: .3rem;
    width: 100%;
    color: #fff;
}
table > thead > tr > th {
    padding: 10px;
    background-color: var(--color-foreground);
}
table > tbody > tr:nth-child(odd) {
    background-color: #311808;
}
table > tbody > tr > th {
    padding: 10px;
}

/* For mobile screens */
@media screen and (max-width: 786px) {
    html, body {
        overflow: auto;
    }

    body {
        flex-direction: column;
    }

    main {
        padding: 0;
        width: auto;
        overflow: initial;
    }

    footer[class='page-footer'] {
        display: initial;
    }
}