:root {
    --nav-height: 56px;
    --screen-height: calc(100vh - (var(--nav-height)));
}

@font-face {
    font-family: 'veteran-typewriter';
    src: url('../fonts/veteran_typewriter.ttf');
}

body {
    background-image: url("../images/theme.png");
    background-attachment: fixed;
    padding-top: var(--nav-height);
    font-family: veteran-typewriter;
    color: white;
    overflow-y: overlay;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .orange {
    color: darkorange;
}

a.anchor {
    position: absolute;
    margin-top: calc(var(--nav-height) * -1.2);
}

/*scrollbar*/
::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: inherit;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #838383;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(175, 175, 175);
}

/*body scrollbar*/
body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background: #343A40;
}

a {
    text-decoration: none;
    color: unset;
}

a:hover {
    text-decoration: none;
    color: unset;
}

/*********TOP TITLE***********/

#title-image {
    filter: invert(100%);
    max-width: 100%;
    max-height: 50vh;
    padding: 3.5% 10% 3.5% 10%;
}

@media only screen and (max-width: 576px) {
    #title-image {
        padding: 10% 0 10% 0;
    }
}