* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: var(--color-background);
}

a, p, h1, h2, h3{
    color: var(--color-text);
}

:root {
    --color-background: #2b2b2b;
    --color-text: #f0f0f0;
    /* --color-accentcolor: #2196F3; */
    --color-accentcolor: #e6a478;
    /* --color-accentcolor: #24ad74; */
    --color-navbg: #161616;
    --color-softbg: rgb(37, 36, 36);
}

.highlight{
    color: var(--color-accentcolor);
    font-weight: 900;
}

/* ********
FONTS
******** */

@font-face {
    font-family: 'mainText';
    src: url(./fonts/Dortmund-ExtraBold.otf);
}

@font-face {
    font-family: 'secondairyText';
    src: url(./fonts/Gidole-Regular.ttf);
}

@font-face {
    font-family: 'breadText';
    src: url(./fonts/Helvetica.ttf);
}

@font-face {
    font-family: 'specialText';
    src: url(./fonts/GeosansLight.ttf);
}




/* ************
NAV STYLING
************ */

header nav ul{
    display: flex;
    list-style-type: none;
    justify-content: flex-start;
    padding: 0.8em 0em 0.8em 0em;
    margin-left: 13%;
    gap: 5em;
}

header nav ul li a{
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'specialText';
    text-transform: capitalize;
}

header nav ul li:nth-child(1):hover{
    transform: scale(1.2);
    transition: all 0.5s ease;
}
header nav ul li:nth-child(2):hover{
    transform: scale(1.2);
    transition: all 0.5s ease;
}
header nav ul li:nth-child(3):hover{
    transform: scale(1.2);
    transition: all 0.5s ease;
}

header nav ul li a:nth-child(1):hover{
    color: var(--color-accentcolor);
}
header nav ul li a:nth-child(2):hover{
    color: var(--color-accentcolor);
}
header nav ul li a:nth-child(3):hover{
    color: var(--color-accentcolor);
}




/* ***********
FOOTER
*********** */
footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

#backToTopBtn{
    border: none;
    color:var(--color-accentcolor);
    cursor: pointer;
    font-size: 1.2rem;
    background-color: var(--color-background);
    font-family: 'secondairyText';
    text-transform: capitalize;
    grid-column: 2/3;
    margin-top: 10%;
}



/* ************
TAB STYLING
************ */

:focus{
    outline-style: hidden;
    color: var(--color-accentcolor);
    outline-color: var(--color-accentcolor);
    outline-offset: .2em;
    outline-width: .2em;
    z-index: 1;
}


/* *****************
SCROLL OBSERVBER
***************** */


.hidden{
    opacity: 0;
    transition: all 1s;
}

.show{
    opacity: 1;
}