body{
    /* height: 110vh;
    background: linear-gradient(20deg,#8052ec, #d161ff);
    color: white; */
}

html{
    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.wrapper{
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 1;
}
.container{
    height:13rem ;
    width: 13rem ; 
    display: flex;
    flex-wrap:wrap ;
    gap: .5rem;
}
.button-option{
    font-weight: bold;
    font-size: 2rem;
    color: #ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d161ff;
    height: 4rem;
    width: 4rem;
    border: none;
    border-radius: .6rem;
}
.button-option:hover{
    cursor: pointer;
}

.btn{
    padding: 1rem;
}

button{
    font-size: 1rem;
    border: none;
    font-weight: bold;
    padding: .4rem .6rem;
    border-radius: .4rem;
    background-color: black;
    color: white;
}
button:hover{
    cursor: pointer;
}

.popup{
    font-size: 2rem;
    font-weight: bold;
    height: 100%;
    width: 100%;
    background-color: #ffff;
    position:absolute;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    z-index:2;
}

.hide{
    visibility: hidden;
}