@keyframes tracoHoriz {
    0% {width: 0px;}

    40%  {width: 210px;
          opacity: 100%;}
    
    99% {opacity: 25%;}

    100% {opacity: 0%;}
}

@keyframes tracoVert {
    0% {height: 0px;}

    40%  {height: 210px;
          opacity: 100%;}

    99% {opacity: 25%;}
    
    100% {opacity: 0%;}
}

@keyframes tracoDiagonal {
    0% {width: 0px;}
    
    40%  {width: 230px;
          opacity: 100%;}
    
    99% {opacity: 25%;}
    
    100% {overflow: 0%;}
}

@keyframes someTab {
    from {opacity: 100%;}
    
    to  {opacity: 0%;
        }
}

@keyframes velha {
    from {opacity: 100%;}
    
    to  {opacity: 20%;}
}

@keyframes addBloq {
    from {opacity: 100%;}
    
    to  {opacity: 20%;}
}

@keyframes tiraBloq {
    from {opacity: 100%;}
    
    to  {opacity: 100%;}
}

@keyframes liberaTodos {
    from {opacity: 20%;}
    
    to  {opacity: 100%;}
}

@keyframes x {
    from { 
           background-color: #fd7c25;
           filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
           width: 0px;
    }
    to  {  
           background-color: #fd7c25;
           filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
           width: 230px;
    }
}

@keyframes o {
    0% {
      stroke-dasharray: 0 722;
    }
    100% {
      stroke-dasharray: 722 722;
    }
}

@keyframes tracoHorizFinal { 
    0% {width: 0px;}
    
    40%  {width: 740px;
          opacity: 100%;}
    
    99% {opacity: 25%;}
    
    100% {opacity: 0%;}
}

@keyframes tracoVertFinal { 
    0% {width: 0px;}
    
    40%  {width: 720px;
          opacity: 100%;}
    
    99% {opacity: 25%;}
    
    100% {opacity: 0%;}
}
  
@keyframes tracoDiagFinal {
    0% {width: 0px;}
    
    40%  {width: 1000px;
         opacity: 100%;}
    
    99% {opacity: 25%;}
    
    100% {opacity: 0%;}
}
  
  
@keyframes xFinal {
    from { 
        background-color: #fd7c25;
        filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
        width: 0px;
        height: 140px;
    }
    to  {  
        background-color: #fd7c25;
        filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
        width: 800px;
        height: 140px;
    }
}
  
@keyframes oFinal {
    0% {
      stroke-dasharray: 0 1700;
    }
    100% {
      stroke-dasharray: 1700 1700;
    }
}  
  
.circle-container {
    width: 230px;
    position: absolute;
    height: 230px;
    opacity: 100%;
}

.circle-container2 {
    width: 700px;
    position: absolute;
    height: 700px;
    opacity: 100%;
}

