:root {
    --dark-red: #622310;
    --light-red: #AE5940;
    --fill-cream: #FFFAF0;
    --gold: #FFD078;
    --light-gold: #FFF0D4;
    --med-cream: #E0C593;

    --half-gold: rgba(255, 208, 120, 0.5);

    --p-font: "EB Garamond", "Times New Roman";
    --h-font: "dm-serif-display", "Times New Roman";
    --mono-font: "recursive-mono-linear-static";
}

@font-face {
  font-family: "dm-serif-display"; /* set name */
  src: url(fonts/dm-serif-display.woff2); /* url of the font */
}

html {
    font-size: 14px;
}

body {
    background-image: url("../images/paper-texture.png");
    background-size: 100vw;
    background-repeat: repeat;
    background-color: #EAD9B9;

    margin: 0;
    padding: 0;

    font-family: var(--p-font);
}

header {
    background-color: var(--dark-red);

    padding: 20px;

    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;


    color: var(--gold);
    font-family: var(--h-font);

    z-index: 100;

    /* border-bottom: 3px solid var(--light-gold); */
}

.header-logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;

    img {
        max-width: 50px;
    }
}

a {
    color: var(--dark-red);
}

nav {
    display: flex;
    justify-content: space-between;

    align-items: center;
}

nav a {
    color: var(--light-gold);
    font-size: 1.2rem;
    font-family: var(--p-font);
    font-weight: bold;

    padding: 10px;
}

.hamburger-menu {
    display: none;
}

h1 {
    font-size: 3rem;

    padding: 0px;
    line-height: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: var(--h-font);
}

p, label, input, textarea {
    font-family: var(--p-font);
    font-size: 1.2rem;
}

.two-columns-p {
    column-count: 2;
    column-gap: 20px;
}

button {
    background-color: var(--gold);
    color: black;
    border: none;
    border-radius: 5px;

    font-family: var(--p-font);
    font-size: 1.2rem;
    font-weight: bold;

    padding: 10px;

    transition-duration: 0.1s;
}

button:hover {
    background-color: var(--light-gold);
    box-shadow: 0px 0px 10px var(--gold);
}

.popup {
    position: fixed;

    z-index: 99;

    background-color: var(--dark-red);
    color: var(--light-gold);
    border: 5px solid var(--light-red);
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgb(0,0,0,0.7);

    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: 16px;

    height: auto;
    width: auto;
}

.hide {
    display: none;
}

/* Styling for phone screens */
@media (max-width: 1050px) {
    main {
        display: flex;
        flex-direction: column;
    }

    .hamburger-menu {
        max-width: 50%;
        /* width: 10rem; */
        display: flex;
        justify-content: center;
        align-content: center;
        align-self: center;
        flex-direction: column;

        height: 50px;

        padding: 5px;
        border-radius: 5px;
        border: 0px;
        background-color: var(--gold);

        transition-duration: 0.5s;

        span {
            background-color: var(--dark-red);
            height: 6px;
            width: 40px;
            border-radius: 20px;
            /* border: 1px solid #000000; */
            padding: 0;
            margin: 3px;
        }
    }

    nav {
        display: none;
    }

    nav.show {
        background-color: var(--dark-red);
        border-left: 3px solid var(--light-red);
        border-bottom: 3px solid var(--light-red);

        display: flex;
        flex-direction: column;
        position: absolute;
        top: 104px;
        right: 0px;
        height: auto;
        width: 170px;

        padding-bottom: 10px;

        text-align: left;
        align-items: start;

        a {
            font-family: var(--p-font);
            font-weight: bold;
        }
    }
}