:root {
    --color: #FFF8F1;
    --background: #A5B6CC;
    --hover-color: #1D2631;

    --body-copy: 1rem;
    --heading-copy: calc(var(--body-copy) * 3);
    --font: monospace;

    --gutter: 10rem;
    --vertical: 4rem;
}

body {
    font-family: var(--font);
    color: var(--color);
    background-color: var(--background);
    font-size: var(--body-copy);
    block-size: 100vh;
    /* display: grid; */
    /* grid-template-rows: min-content 1fr min-content; */
    align-items: center;
}

main {
    padding-inline: var(--gutter);
    padding-block: calc(var(--vertical) * 1/2);
    text-align: center;
}

nav {
    text-align: center;
}

h1 {
    font-size: calc(var(--heading-copy) * 2.8);
    /* font-weight: 200; */
    text-align: center;
}


ul {
    padding-inline: var(--gutter);
    display: flex;
    justify-content: center;
    gap: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: var(--vertical);
    li:hover {
        font-weight: bolder;
        color: var(--hover-color);
        
    }
}




hgroup, footer {
    /* color: var(--background);
    background-color: var(--color); */
    padding-inline: var(--gutter);
    padding-block: var(--vertical);
    p {
        
    }
}

hgroup p{
    font-size: calc(var(--body-copy) * 3);
    /* letter-spacing: 5rem; */
    text-align: center;
     padding-block: calc(var(--vertical) * 1/2);
     :hover{
        font-weight: bolder;
        color: var(--hover-color);
    }

}


footer p {
    text-align: center;
    :hover{
        font-weight: bolder;
        color: var(--hover-color);
    }
}