.circulo {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #0099ff;
    stroke-width: 45px;
    stroke-dasharray: 0 722;
    animation: o 2s ease-out forwards;
    filter: brightness(1.5) drop-shadow(0 0 5px #0099ff);
}

.circulao {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #0099ff;
    stroke-width: 150px;
    animation: oFinal 2s ease-out forwards;
    filter: brightness(1.5) drop-shadow(0 0 5px #0099ff);
}

@keyframes animaRegras {   
    from {opacity: 0%;}
    to {opacity: 100%;}
}

@font-face {
    font-family: 'Kalil';
    src: url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
}

.corte-vitoria{
    opacity: 0%;
    background-color: #11d368;
    height: 10px;
    width: 10px;
    position: absolute;
    z-index: 1;
    border-radius: 20px;
    filter: brightness(1.5) drop-shadow(0 0 5px #11d368);
}



*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}

body{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #0b0033 0%, #450045 100%);
}

a{
    color: #fff;
}

#tabuleiro-principal{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.caixa-grande {
    height: 240px;
    width: 240px;
    border: 5px solid #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bloqueada{
    height: 235px;
    width: 235px;
    display: none;
    position: absolute;
    z-index: 6;
    cursor: not-allowed;
}

.sub-tabuleiro{
    height: fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.caixa-pequena{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 57px;
    width: 57px;
    border: 3px solid #ffffff;
}

.X:hover::before{
    position: absolute;
    z-index: -2;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #fd7c25;
    opacity: 40%;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

.O:hover::before{
    position: absolute;
    z-index: -2;
    content: "";
    width: 25px;
    height: 25px;
    opacity: 40%;
    border: 10px #25a8fd solid;
    border-radius: 50%;
}

:nth-child(1) ,:nth-child(2) ,:nth-child(3){
    border-top: 0px;
}

:nth-child(1) ,:nth-child(4) ,:nth-child(7){
    border-left: 0px;
}

:nth-child(3) ,:nth-child(6) ,:nth-child(9){
    border-right: 0px;
}

:nth-child(7) ,:nth-child(8) ,:nth-child(9){
    border-bottom: 0px;
}

#principal {
    display: flex;
    justify-content: space-around;
}

#info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: none;
    position: absolute;
    overflow-y: scroll;
    padding-bottom: 100px;
    z-index: 5;
}

h2 {
    opacity: 100%;
    font-size: 50px;
    color: #ccc;
    margin-top: 50px;
}

p {
    opacity: 0%;
    font-size: 30px;
    color: #ccc;
    padding: 15px 0;
    margin: 10px 250px 0 250px;
}

p:nth-child(2) {animation: animaRegras 3s ease-out forwards;}
p:nth-child(3) {animation: animaRegras 3s ease-out 0.7s forwards;}
p:nth-child(4) {animation: animaRegras 3s ease-out 1.4s forwards;}
p:nth-child(5) {animation: animaRegras 3s ease-out 2.1s forwards;}
p:nth-child(6) {animation: animaRegras 3s ease-out 2.8s forwards;}

#info.ativo{
    display: inline;
}

.botao{
    width: 200px;
    font-size: 25px;
    padding: 10px;
    color: #fff;
    background-color: #124f77;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    transition: 0.3s ease-out;
    cursor: pointer;
}

.botao:hover{
    background-color: #266c9b; 
}

#botoes {
    position: absolute;
    display: grid;
    top: 39%;
    right: 100px;
}

#botao-instrucao {
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 60px;
}

#botao-fechar {
    margin-top: 20px;
    cursor: pointer;
}

#logo{
    height: 180px;
    width: 225.51px;
    position: absolute;
    display: grid;
    top: 20px;
    left: 20px; 
}

.x-simbolo {
    width: 45px;
    height: 45px;
    position: relative;
}

.x-simbolo::before,
.x-simbolo::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 45px;
    background-color: #fd7c25;
    top: 50%;
    filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
}

