body{
    margin: 0;
    padding: 0;
    background-color: #dadaa4;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 25%;
    height: 95%;
    background-color: #0f856f;
    border-radius: 50px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.line{
    width: 80%;
    height: 0.2%;
    background-color: #fff;
}

.container_buttons{
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: 2%;
    width: 90%;
    break-inside: auto;
    position: relative;
    margin-top: -5%;
}

.container_buttons button{
    font-size: 30px;
    width: 90%;         
    aspect-ratio: 1 / 1; 
    border-radius: 50%;  
    border: none;
    background-color: #ffffff5d;
    cursor: pointer;
    transition: 0.5s;
    
}
.container_buttons button:hover{
    background-color: #ffffff8e;   
}
.container_buttons button.active, .container_buttons button:active{
    background-color: #ffffff8e;
    font-size: 20px;
}

.button_clear{
    background-color: #ffffff56;
    font-size: 20px;
    width: 15%;
    clip-path: polygon(
        0% 50%, 20% 0%, 100% 0%, 100% 100%, 20% 100%
    );
    color: #b33b3b;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.funcionalities{
    display: flex;
    position: relative;
    bottom: -3%;
    width: 80%;
    height: 4.5%;
}
.funcionalities img{
    cursor: pointer;
    width: 10%;
    height: 100%;
    margin: 0;
    margin-right: 3%;
    padding: 2px;
    transition: 0.9s;
}
.funcionalities img:hover{
    background-color: #0b6d5b;
    padding: 2px;
    border-radius: 50px;
}

.history_select{
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
    margin-right: 5%;
    background-color: #777777;
    color: #fff;
}

.container_inputs{
    display: flex;
    flex-direction: column;
    width: 80%;
}

.input_number{
    text-align: right;
    font-size: 35px;
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    left: 0;
}

.input_response{
    text-align: right;
    font-size: 25px;
    background-color: transparent;
    color: #ffffffd0;
    border: none;
    outline: none;
}

.clear{
    color: #b33b3b;
}

.signal{
    color: #4d4d4d;
}

#btn_equal{
    background-color: #5a5a5a;
    color: #fff;
}
#btn_equal:hover{
    background-color: #686868;
}

.modal{
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #b33b3b;
    color: #fff;
    border-radius: 50px;
    padding: 0 3% 0 3%;
    height: 6%;
    font-size: 20px;
    position: absolute;
    bottom: 14%;
}


@media(max-width: 768px){
    .container{
        width: 80%;
        height: 85vh;
        margin-top: -15%;
    }

    .funcionalities{
        height: 4%;
    }
    .funcionalities img{
        height: 100%;
    }
}