.splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1f1f1f;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }
        
        .splash-logo {
            width: 90vw;
            max-width: 600px;
            height: auto;
            padding: 0 5vw;
            animation: fill 1s ease forwards 6.7s;
        }
        
        .splash-logo path {
            stroke: #f1f1f1;
            stroke-width: 0.3;
        }
        
        .splash-logo path:nth-of-type(1){
            stroke-dasharray: 273.77520751953125;
            stroke-dashoffset: 273.77520751953125;
            animation: line-anim 4s ease forwards;
        }
        
        .splash-logo path:nth-of-type(2){
            stroke-dasharray: 111.02105712890625;
            stroke-dashoffset: 111.02105712890625;
            animation: line-anim 4s ease forwards 0.3s;
        }
        
        .splash-logo path:nth-of-type(3){
            stroke-dasharray: 109.47805786132812;
            stroke-dashoffset: 109.47805786132812;
            animation: line-anim 4s ease forwards 0.6s;
        }
        
        .splash-logo path:nth-of-type(4){
            stroke-dasharray: 170.7802276611328;
            stroke-dashoffset: 170.7802276611328;
            animation: line-anim 4s ease forwards 0.9s;
        }
        
        .splash-logo path:nth-of-type(5){
            stroke-dasharray: 107.65185546875;
            stroke-dashoffset: 107.65185546875;
            animation: line-anim 4s ease forwards 1.2s;
        }
        
        .splash-logo path:nth-of-type(6){
            stroke-dasharray: 22.59844207763672;
            stroke-dashoffset: 22.59844207763672;
            animation: line-anim 4s ease forwards 1.5s;
        }
        
        .splash-logo path:nth-of-type(7){
            stroke-dasharray: 87.34266662597656;
            stroke-dashoffset: 87.34266662597656;
            animation: line-anim 4s ease forwards 1.8s;
        }
        
        .splash-logo path:nth-of-type(8){
            stroke-dasharray: 219.91603088378906;
            stroke-dashoffset: 219.91603088378906;
            animation: line-anim 4s ease forwards 2.1s;
        }
        
        .splash-logo path:nth-of-type(9){
            stroke-dasharray: 201.8064422607422;
            stroke-dashoffset: 201.8064422607422;
            animation: line-anim 4s ease forwards 2.4s;
        }
        
        .splash-logo path:nth-of-type(10){
            stroke-dasharray: 115.53675842285156;
            stroke-dashoffset: 115.53675842285156;
            animation: line-anim 4s ease forwards 2.7s;
        }
        
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fbcd2c;
            animation: spin 1s ease-in-out infinite;
            margin-top: 30px;
            opacity: 0;
            animation: spin 1s ease-in-out infinite, fadeIn 0.5s ease forwards 3s;
        }
        
        @keyframes line-anim {
            to {
                stroke-dashoffset: 0;
            }
        }
        
        @keyframes fill {
            from {
                fill: transparent;
            } 
            to {
                fill: #f1f1f1;
            }
        }
        
        @keyframes spin {
            to { 
                transform: rotate(360deg); 
            }
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            to {
                opacity: 0;
            }
        }