body{
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(112, 205, 236));

}
h1{
text-align: center;
}

#titulo{
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-shadow: -4px -2px 3px  gray;
    
}
span{
    color: black;
    font-size: 1.2em;
}
#container{
    display: grid;
    grid-template-areas: "a1 a2 a3"
                         "a4 a5 a6"
                         "a7 a8 a9";
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
   
    border-radius: 10px;
    
}

.quadrado{
    display: flex;
    border-radius: 10px;
    width: 100px;
    height:100px;
    border:2px solid black;
    place-items: center;
    justify-content: center;
    background:linear-gradient(white, lightblue);
   

   
}
.quadrado:hover{
    background:white;
    transition-duration: 200ms;
}
.l1{
    grid-area: a1;
    box-shadow: -5px -5px 5px 3px gray;   
}
.l2{
    grid-area: a2;
    box-shadow: 0px -5px 5px 3px gray;
}
.l3{
    grid-area: a3;
    box-shadow: 5px -5px 5px 3px gray;
}
.l4{
    grid-area: a4;
    box-shadow: -5px 0px 5px 3px gray;
   
}
.l5{
    grid-area: a5;
    box-shadow: 0px 0px 3px 3px gray;
}
.l6{
    grid-area: a6;
    box-shadow: 5px 0px 5px 3px gray;
}
.l7{
    grid-area: a7;
    box-shadow: -5px 5px 5px 3px gray;
}
.l8{
    grid-area: a8;
    box-shadow: 0px 5px 5px 3px gray;
}
.l9{
    grid-area: a9;
    box-shadow: 5px 5px 5px 3px gray;
}

#players{
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-areas: "vd1 vd1"
                         "p1 p1"
                         "p2 p2"
                         "p3 p3";
    place-items: center;
    border: 1px solid black;
    padding: 5px;
    border-radius: 10px;
    background:linear-gradient( rgb(112, 205, 236),white,white, rgb(112, 205, 236));
    color:black;
    box-shadow: 0px 0px 5px 5px gray;
    
}
#p1{
    display: flex;
      grid-area: p1;
      align-items: center;
}
#p2{
    display: flex;
    grid-area: p2;
    align-items: center;
}
.botaoReset{
    display: flex;
    align-items: center;
    background-color: rgb(90, 163, 187);
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
#botaoReset{
    grid-area: p3;
}
#botaoResetNome{
    grid-area: p4;
}
#botaoReset:hover{
    background-color: rgb(119, 117, 117);
    transition-duration: 200ms;
}
#botaoReset:active{
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    transition-duration: 200ms;
}
input{
    text-align: center;

}

.o{

}

.o::after{


    content: url("https://img.icons8.com/officel/80/000000/linux-client.png");
}

.x{

}

.x::after{

    content: url("https://img.icons8.com/officel/80/000000/windows-client.png");
}

#vezDe{
    padding: 2px;
    border: 1px solid black;
    display: flex;
    grid-area: vd1;
    align-items: center;
    border-radius: 5px;
    background-color: white;
}

#jogadorVez{
    border-radius: 5px;
    background-color: lime;
}