h1 {
    color: white;
    opacity: 0.6;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

   .footer {
        text-align: center;
        background: rgba(0, 0, 0, 0.329);
        color: white;
        position: fixed;
        width: 100%;
        bottom: 0;
        font-size: 16px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        z-index: 2;
    }

.footer a {

    color: white;
}


body {
    cursor: url(x.png), auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.O {
    cursor: url(o.png), auto !important;
}

.conteiner {
    justify-content: center;
    display: flex;
    align-items: center;
    justify-items: center;
}

.input {
    width: 90px;
    margin: 10px;
    height: 90px;
    font-size: 30px;
    text-align: center;
    background: rgb(68, 101, 109);
    border: 1px solid black;
    justify-content: center;
    align-items: center;
    justify-items: center;
    display: flex;
    cursor: url(x.png), auto;


}

.input.O {
    width: 90px;
    margin: 10px;
    height: 90px;
    font-size: 30px;
    text-align: center;
    background: rgb(68, 101, 109);
    border: 1px solid black;
    justify-content: center;
    align-items: center;
    justify-items: center;
    display: flex;
    cursor: url(o.png), auto;
}

.input:hover {
    filter: brightness(1.3);
}



#area {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    font: normal 20pt Arial;
    color: green;
}


.caixote{
    justify-content: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;

}



.btn{
    display: flex;
    justify-content: center;
    margin-top:10px;
    text-align: center;
    align-items: center;
    justify-items: center;
    


}

.som{
    height: 40px;
    width: 40px;
    background-color: rgb(49, 48, 136);
    border-radius: 5px;
    border:none;
    font-size: 30px;
    text-align: center;
    align-items: center;
    justify-items: center;
    border: 1px solid rgb(27, 15, 80);
}

.som:hover{
    cursor: pointer;
    filter: brightness(1.3);
}

#reset{
    height: 40px;
    width: 270px;
    background-color: rgb(49, 48, 136);
    border-radius: 5px;
    border:none;
    font-size: 20px;
    border: 1px solid rgb(27, 15, 80);
}

button:hover{
    cursor: pointer;
    filter: brightness(1.3);
}

#jogador{
    text-align: center;
    color:white;
    font: normal 15pt Arial;
    margin-top:10px;
    display: flex;
    justify-content: center;
}


.som.clicado{
    justify-content: center;
    text-align: center;
    justify-items: center;
    display: inline-flex;
    align-items: center;
}

.mdi mdi-volume-off{
    justify-content: center;
    text-align: center;
    justify-items: center;
    display: flex;
}