@import url(https://fonts.bunny.net/css?family=abril-fatface:400|cutive-mono:400);

:root {
    --bored-accent-color: hsl(80, 42%, 35%);
    --bored-third-color: hsl(79, 27%, 48%);
    --font-color: hsl(77, 29%, 20%);
    --bored-bg-color: hsl(37, 100%, 89%);
    --bored-accent-font-color: hsl(37, 100%, 93%);
    --bored-main-font: 'Cutive Mono', monospace;
    --bored-accent-font: 'Abril Fatface', display;
}

body {
    font-family: var(--bored-main-font);
    background-color: var(--bored-bg-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: var(--bored-accent-font);
}

p {
    padding: 0 5rem;
    text-align: center;
}

button {
    border: none;
    background-color: var(--bored-accent-color);
    color: var(--bored-accent-font-color);
    padding: .4rem .8rem;
    margin: 1rem;
    text-transform: uppercase;
    font-size: .8rem;
    border-radius: .2rem;
}

button:hover {
    background-color: var(--bored-third-color);
    cursor: pointer;
}

/*--- RESTYLE NAVIGATION ---*/
#mainNav {
  background-color: var(--bored-accent-color);
}

#mainNav * {
  background-color: var(--bored-accent-color);
  font-family: var(--bored-main-font);
  font-size: .5rem;
  text-transform: uppercase;
  line-height: .5rem;
}

#mainNav > ul > a > li {
  background-color: var(--bored-accent-color);
  color: var(--bored-accent-font-color);
}

 #mainNav > ul > a > li:hover {
  color: var(--nav-text-hover-color);
}

#mainNav > ul > a > ul > a > li {
    background-color: var(--bored-third-color);
}