:root {
    --main-height: calc(100vh - 83px);
    --header-background-color: beige;
    --footer-background-color: beige;
}

#layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header, footer {
    flex-shrink: 0;
}

main {
    height: var(--main-height);
    min-height: var(--main-height);
    box-sizing: border-box;
    overflow-y: auto;
}

header {
    background-color: var(--header-background-color);
}

footer {
    background-color: var(--footer-background-color);
    padding-top: 5px;
    padding-bottom: 5px;
}

header a {
    text-decoration: none;
    color: #333333;
    font-weight: bold;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

header a:hover {
    text-decoration: none;
    color: black;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

footer a {
    text-decoration: none;
    color: #595C5F;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

footer a:hover {
    text-decoration: none;
    color: black;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}