body {
    background: #000000;
    height: auto;
    overflow-y: auto;
    perspective: 1px;
    margin: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-image 0.3s ease;
}

.gif-bg {
    position: absolute;
    inset: -30%;
    background-image: url('uyItau1.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.8s ease;
    will-change: transform;
}
.gif-bg.active {
    opacity: 1;
}

.starter img {
    width: 500px;
    animation: spin 5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    position: absolute;
    z-index: 2;
}
.starter h1 {
    animation: fadeinsc 5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: white;
    position: relative;
    z-index: 1;
    margin: 0;
}

@keyframes spin {
    from { transform: rotate(0deg); opacity: 1; }
    to { transform: rotate(360deg) scale(0); opacity: 0; }
}
@keyframes fadeinsc {
    0% { transform: scale(1); opacity: 0; }
    50% { transform: scale(5); opacity: 1; }
    100% { transform: translateX(-50); }
}

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes gifFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.starter {
    display: grid;
    place-items: center;
    height: 100vh;
    position: relative;
}
.blogstart {
    animation: fadein 5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    color: white;
    font-family: 'Quicksand', Arial, sans-serif;
    position: relative;
    z-index: 2;
    font-size: clamp(1.5rem, 5vw, 3rem);
}