/* Contexto de texto */
.content-text {
    width: 100%;
    height: auto;

    margin: 20px;
    padding: 10px;

    display: flex;
    justify-content: center;
}
.content-text p {
    
    font-size: 1.5rem;
    font-weight: bold;

    padding-top: 5px;
}

.image {
    width: 3rem;
    height: 3rem;
    
    background-size: 1.875rem;
    background-repeat: no-repeat;
    background-position: center; 
    
}

/* conteiner Game */
.spacing-game {
    width: auto;
    height: auto;

    padding: 10px;
    z-index: 5;

    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgb(0 0 0 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(25px);
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
  
}

/* blocos do tabuleiro */
.block{
    width: 9.4rem;
    height: 9.4rem;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff ;

    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.block:nth-child(3){
    border-right: 0;
}

.block:nth-child(6){
    border-right: 0;
}

.block:nth-child(9){
    border-right: 0;
}

.block:nth-child(7){
    border-bottom: 0;
}

.block:nth-child(8){
    border-bottom: 0;
}

.block:nth-child(9){
    border-bottom: 0;
}

/* container de vitoria */
#winnerText {
    
    text-align: left;
    
    font-weight: bold;

    padding-top: 5px;

    visibility: hidden;
}

/* container Reset */
.footer{
    width: 100%;
    height: auto;
     display: flex;
     justify-content: center;
}

.image-reset{
     width: 3rem;
     height: 3rem;
     background-image: url(../assets/reset.svg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 3rem;

     visibility: hidden;
}
/* Container Score Player*/
.container-score{
    width: 100%;
    height: auto;

    padding: 2rem 1rem;

    
    z-index: 0;

    position: absolute;
    top: 18.6rem;
    
    display: flex;
    justify-content: center;
    
    gap: 35rem;
    
}

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

    flex-direction: column;
}

#PlayerX {
    transform: translatex(20px);
    transition: transform 1s;
}

#PlayerO {
    transform: translatex(8px);
    transition: transform 1s;
}

#PlayerX::after {
    content: '';
    position: absolute;
    width: 20rem;
    height: 6.3rem;
    background: linear-gradient(#ffc107, #e91e63);
    border-radius: 10px;
    
    z-index: -1;
}


#PlayerO::after {
    content: '';
    position: absolute;
    width: 20rem;
    height: 6.3rem;
    background: linear-gradient(#078fff, #e91ed8);
    border-radius: 10px;
    
    z-index: -1;
}



.player h1{
    text-align: center;

    font-size: 1.5rem;
    font-weight: 300;

    margin: 10px;
}

.player h3 {
    text-align: center;

    font-size: 1.8rem;
    font-weight: bold;
}

/* Animate */
.container-animate{
    
    width: 100%;
    height: 20rem;
    bottom: 0;
    
}

.container-animate span {
    position: absolute;
    pointer-events: none;
    
    
    background-repeat: no-repeat;
    background-position: center; 

    animation: animate 5s linear infinite;
}

@keyframes animate 
{
    0%{
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 0;
    }

    10%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(-500%) rotate(360deg);
        opacity: 0;
    }
}