/* ==========================================================
   TDA TEMPLATE V2
   PART 1 - Layout
   ========================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

   :root{
   
       --pink:#f4b4c1;
       --pink-dark:#ea97aa;
       --white:#ffffff;
       --text:#171717;
       --shadow:0 12px 35px rgba(0,0,0,.10);
       --shadow-hover:0 18px 45px rgba(0,0,0,.14);
   
   }
   
   *{
       margin:0;
       padding:0;
       box-sizing:border-box;
   }
   
   html{
   
       scroll-behavior:smooth;
   
   }
   
   body{
   
       font-family:'Poppins',sans-serif;
       color:var(--text);
   
       background:
       linear-gradient(
           to bottom,
           var(--pink) 0,
           var(--pink) 250px,
           #fff 250px,
           #fff 100%
       );
   
       min-height:100vh;
   
       -webkit-font-smoothing:antialiased;
   
   }
   
   .container{
   
       width:min(92%,420px);
   
       margin:auto;
   
       padding-top:70px;
   
       padding-bottom:60px;
   
       display:flex;
   
       flex-direction:column;
   
       align-items:center;
   
   }
   
   /* ===========================
         FOTO
   =========================== */
   
   .profile{
   
       width:180px;
   
       height:180px;
   
       border-radius:50%;
   
       object-fit:cover;
   
       border:6px solid white;
   
       box-shadow:
           0 10px 35px rgba(0,0,0,.16);
   
       margin-bottom:30px;
   
       transition:.35s;
   
   }
   
   .profile:hover{
   
       transform:scale(1.02);
   
   }
   
   /* ===========================
         TITOLO
   =========================== */
   
   h1{
   
       font-size:52px;
   
       font-weight:800;
   
       line-height:1;
   
       letter-spacing:-1.5px;
   
       text-align:center;
   
       margin-bottom:14px;
   
   }
   
   /* ===========================
         SOTTOTITOLO
   =========================== */
   
   .subtitle{
   
       text-align:center;
   
       max-width:340px;
   
       font-size:16px;
   
       letter-spacing:3px;
   
       text-transform:uppercase;
   
       font-weight:500;
   
       color:#555;
   
       line-height:1.6;
   
       margin-bottom:42px;
   
   }
   
   /* piccolo effetto di ingresso */
   
   .profile,
   h1,
   .subtitle{
   
       animation:fadeUp .6s ease;
   
   }
   
   @keyframes fadeUp{
   
       from{
   
           opacity:0;
   
           transform:translateY(18px);
   
       }
   
       to{
   
           opacity:1;
   
           transform:translateY(0);
   
       }
   
   }

   /* ==========================================================
   TDA TEMPLATE V2
   PART 2 - Buttons
   ========================================================== */

.btn{

    position:relative;

    width:100%;

    min-height:64px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:var(--text);

    font-size:19px;

    font-weight:600;

    border-radius:22px;

    background:#fff;

    border:2px solid #f3f3f3;

    margin-bottom:18px;

    box-shadow:var(--shadow);

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s,
        background .25s;

    overflow:hidden;

}

/* effetto luce */

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transition:.7s;

}

.btn:hover::before{

    left:150%;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-hover);

}

/* click */

.btn:active{

    transform:scale(.985);

}

/* ===========================
      PULSANTE PREMIUM
=========================== */

.premium{

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #fff7f9
        );

    border:2px solid var(--pink-dark);

    font-weight:700;

    color:#111;

}

/* piccolo pallino premium */

.premium::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    right:24px;

    background:var(--pink-dark);

    box-shadow:
        0 0 0 5px rgba(234,151,170,.18);

}

/* ===========================
      X BUTTON
=========================== */

.xbtn{

    min-height:58px;

    font-size:28px;

    font-weight:700;

    letter-spacing:1px;

}

/* ===========================
      SVG
=========================== */

.btn img{

    position:absolute;

    left:24px;

    width:24px;

    height:24px;

}

/* se usi span */

.btn span{

    position:absolute;

    left:24px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ===========================
      FOCUS
=========================== */

.btn:focus-visible{

    outline:none;

    border-color:var(--pink-dark);

    box-shadow:
        0 0 0 4px rgba(234,151,170,.18);

}

/* ===========================
      ENTRATA
=========================== */

.btn{

    opacity:0;

    animation:buttonIn .55s ease forwards;

}

.btn:nth-of-type(1){

    animation-delay:.18s;

}

.btn:nth-of-type(2){

    animation-delay:.26s;

}

.btn:nth-of-type(3){

    animation-delay:.34s;

}

.btn:nth-of-type(4){

    animation-delay:.42s;

}

@keyframes buttonIn{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   TDA TEMPLATE V2
   PART 3 - Responsive & Finishing
   ========================================================== */

/* -------------------------
   SELEZIONE TESTO
------------------------- */

::selection{

    background:rgba(244,180,193,.35);

}

/* -------------------------
   LINK
------------------------- */

a{

    -webkit-tap-highlight-color:transparent;

}

/* -------------------------
   SCROLLBAR
------------------------- */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#e6b2bd;

    border-radius:999px;

}

/* -------------------------
   MOBILE
------------------------- */

@media (max-width:600px){

body{

    background:
    linear-gradient(
        to bottom,
        var(--pink) 0,
        var(--pink) 215px,
        white 215px,
        white 100%
    );

}

.container{

    width:92%;

    padding-top:40px;

    padding-bottom:50px;

}

.profile{

    width:165px;

    height:165px;

    margin-bottom:24px;

}

h1{

    font-size:40px;

    letter-spacing:-1px;

}

.subtitle{

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:34px;

}

.btn{

    min-height:58px;

    border-radius:20px;

    font-size:17px;

    margin-bottom:15px;

}

.xbtn{

    min-height:54px;

    font-size:26px;

}

}

/* -------------------------
   TABLET
------------------------- */

@media (min-width:601px) and (max-width:900px){

.container{

    max-width:430px;

}

}

/* -------------------------
   DESKTOP
------------------------- */

@media (min-width:901px){

.container{

    max-width:430px;

}

.profile{

    width:190px;

    height:190px;

}

.btn{

    min-height:66px;

}

}

/* -------------------------
   RIDUZIONE ANIMAZIONI
------------------------- */

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto;

}

}

/* -------------------------
   EFFETTO VETRO LEGGERO
------------------------- */

.btn{

    backdrop-filter:blur(10px);

}

/* -------------------------
   HOVER FOTO
------------------------- */

.profile:hover{

    box-shadow:

        0 20px 45px rgba(0,0,0,.20);

}

/* -------------------------
   PREMIUM HOVER
------------------------- */

.premium:hover{

    background:linear-gradient(

        180deg,

        #fff,

        #fff2f5

    );

}

/* -------------------------
   FOOTER (se un giorno lo aggiungerai)
------------------------- */

.footer{

    margin-top:35px;

    font-size:13px;

    color:#777;

    text-align:center;

}