style.css

header{
    color:rgb(255, 255, 255);
    text-align: center;
}

body {
    background-color: rgb(59, 59, 59);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    padding: 0em;
    margin: 0em;
    display: grid;
    place-items: center;
    -webkit-user-select:none;  
    -moz-user-select:none;     
    -ms-user-select:none;      
    user-select:none;    
}

.box {
    position: relative;
    width: 20.3125rem;
    height: 25rem;
    border-radius: 1.25rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.582);
}

.box::before {
    content: '';
    position: absolute;
    width: 31.25rem;
    height: 31.25rem;
    background-image: conic-gradient(transparent, transparent, transparent, rgb(0, 0, 255));
    animation: rotate 4s linear infinite;
}

.box::after {
    content: '';
    position: absolute;
    width: 31.25rem;
    height: 31.25rem;
    background-image: conic-gradient(transparent, transparent, transparent, rgb(255, 0, 0));
    animation: rotate 4s linear infinite;
    animation-delay: 2s;
}

.span{
    position: absolute;
    inset: 0.3125rem;
    border-radius: 1rem;
    z-index: 2;
}

.conteiner {
    position: absolute;
    background-color: rgb(0, 0, 0);
    inset: 0rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.placar {
    position: relative;
    width: 260px;
    height: 5.625rem;
    bottom: 7.8125rem;
    border-radius: 0.8125rem;
    border: 0.3125rem inset rgb(78, 127, 172);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background-color: rgb(185, 186, 209);
    font-size: 0.9375rem;
}

.top {
    position: absolute;
    text-align: center;
    padding-bottom: 3.125rem;
    font-size: 1.0625rem;
}

.playerx {
    position: relative;
    right: -1.1875rem;
}

#x {
    position: relative;
    left: 0.3125rem;
    color: blue;
}

#o {
    position: relative;
    color: red;
    left: 0.3125rem;
}

.playero {
    position: relative;
    top: 1.25rem;
    right: 3.125rem;
}

.vezdo {
    position: relative;
    left: 1.625rem;
}

#vezres {
    position: relative;
    top: 1.25rem;
    right: 3.125rem;
    color: rgb(0, 0, 255);
}

.boxgame {
    position: absolute;
    width: 16.25rem;
    height: 14.0625rem;
    background-color: rgb(185, 186, 209);
    top: 8.75rem;
    border: 0.3125rem inset rgb(78, 127, 172);
    border-radius: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.linhas {
    position: absolute;
    background-color: rgb(0, 0, 0);
    width: 14.0625rem;
    height: 0.4375rem;
    border-radius: 0.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#linha1 {
    position: absolute;
    transform: rotate(90deg);
    width: 11.875rem;
    right: -0.3125rem;
}

#linha2 {
    position: absolute;
    transform: rotate(90deg);
    width: 11.875rem;
    left: -0.3125rem;
}

#linha3 {
    position: absolute;
    top: 4.6875rem;
}

#linha4 {
    position: absolute;
    bottom: 4.6875rem;
}

.xo {
    position: relative;
    font-size: 2.1875rem;
    width: 4.5rem;
    height: 4.0625rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.xol {
    position: absolute;
    padding-right: 0rem;
    padding-bottom: 0.1875rem;
    text-align: center;
}

#xo1 {
    position: absolute;
    top: 0.75rem;
    right: 10.8125rem;
}

#xo2 {
    position: absolute;
    top: 0.75rem;
}

#xo3 {
    position: absolute;
    top: 0.75rem;
    right: 1.0625rem;
}

#xo4 {
    position: absolute;
    right: 10.8125rem;
}

#xo5 {
    position: absolute;
}

#xo6 {
    position: absolute;
    right: 1.0625rem;
}

#xo7 {
    position: absolute;
    bottom: 0.75rem;
    right: 10.8125rem;
}

#xo8 {
    position: absolute;
    bottom: 0.75rem;
}

#xo9 {
    position: absolute;
    bottom: 0.75rem;
    right: 1.0625rem;
}


footer{
    color: rgb(255, 255, 255);
    font-style: italic;
    text-align: center;
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}