/* ======================================================
   THE AMAZING JUKEBOX
   PUSH INVITATION
   Final UI posible
====================================================== */

#push-overlay{

position:fixed;
inset:0;

display:none;

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

    padding-bottom:45px;

    z-index:999999;

    pointer-events:none;

}


/* ======================================================
CARD
====================================================== */

.push-card{

width:650px;
max-width:90vw;

padding:30px 45px;

border-radius:22px;

background:rgba(22,22,22,.58);

border:1px solid rgba(47,185,190,.55);

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

box-shadow:

        0 0 14px rgba(47,185,190,.30),

        0 0 30px rgba(216,60,164,.18);
   color:white;

    font-family:'Orbitron';

    text-align:center;

    pointer-events:auto;

    animation:pushFade .45s ease;

}


/* ======================================================
ICON
====================================================== */

.push-icon{

font-size:55px;

margin-bottom:18px;


}

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

.push-title{

color:#7efcf8;

font-size:55px;

margin-bottom:18px;


text-shadow:

        0 0 6px #2fb9be;

}

/* ======================================================
TEXT
====================================================== */

.push-text{

    font-size:42px;

    line-height:1.55;

    color:#dddddd;

    margin-bottom:28px;
}

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

.push-enable{

width:100%;

padding:11px;

    border:none;

    border-radius:25px;

    cursor:pointer;

    font-family:'Orbitron';

    background:

        linear-gradient(

            90deg,

            #1ed9d7,

            #d83ca4

        );

    color:white;

    transition:.25s;

}

.push-enable:hover{

    transform:scale(1.03);

}

/* ======================================================
LATER
====================================================== */

.push-later{

margin-top:20px;

border:none;

background:none;

cursor:pointer;

font-family:Orbitron,sans-serif;

font-size:30px;

color:#8fd8da;

}
@keyframes pushFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ======================================================
TABLET / DESKTOP
====================================================== */

@media (min-width:768px) and (hover:hover) and (pointer:fine){

.push-card{

width:480px;

padding:28px 34px;

}

.push-icon{

font-size:28px;

margin-bottom:12px;

}

.push-title{

font-size:35px;

margin-bottom:12px;

}

.push-description{

font-size:22px;

margin-bottom:22px;

}

.push-enable{

height:54px;

font-size:18px;

}

.push-later{

font-size:16px;

margin-top:14px;

}

}

/* ======================================================
SMALL PHONES
====================================================== */

@media (max-width:420px){

.push-card{

width:88vw;

padding:28px;

}

}