body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.regras, .numberSequence, form{
    display: none;
}

.swal2-content {
    text-align: left !important;
}

.error-message {
    color: red;
}

button{
    padding: 5px;
    border-radius: 5px;
    border: 2px solid black;
    width: 100px;
    cursor: pointer;
}

table{
    width: 70%;
}

td{
    width: 35%;
}

.recomecar:hover{
    background-color: crimson;
}

.calcular:hover{
    background-color: darkgreen;
}

.novosnumeros:hover{
    background-color: darkblue;
}

.comojogar:hover{
    background-color: darkorange;
}

.rank:hover{
    background-color: darkorchid;
}

.black:hover{
    background-color: black;
    color: white;
    border-color: darkred;
}

.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.square {
    width: clamp(55px, 30px + 6vw, 70px);
    height: clamp(55px, 30px + 6vh, 70px);
    background-color: #ebebeb;
    border-radius: 10px;
    margin: 10px;
    color: black;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.square:hover {
    background-color: darkgray;
}

.square.clicked {
    background-color: red;
}

#container {
    display: inherit;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#selection {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}


#operations, #operations_especial {
    display: inherit;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.operation, .operation_especial {
    width: clamp(22px, 10px + 5vw, 35px);
    height: clamp(22px, 10px + 5vh, 35px);
    background-color: #ebebeb;
    border-radius: 5px;
    margin: 10px;
    color: black;
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.operation.clicked {
    background-color: red;
}

.operation_especial.clicked {
    background-color: red;
}

.operation:hover,.operation_especial:hover {
    background-color: darkgray;
}


@media screen and (max-width:750px) {

    .recomecar{
        background-color: crimson;
    }
    
    .calcular{
        background-color: darkgreen;
    }
    
    .novosnumeros{
        background-color: darkblue;
    }

    .comojogar{
        background-color: darkorange;
    }

    .rank{
        background-color: darkorchid;
    }

    .black{
        background-color: black;
        color: white;
        border-color: darkred;
    }
    
}