/* RESET */

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

html{
    scroll-behavior:smooth;
    height:100%;
}

body{

    min-height:100dvh;
    margin:0;
    padding:20px;

    font-family:"Google Sans Flex", sans-serif;

    display:grid;
    place-items:center;

    color:#fff;

    position:relative;

    background:#1f1f1f;

}

/* OVERLAY */

.overlay{

    position:fixed;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.30)
    );

    z-index:0;

}

/* CONTENUTO */

.container{

    position:relative;

    z-index:1;

    width:100%;
    max-width:720px;

    text-align:center;

    padding:70px 60px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:30px;

    animation:fadeUp .8s ease;

}

/* LOGO */

.logo{

    width:180px;
    max-width:70%;

    margin-bottom:40px;

}

/* TITOLO */

h1{

    font-size:clamp(2.3rem,6vw,4.5rem);

    line-height:1.1;

    margin-bottom:24px;

    font-weight:700;

}

/* TESTO */

p{

    font-size:1.1rem;

    line-height:1.7;

    color:rgba(255,255,255,.82);

    margin-bottom:40px;

}

/* BOTTONE */

.button{

    display:inline-block;

    padding:18px 38px;

    border-radius:999px;

    background:#fff;

    color:#111;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.button:hover{

    transform:translateY(-3px);

    background:#f3f3f3;

}

/* FOOTER */

footer{

    position:fixed;

    left:0;
    right:0;
    bottom:20px;

    text-align:center;

    color:rgba(255,255,255,.55);

    font-size:.85rem;

    z-index:1;

}

/* ANIMAZIONE */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* TABLET */

@media (max-width:768px){

    .container{

        padding:45px 28px;

    }

    .logo{

        width:140px;

    }

    h1{

        font-size:2.3rem;

    }

    p{

        font-size:1rem;

    }

}

/* SMARTPHONE */

@media (max-width:480px){

    body{

        padding:16px;

    }

    .container{

        padding:36px 22px;

        border-radius:22px;

    }

    h1{

        font-size:2rem;

    }

    p{

        line-height:1.6;

    }

    .button{

        width:100%;

        padding:16px;

    }

    footer{

        bottom:12px;

        font-size:.75rem;

    }

}