*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
}

header h4{
    position: absolute;
    left: 10%;
    bottom: 1rem;
    font-size: 1.6rem;
}

/* Splash Screen */

.intro {
    position: fixed;
    z-index: 10; /* Ensure it's above other elements during animation */
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    transition: opacity 1s ease-in-out;
}

.intro.hide {
    opacity: 0;
    pointer-events: none; /* Ensures clicks go through */
}


/* Updated Logo Animation Styles */
.logoa {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    opacity: 0;
    transition: ease-in-out 0.5s;
}

.logoa.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}

.logoa.fade {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.logo {
    position: relative;
    display: inline-block;
    bottom: 0;
    width: 300px;
    opacity: 1; /* Ensure it's visible */
    transition: ease-in-out 0.5s;
}


.logo.active{
    bottom: 0;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

.logo.fade{
    bottom: 150px;
    opacity: 0;
    transition: ease-in-out 0.5s;
}