*{background: var(--dark); border: 0; transition: all 0.5s; color: var(--light); fill: var(--light);} 
.alertbody{    
    width: calc(100% - 3em);
    max-width: 27em;
    padding: 1em;
    margin: 0.5em ;   
    position: fixed;       
    bottom: 0.5em;
    left:calc(50% - 0.5em);
    transform: translateX(-50%);
    border-radius: 2em;
    display: flex;
    flex-wrap: wrap;
    transition: background 1s;
        
}
.alertbody p{width: 100%; text-align: center; padding: 0; margin: 0;}
.alertbody h2{width:100%; padding: 0; margin: 0;}
.Alertcont{
    width:100%;
    height: 100%;
    position: fixed;
    top:50%;
    left:50%;
    display: block;
    transform: translate(-50%, -50%);
    padding:0;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);   
    max-width: 100%;     
    margin-top: 0;
    z-index: 999;
    
}
.alertbody button{background: #0082ff; width: 100%; padding: 1.25em !important; border-radius: 1.5em; margin: 1em auto 0 auto;}
.Alertcont img{
    width: 6em;
    margin: 0.5em auto;
    height: auto;
    background: transparent;
}
.Alertcont p{
    width: 100%;
    background: transparent;
    margin-bottom: 1em;
}
.Alertcont h2{
    width: 100%;
    text-align: center;
    background: transparent;
}

.popup-span{
    display: flex;
    flex-wrap: wrap;
    background:  var(--dark);
    box-shadow: var(--dark-shadow);
    padding: 0.2em;
    width: 15em;
    height: auto;
    border-radius: 2em;
    position: fixed;
     left: 50%;
     transition: all 0.5s;
     border: 0;
     overflow: hidden;
    transform: translateX(-50%);}         
.popup-img{
    margin: 0;
    margin-left: 0.25em;
    border-radius: 0;
    padding: 0;
    height:3em;
    background: transparent;
}   
.popup-p{
    
    width: calc(100% - 7em);
    margin: auto;
    padding: 0;
    text-align: center;
    background: transparent;
}
.popup-invisible{        
    bottom: -5em;
}
   .popup-visible{
    bottom: 0.5em;
   }