:root {

    --color-head: black;
    --color-text: #261f15;
    --color-highlight: #e86f2e;
    --color-back: #fcf9f2;

    --space-1: 1rem;
    --space-2: 2rem;
    --space-3: 3rem;
    --space-4: 5rem;
    --space-5: 7rem;
    --space-6: 9rem;

    --font-1: 'Libre Baskerville', serif; 
    --font-2: 'Special Gothic Expanded One', sans-serif;

}

body {
    background-color: var(--color-back);
}

h1 {
    font-family: var(--font-1);
    font-size: var(--space-6);
    font-weight: 700; 
    margin-bottom: var(--space-3);
    margin-left: var(--space-2);
}

h2 {
    font-family: var(--font-1);
    font-size: var(--space-5);
    font-weight: 500; 
}

h3 {
    font-family: var(--font-1);
    font-size: var(--space-4);
}

h4 {
    font-family: var(--font-1);
    font-size: var(--space-3);

}

h5 {
    font-family: var(--font-1);
    font-size: var(--space-2);
}

p {
    font-family: var(--font-1);
    font-size: var(--space-1);
    color: var(--color-text);
    margin-left: var(--space-5);
    padding: 10px;
}

.menu-select {
    position: absolute;
    right: var(--space-1);
    flex-direction: column;
    flex-wrap: wrap;
    text-align: left;
    width: 30%;
}

.button { 
    position: relative;
    display: inline-flex;
    right: var(--space-1);
    padding: 10px;
    font-family: var(--font-2);
    font-weight: 700;
    font-size: var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    padding-right: 10px;
    transition: right .5s ease-out;
}

.button:hover {
    position: relative;
    color: var(--color-highlight);
    cursor: pointer;
    right: var(--space-2);
}

.button:active {
    position: relative;
    color: var(--color-head);
}