:root{
    --bg:#111111;
    --white:#ffffff;
    --text:#d9d9d9;
    --coral:#F04B45;
    --orange:#F58A33;
    --sand:#D7BC76;
    --sea:#67B8AA;
}

.home{
    width:900px;
    max-width:95vw;
    min-height:100vh;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px 20px;
    transform:translateY(20px);
}

.presents{
    color:#9d9d9d;
    font-size:11px;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.logo{
    width:116px;
    display:block;
    margin:0 auto 28px;
    filter:
       drop-shadow(0 0 10px rgba(255,255,255,.15))
        drop-shadow(0 0 28px rgba(240,75,69,.40))
        drop-shadow(0 0 70px rgba(240,75,69,.22));
}

.home h1{
    font-size:76px;
    font-weight:300;
    letter-spacing:10px;
    line-height:1;
    white-space:nowrap;
    margin-bottom:46px;
    text-shadow:
        0 0 18px rgba(240,75,69,.18),
        0 0 60px rgba(240,75,69,.10);
}

.tagline{
    color:var(--text);
    font-size:25px;
    font-weight:300;
    line-height:1.65;
    margin-bottom:58px;
}

.tagline span{
    display:block;
}

.tagline span:nth-child(2){
    color:var(--white);
    font-weight:600;
}

.start-button{
    width:420px;
    max-width:90vw;
    height:68px;
    border:none;
    border-radius:999px;
    background:var(--sea);
    color:#111;
    font-family:"Manrope",sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:2.5px;
    cursor:pointer;
    box-shadow:
        0 0 18px rgba(103,184,170,.20),
        0 0 42px rgba(103,184,170,.10);
    transition:.25s ease;
}


.start-button:disabled,
.start-button:disabled:hover,
.start-button:disabled:active,
.start-button:disabled:focus {
    background:var(--sea);
    color:#111;
    opacity:.45;
    cursor:default;
    transform:none;
    box-shadow:none;
}

.start-button:disabled:hover,
.start-button:disabled:active {
    pointer-events:none;
}

.start-button:hover{
    transform:translateY(-3px);
    background:var(--coral);
    color:#fff;
    box-shadow:
        0 0 24px rgba(240,75,69,.28),
        0 0 60px rgba(240,75,69,.15);
}

/* ============================= */
/* HOME - SMARTPHONE             */
/* ============================= */

@media screen and (max-width: 600px) {

    .home {
        width: 100%;
        max-width: none;
        min-height: 100vh;
        padding: 0 24px;
        transform: none;
    }

    .presents {
        font-size: 9px;
        letter-spacing: 4px;
        margin-bottom: 16px;
        white-space: nowrap;
    }

    .logo {
        width: 95px;
        margin-bottom: 30px;
    }

    .home h1 {
        font-size: 36px;
        letter-spacing: 4px;
        line-height: 1;
        white-space: nowrap;
        margin-bottom: 42px;
    }

    .tagline {
        font-size: 22px;
        line-height: 1.7;
        margin-bottom: 52px;
    }

    .start-button {
        width: 100%;
        max-width: 420px;
        height: 64px;
        font-size: 14px;
        letter-spacing: 2px;
    }

}