.x-simbolo::before {
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.x-simbolo::after {
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.o-simbolo{
    width: 45px;
    height: 45px;
    border: 10px #25a8fd solid;
    border-radius: 50%;
    filter: brightness(1.5) drop-shadow(0 0 5px #25a8fd);
}

.X-info{
    color: #fd7c25;
    font-weight: 900;
}
.O-info{
    color: #25a8fd;
    font-weight: 900;
}

.caixa-pequena.X-add, .caixa-pequena.O-add {
    cursor: not-allowed;
}

.caixa-pequena{
    cursor: pointer;
}

.x-anima{
    width: 0px;
    height: 40px;
    background-color: #fd7c25;
    filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
}


@keyframes animaVelha {
    0% {font-size: 0px;}
    
    100%  {font-size: 640px;}
}


#anima-velha {
    position: absolute;
    font-size: xx-large;
    font-weight: bolder;
    color: #888888;
    filter: brightness(1.5) drop-shadow(0 0 5px #888888);
    animation: 'animaVelha 4s ease-out forwards';
}

@media screen and (max-width: 768px) { /*768 */
    
    * {
        overflow: hidden;
    }

    #principal{
        height: 375px;
        width: 375px;
    }

    #tabuleiro-principal{
        height: 375px;
        width: 375px;
    }

    .caixa-grande {
        height: 125px;
        width: 125px;
        border: 2px solid #ffffff;
    }

    .bloqueada{
        height: 95px;
        width: 95px;
    }

    .caixa-pequena{
        height: 35px;
        width: 35px;
        border: 1px solid #ffffff;
    }

    #botoes {
        width: 150px;
        position: absolute;
        display: grid;
        top: 82%;
        left: 50%;
        transform: translateX(-50%);
    }

    #botao-instrucao {
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-bottom: 20px;
        margin-right: 40px;
    }

    #logo{
        height: 200px;
        width: 250.55px;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: -2;
    }

    :nth-child(1) ,:nth-child(2) ,:nth-child(3){
        border-top: 0px;
    }
    
    :nth-child(1) ,:nth-child(4) ,:nth-child(7){
        border-left: 0px;
    }
    
    :nth-child(3) ,:nth-child(6) ,:nth-child(9){
        border-right: 0px;
    }
    
    :nth-child(7) ,:nth-child(8) ,:nth-child(9){
        border-bottom: 0px;
    }

    .X:hover::before{
        width: 25px;
        height: 25px;
    }

    .x-simbolo {
        width: 25px;
        height: 25px;
    }
    
    .x-simbolo::before,
    .x-simbolo::after {
        width: 7px;
        height: 29px;
    }
    
    .O:hover::before{
        width: 15px;
        height: 15px;
        border: 7px #25a8fd solid;
    }

    .o-simbolo{
        width: 28px;
        height: 28px;
        border: 7px #25a8fd solid;
    }

    .botao{
        width: 150px;
        font-size: 20px;
    }

    .corte-vitoria{
        height: 6px;
    }

    @keyframes x {
        from {
            background-color: #fd7c25;
            filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
            width: 0px;
            height: 20px;
        }
        to  {
            background-color: #fd7c25;
            filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
            width: 120px;
            height: 30px;
        }
    }

    @keyframes o {
        0% {
          stroke-dasharray: 0 250;
        }
        100% {
          stroke-dasharray: 250 250;
        }
    }

    @keyframes xFinal {
        from { 
            background-color: #fd7c25;
            filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
            width: 0px;
            height: 85px;
        }
        to  {  
            background-color: #fd7c25;
            filter: brightness(1.5) drop-shadow(0 0 5px #fd7c25);
            width: 370px;
            height: 85px;
        }
    }

    @keyframes oFinal {
        0% {
          stroke-dasharray: 0 1200;
        }
        100% {
          stroke-dasharray: 1200 1200;
        }
    }

    @keyframes tracoHoriz {
        0% {width: 0px;}
    
        40%  {width: 110px;}
        
        60%  {opacity: 100%;}
        
        99% {opacity: 25%;}
    
        100% {opacity: 0%;}
    }

    @keyframes tracoVert {
        0% {height: 0px;}
    
        40%  {height: 110px;}
        
        60%  {opacity: 100%;}
    
        99% {opacity: 25%;}
        
        100% {opacity: 0%;}
    }

    @keyframes tracoDiagonal {
        0% {width: 0px;}
        
        40%  {width: 140px;}
        
        60%  {opacity: 100%;}
        
        100% {opacity: 25%;}
    }

    @keyframes tracoHorizFinal { 
        0% {width: 0px;}
        
        40%  {width: 375px;}
        
        60%  {opacity: 100%;}
        
        99% {opacity: 25%;}
        
        100% {opacity: 0%;}
    }
    
    @keyframes tracoVertFinal { 
        0% {width: 0px;}
        
        40%  {width: 375px;}
        
        60%  {opacity: 100%;}
        
        99% {opacity: 25%;}
        
        100% {opacity: 0%;}
    }
      
    @keyframes tracoDiagFinal {
        0% {width: 0px;}
        
        40%  {width: 530px;}
        
        60%  {opacity: 100%;}
        
        99% {opacity: 25%;}
        
        100% {opacity: 0%;}
    }

    .circle-container {
        width: 115px;
        height: 115px;
    }
    
    .circle-container2 {
        width: 375px;
        height: 375px;
    }
    
    .circulo {
        stroke-width: 23px;
    }

    .circulao {
        stroke-width: 62px;
    }

    p {
        font-size: 17px;
        padding: 5px 0;
        margin: 7% 10% 0 10%;
    }

    #info {
        width: 100vw;
        height: 100%;
    }  
}