/* ========================================= */
/* SATURN 404 */
/* ========================================= */

.saturn-404{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    padding:120px 0;

    text-align:center;

}

/* ========================================= */
/* GLOW */
/* ========================================= */

.saturn-glow{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(126,211,33,0.08);

    filter:blur(140px);

}

/* ========================================= */
/* STARS */
/* ========================================= */

.star{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#95DB17;

    opacity:.4;

}

.star1{top:10%;left:12%;animation:orbit 8s infinite ease-in-out;}
.star2{top:18%;right:15%;animation:orbit 10s infinite ease-in-out;}
.star3{top:35%;left:8%;animation:orbit 12s infinite ease-in-out;}
.star4{top:50%;right:10%;animation:orbit 9s infinite ease-in-out;}
.star5{top:65%;left:15%;animation:orbit 11s infinite ease-in-out;}
.star6{top:25%;left:80%;animation:orbit 7s infinite ease-in-out;}
.star7{top:75%;right:20%;animation:orbit 13s infinite ease-in-out;}
.star8{top:85%;left:50%;animation:orbit 10s infinite ease-in-out;}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.saturn-content{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:auto;

}

/* ========================================= */
/* SATURN */
/* ========================================= */

.saturn-planet{

    position:relative;

    width:180px;

    height:180px;

    margin:0 auto 40px;

    animation:planetFloat 8s ease-in-out infinite;

}

.planet-core{

    width:180px;

    height:180px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #95DB17,
        #B7F04C
    );

    box-shadow:0 0 30px rgba(149,219,23,.4);

}

.planet-ring{

    position:absolute;

    width:280px;

    height:80px;

    border:6px solid rgba(149,219,23,.7);

    border-radius:50%;

    top:50%;

    left:50%;

    transform:
    translate(-50%,-50%)
    rotate(-20deg);

    animation:ringRotate 12s linear infinite;

}

/* ========================================= */
/* 404 */
/* ========================================= */

.error-code{

    display:block;

    font-size:220px;

    line-height:1;

    font-weight:800;

    color:rgba(149,219,23,.12);

    animation:float404 6s ease-in-out infinite;

}

/* ========================================= */
/* TITLE */
/* ========================================= */

.saturn-content h1{

    font-size:58px;

    margin-bottom:20px;

}

.saturn-content p{

    max-width:700px;

    margin:0 auto 30px;

    color:#7C7C7C;

    line-height:1.9;

}

/* ========================================= */
/* STATUS */
/* ========================================= */

.orbit-status{

    margin-bottom:35px;

    font-size:18px;

    color:#666;

}

.orbit-status strong{

    color:#95DB17;

}

/* ========================================= */
/* SPACE LOG */
/* ========================================= */

.space-log{

    max-width:650px;

    margin:0 auto 40px;

    background:#ffffff;

    padding:30px;

    border-radius:24px;

    text-align:left;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.space-log div{

    margin-bottom:10px;

}

.error-line{

    color:#95DB17;

    font-weight:600;

}

/* ========================================= */
/* BUTTONS */
/* ========================================= */

.saturn-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

}

.theme-btn-outline{

    padding:16px 30px;

    border:2px solid #95DB17;

    border-radius:50px;

    color:#111;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.theme-btn-outline:hover{

    background:#95DB17;

    color:#fff;

}

/* ========================================= */
/* ANIMATIONS */
/* ========================================= */

@keyframes float404{

    0%{

        transform:
        translateY(0)
        rotate(-2deg);

    }

    50%{

        transform:
        translateY(-30px)
        rotate(2deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(-2deg);

    }

}

@keyframes planetFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes orbit{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes ringRotate{

    from{

        transform:
        translate(-50%,-50%)
        rotate(-20deg);

    }

    to{

        transform:
        translate(-50%,-50%)
        rotate(340deg);

    }

}

/* ========================================= */
/* MOBILE */
/* ========================================= */

@media(max-width:767px){

    .error-code{

        font-size:120px;

    }

    .saturn-content h1{

        font-size:34px;

    }

    .saturn-buttons{

        flex-direction:column;

    }

    .planet-core{

        width:130px;

        height:130px;

    }

    .planet-ring{

        width:220px;

    }

}