@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Varela&display=swap');

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
:root {
    --main-font: "Bebas Neue", sans-serif;
    --sky-color: #0096c7;
    --txt-color: #ffe8d6;
    --grass-color: #55a630;
    --dark-sky-color: #30343f;
}

html{
    scroll-behavior: smooth;
}

.spacetaker {
    height: 20svh;
    position: relative;
    z-index: 0;
}
header{
    height: 300px;
    width: 100%;
    position:absolute;
    top: 0%;
    left: 0%;
    z-index: 1;
    background-color: var(--dark-sky-color);
}
main{
    position: relative;
    z-index: 1;
    border-radius: 20% 20% 0 0;
    height: 40svh;
    background-color: var(--sky-color);
}
footer{
    position: relative; /* anchor absolute positioning */
    height: 50vh;
    background-color: var(--grass-color);
}

header .star,
header .star1,
header .star2 {
    position: absolute;
    height: 25px;
}

header .star  { top: 37px; left: 2vw; }
header .star1 { top: 25px; left: 8vw; }
header .star2 { top: 59px; left: 15vw; }
header .star3 { top: 32px; left: 22vw; }
header .star4 { top: 48px; left: 30vw; }
header .star5 { top: 95px; left: 38vw; }
header .star6 { top: 90px; left: 47vw; }
header .star7 { top: 65px; left: 56vw; }
header .star8 { top: 75px; left: 65vw; }
header .star9 { top: 78px; left: 78vw; }
header .star10 { top: 41px; left: 90vw; }

.starBlink1 {
    animation: twinkle 5s infinite alternate;
}
.starBlink2 {
    animation: twinkle 2s infinite alternate;
}
.starBlink3 {
    animation: twinkle 10s infinite alternate;
}

@keyframes twinkle {
    0%,
    100% {
        filter: drop-shadow(0 0 0px white) brightness(1);
        transform: scale(1.03);
    }
    20%,
    80% {
        filter: drop-shadow(0 0 10px white) brightness(1.5);
        transform: scale(1.06);
    }
    40%,
    60% {
        filter: drop-shadow(0 0 25px white) brightness(2);
        transform: scale(1.1);
    }
    50% {
        filter: drop-shadow(0 0 40px white) brightness(2.5);
        transform: scale(1.13);
    }
}

.cloud {
    position: absolute;
    width: 300px;
    height: auto;
}

.cloud > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block; 
}

@keyframes cloudDrift1 {
    0%   { left: 10vw; }
    30%  { left: 20vw; }
    60%  { left: 5vw; }
    100% { left: 10vw; }
}


@keyframes cloudDrift2 {
    0%   { left: 40vw; }
    20%  { left: 45vw; }
    50%  { left: 38vw; }
    70%  { left: 50vw; }
    100% { left: 40vw; }
}

@keyframes cloudDrift3 {
    0%   { left: 75vw; }
    15%  { left: 80vw; }
    35%  { left: 70vw; }
    60%  { left: 85vw; }
    80%  { left: 72vw; }
    100% { left: 75vw; }
}

.cloud1 {
    top: -100px;
    left: 10vw;
    animation: cloudDrift1 18s linear infinite;
}
.cloud2 {
    top: -60px;
    left: 40vw;
    animation: cloudDrift2 14s ease-in-out infinite;
}
.cloud3 {
    top: -130px;
    left: 75vw;
    animation: cloudDrift3 10s ease-in-out infinite;
}

.spin-btn {
    position: absolute;
    top: 20%;           
    left: 50%;
    transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg);
    transform-style: preserve-3d;
    transition: transform 4s;
    width: 150px;
    height: 50px;
    text-decoration: none;
    z-index: 5; 
}

.spin-btn:hover {
    transform: translate(-50%, -50%) perspective(1000px) rotateX(360deg);
}

.spin-btn span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    background: rgba(255, 255, 255, 0.9);
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 2px;
    transition: 0.5s;
    border: 2px solid #000;
    box-sizing: border-box;
    box-shadow: inset 0 20px 50px rgba(0, 0, 0, 0.2);
}

.spin-btn:hover span {
    color: #fff;
    background: rgba(3, 169, 244, 0.8);
}

.spin-btn span:nth-child(1) { transform: rotateX(360deg) translateZ(25px); }
.spin-btn span:nth-child(2) { transform: rotateX(270deg) translateZ(25px); }
.spin-btn span:nth-child(3) { transform: rotateX(180deg) translateZ(25px); }
.spin-btn span:nth-child(4) { transform: rotateX(90deg)  translateZ(25px); }