:root {
    --main-bg: transparent;
    --main-col: #000000;
    --sub-col: rgb(116, 116, 116);
    --nav-hover-col: #111111;
    transition: 1.0s;
    transition: var(--transition-duration, 1s);
}
  
:root.darkmode {
    --main-bg: #111111;
    --main-col: #ffffff;
    --sub-col: rgb(165, 165, 165);
    --nav-hover-col: #eeeeee;
    transition: 1.0s;
    transition: var(--transition-duration, 1s);
}

body{
    margin: 0;
    padding: 0;
    color: var(--main-col);
    background-color: var(--main-bg);
    transition: 1s;
    opacity: 1;
    transition: opacity 0.5s;
    font-family: futura-pt;
}



#preloader {
z-index: 30;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}
a{
    text-decoration: none;
    color: var(--main-col);
}


/* #loader {
width: 50px;
height: 50px;
border: 4px solid #000000;
border-top: 4px solid #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

#preloader p {
margin-top: 10px;
}
  
body.loaded #preloader{
    display: none;
} */