*{
    margin: 0;
    padding: 0;
}
.body{
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.container{
    
    background-color: white;
    width: 300px;    
    height: 600px;
    display:flex;   
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    background-color: rgb(50, 0, 90, 0);
}
.encabezado{
    width: 80%;    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
}
.detalle{   
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index:100;
}
.encabezado>div{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgb(50, 0, 90);

}
.detalle>div{
    width: 60px;
    height: 60px;
    border-radius: 50%;    
   border: 1px solid rgb(50, 0, 90);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgb(50, 0, 90);
   font-size: large;

   
}
.detalle>div:hover{
   
}
.mensaje{
    position: fixed;
    top: 0;
    background-color: fuchsia;
    width: 100%;    
    text-align: center;
    padding: 10px;
    visibility: hidden;
    
}
.mensajeINVISIBLE{
    position: fixed;
    top: 0;
    background-color: fuchsia;
    width: 100%;    
    text-align: center;
    padding: 10px;
    visibility: visible;
    
}
.titulo{
    padding-bottom: 30px;
    color: rgb(50, 0, 90);
    font-weight: 800;
}
.logo{
    
    position: fixed;
    z-index:0;
}
.imagenlogo {
    -webkit-filter: blur(1px);
    filter: blur(0px);
    opacity: 0.1;
    padding-top: 40px;

}
.bloqueo {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.fondomorado{
    background-color: rgb(50, 0, 90);
}
.fondoblanco{
    background-color:white;
}
.iconoimg{
    color: rgb(115, 0, 209);
    width: 40%;
    
}