/* ===========================
   SCHOOLED v2
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Quicksand",sans-serif;

    background:linear-gradient(
        180deg,
        #c9b8ef 0%,
        #dcc8f5 40%,
        #f7ecfb 100%
    );

    color:#5d4d76;

    min-height:100vh;

    overflow:hidden;

}

/* ===========================
   Background
=========================== */

.background{

    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    overflow:hidden;

}

/* ===========================
   Floating Sparkles
=========================== */

.sparkle{

    position:absolute;

    font-size:28px;

    color:white;

    opacity:.45;

    animation:float 5s ease-in-out infinite;

    user-select:none;

}

.s1{
    left:10%;
    top:15%;
}

.s2{
    right:15%;
    top:20%;

    animation-delay:1s;
}

.s3{
    left:25%;
    bottom:15%;

    animation-delay:2s;
}

.s4{
    right:20%;
    bottom:18%;

    animation-delay:3s;
}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

/* ===========================
   Main Card
=========================== */

.landing{

    width:min(700px,92vw);

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(16px);

    border-radius:35px;

    padding:60px;

    text-align:center;

    box-shadow:0 20px 60px rgba(90,60,130,.18);

}

/* ===========================
   Text
=========================== */

.version{

    color:#9276c5;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:1px;

}

.logo{

    font-family:"Press Start 2P",cursive;

    font-size:48px;

    color:#7d66b5;

    line-height:1.4;

    margin-bottom:30px;

    text-shadow:4px 4px rgba(255,255,255,.45);

}

.subtitle{

    font-size:22px;

    color:#6f5b8d;

    margin-bottom:45px;

}

/* ===========================
   Buttons
=========================== */

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

.mainButton,
.secondaryButton{

    text-decoration:none;

    padding:18px 42px;

    border-radius:18px;

    font-weight:700;

    transition:.25s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.mainButton{

    background:#ffbfdc;

    color:#6d4f86;

}

.secondaryButton{

    background:#d7c5ff;

    color:#5e4b83;

}

.mainButton:hover,
.secondaryButton:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 30px rgba(0,0,0,.12);

}

/* ===========================
   Features
=========================== */

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

    gap:20px;

}

.feature{

    background:white;

    border-radius:20px;

    padding:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.25s;

}

.feature:hover{

    transform:translateY(-6px);

}

.feature{

    font-size:30px;

}

.feature span{

    display:block;

    margin-top:12px;

    font-size:15px;

    font-weight:700;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:700px){

.logo{

font-size:30px;

}

.subtitle{

font-size:18px;

}

.landing{

padding:35px;

}

}