:root {
    --color:#2875e8;
    --bg-color:#faf4e1;


    --cream: #f6f3e9;
    --yellow:rgb(238, 237, 234);
    
    --body-copy: 1rem;
    --heading-copy: calc(var(--body-copy)*2);

    --gutter: 2rem;
    --vertical: 8rem;
}

h1 {
    color: var(--color);
    font-size: var(--heading-copy);
}

hgroup {
    background-color: var(--cream);
    padding-block: calc(var(--gutter)*2);
    padding-left: var(--gutter);
}


.nav {
  display: flex;
  gap: calc(var(--gutter)*3);
  list-style: none;
   justify-content: center;
}

a {
    text-decoration: underline;
}

body {
    font-family: sans-serif;
    color: var(--color);
    background-color: var(--yellow);
    font-size: var(--body-copy);
    block-size: 100vh;
    display: grid;
    align-items: center;
    
}

main {
    padding-inline:var(--gutter);
    padding-block: var(--vertical);
    display: grid;
    justify-items: center;
}



ul {
    padding-block: var(--gutter);
    gap: calc(var(--gutter)*2.5);
    display: grid;
    justify-items: center;
}

footer{
    color: var(--yellow);
    background-color: var(--color);
    padding-inline: var(--gutter);
    padding-block: calc(var(--gutter)*2);
    display: grid;
    justify-items: center;
}