$mainColor: #333 !default;
$mainColorText: #ddd !default;


::-webkit-scrollbar {
    width: 17px;
}
::-webkit-scrollbar-track {
    background-color: $mainColor;
}
::-webkit-scrollbar-thumb {
    background-color: lighten($mainColor, 20%);
}
::-webkit-scrollbar-thumb:hover {
    background-color: lighten($mainColor, 30%);
}

body {
    padding: 0;
    margin: 0;
    font-family: arial;

    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    padding: 15px 35px;
    flex: 1 0 auto;
}

header {
    padding: 25px 35px;
    background-color: $mainColor;
    border-bottom: solid 3px darken($mainColor, 15%);
    color: $mainColorText;
}

footer {
    padding: 25px 35px;
    background-color: $mainColor;
    color: $mainColorText;
    border-top: solid 3px darken($mainColor, 15%);
    text-align: center;
    
    a:link , a:visited {
        text-transform: uppercase;
        color: $mainColorText;
        text-decoration: none;
    }

    a:hover, a:active {
        text-decoration: underline;
    }
}