/* animation */
@keyframes animate {   
    0%, 100% {
        color: #0e3742;
        background-color: transparent;
        z-index: 10;
        text-shadow: 0 0 10px white, /* More subtle shadow at start/end */
                0 0 20px white, /* Ensuring visibility */
                0 0 40px white, /* Adjusted for visual consistency */
                0 0 80px white, /* Adjusted for visual consistency */
                0 0 160px white; /* Adjusted for visual consistency */
    }
    50% {
    color: #8AAEE0;
    text-shadow: 0 0 10px black, /* More subtle shadow at start/end */
                0 0 20px black, /* Ensuring visibility */
                0 0 40px black, /* Adjusted for visual consistency */
                0 0 80px black, /* Adjusted for visual consistency */
                0 0 160px black; /* Adjusted for visual consistency */
                   
    }
}

@keyframes neonBlackShadow {
    0%, 100% {
        text-shadow: none;
    }
    50% {
        text-shadow: 0 0 10px rgb(255, 0, 149), 0 0 12px rgb(255, 0, 149);
    }
}

@keyframes neonBlackShadow2 {
    0%, 100% {
        text-shadow: none;
    }
    50% {
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}

@keyframes neonBlackShadow3 {
    0%, 100% {
        text-shadow: 0 0 10px black;
    }
    50% {
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}

@keyframes blacktoWhiteFade {
    0%, 100% {
        background: rgb(255, 255, 255);
        width: 0px;
    }
    50% {
        background: rgb(255, 255, 255);
        width: 170px;
    }
}

@keyframes fadeIn {
    0% {
      opacity: 0; /* Start with full transparency */
    }
    100% {
      opacity: 1; /* Fade in to full visibility */
    }
}

@keyframes blacktoWhiteFadeFooter {
    0%, 100% {
        background: white;
        width: 0px;
    }
    50% {
        background: white;
        width: 80px;
    }
}
/* animation */

/* fonts */
#welcome h2 {
    color: #ffffff;
    text-align: center;
    font-size: 48px;
    text-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black, 0 0 80px black;
}

#welcome p {
    color: yellow;
    font-weight: bold;
    font-style: italic;
    text-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black, 0 0 80px black;
    font-weight: 100;
}

#welcome h5 {
    font-size: 24px;
    font-weight: 100;
    text-shadow: 0 0 10px black, 0 0 20px black;
}

h1 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding-bottom: 10px;
    font-size: 36px;
    padding-top: 10px;
    text-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black, 0 0 80px black;
    font-weight: 100;
}

h1::after {
	content: '';
	background: #ffffff;
	display: block;
	height: 4px;
	margin: 15px auto 5px;
    margin-bottom: 20px;
    animation: blacktoWhiteFade 4s ease-in-out infinite;
    border: 1px solid black;
}

footer h5 {
    color: white;
    text-align: center;
    font-size: 20px;
    animation: 4s neonBlackShadow3 ease-in-out infinite;
}

footer h5:after {
	content: '';
	display: block;
	height: 3px;
	margin: 15px auto 5px;
    animation: blacktoWhiteFadeFooter 4s ease-in-out infinite;
    border: 1px solid black;
    margin-bottom: 15px;
    border-radius: 20px;
}
/* fonts */

@media screen and (min-width: 320px) {
    
    #welcome p {
        font-size: 18px;
    }

}

@media screen and (min-width: 440px) {

    #welcome p {
        font-size: 16px;
    }

}

@media screen and (min-width: 520px) {

    #welcome p {
        font-size: 20px;
    }

}

/* large tablets and laptop styles */
@media screen and (min-width: 990px) {

    #welcome h2 {
        font-size: 28px;
    }

    #welcome p {
        font-size: 16px;
    }

    #welcome h5 {
        font-size: 18px;
    }

}

/* large tablets and laptop styles */
@media screen and (min-width: 1200px) {

    #welcome h2 {
        font-size: 48px;
    }

    #welcome p {
        font-size: 18px;
    }

}
/* large tablets and computer styles */