:root{
    --bgcolor: #FFF7DC;
    --primary: #85C3C4;
    --second:#EEC825;
    --uni:rgb(17, 17, 17);
}

@keyframes logo{
    0%{
        stroke-dashoffset: 493px;
        fill-opacity: 0;
    }
    95%{
        fill-opacity: 0;
        stroke-width: .5px;
    }
    100%{
        stroke-dashoffset: 0px;
        fill-opacity: 1;
        stroke-width: 0px;
    }
}

body{
    margin: 0px;
    padding: 0%;
    /* background-color: black; */
    overflow: hidden;
}
.website-content{
    overflow: auto;
}
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.load-container{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: var(--bgcolor);
    z-index: 99999;
}
.loading-animation{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading-animation path{
    fill: var(--primary);
    fill-opacity: 0;
    stroke: var(--primary);
    stroke-width: .5px;
    stroke-dasharray: 493px;
    stroke-dashoffset: 493px;
    animation: logo 1.5s 1 forwards ease-in;
}

@media (max-width:768px){
   .loading-animation svg{
        height: 100px;
        width: 100px;
    }
}

@media (max-width:480px){
   .loading-animation svg{
        height: 60px;
        width: 60px;
    }
}