*{
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}
#currentPlayer{
    display:flex;
    margin: auto;
    font-weight: bold;
    justify-content: center;
}
.mybtn{
    display: flex;
    margin: .5rem auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 7.5rem;
    height: 3.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    font-size: 2rem;
    border:none; 
    color:#05036e;
    border-radius: 10px;
    background-color: rgba(255, 254, 254, 0.4);
    transition: 300ms ease-in-out;
}
.mybtn:hover{
    background-color: rgb(255, 45, 136);
    color:#000000;
    box-shadow: 0px 3px 20px rgb(116, 32, 175);
    background: linear-gradient(
    180deg, 
    rgb(255, 255, 255) 0%,
    rgb(137, 183, 240) 50%, 
    rgb(255, 255, 255) 100%
    ); 
}
/* ------------------------------- */
body{
    width:100%;
    height: 100vh;
    background: rgb(253, 253, 253);
    background: linear-gradient(
        135deg, 
        rgb(245, 171, 203) 0%, 
        rgb(209, 171, 245) 50%, 
        rgb(150, 197, 252) 100%
    );
    background-size: 300%;
    animation: bg-animation 12s infinite alternate;
}

@keyframes bg-animation {
    0%{
        background-position: left;
    }
    100%{
        background-position: right;
    }
}
h1.title{
    display:flex;
    margin: 1rem auto;
    justify-content: center;
    font-size: 3rem;
    font-weight: bolder;
}
@media only screen and (max-width: 400px){
    h1{    
    font-size: 1.5rem;
    }
}
/* ---------------------------------------- */
section{
    margin: 2rem 2rem;
  }
.box{
  font-family: 'Century Gothic', 'Questrial', 'Lucida Sans', sans-serif;
  text-align: center;
  height: 9rem;
  width: 9rem;
  margin:0;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgb(36, 36, 36)); 
  display:flex;
  justify-content: center;
  align-content: center;
  align-items: flex-end;
}
#box0, #box1, #box2, #box3, 
#box4, #box5 {
    border-bottom: .25rem solid black;
    z-index:10;
}

#box1, #box4,
#box7 {
    border-left: .25rem solid black;
    border-right: .25rem solid black;
    z-index:10;
}    

.game-grid{
    display:grid;
    grid-template: 9rem 9rem 9rem/ 9rem 9rem 9rem;
    margin: 2rem auto;
    padding:2rem;
    width:28rem;
    height: 28rem;
    align-self: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    font-size: 7rem;
    color: rgb(10, 10, 255); 
}

@media only screen and (max-width: 600px){
    section{
        margin: 1rem;
    }
    .box{
        height: 6.5rem;
        width: 6.5rem;
    }   
    .game-grid{
        grid-template: 6.5rem 6.5rem 6.5rem/ 6.5rem 6.5rem 6.5rem;
        margin: 1rem auto;
        max-width: 20rem;
        max-height: 20rem;
        padding:1rem;
        font-size: 5rem;
    }
    .mybtn{
        width: 5.5rem;
        height: 3rem;   
        font-size: 1.5rem;
    }
    .signature{
        width: 200px;
        height: auto;
    }
    h1.title{
    margin: 1rem auto;
    font-size: 2.25rem;
    }
}
@media only screen and (max-width: 400px){
    section{
        margin: .5rem;
    }
    .box{
    height: 4rem;
    width: 4rem;
   }
    .game-grid{
        grid-template: 4rem 4rem 4rem / 4rem 4rem 4rem;
        margin: .5rem auto;
        max-width: 12rem;
        max-height: 12rem;
        padding:.5rem;
        font-size: 3rem;
    }
    .signature{
    width: 150px;
    height: auto;
    }
    .mybtn{
    width: 4.25rem;
    height: 1.75rem;   
    font-size: 1rem;
    }
    #currentPlayer{
    padding: 5px;
    font-size: 1rem;
    }
    h1.title{
    margin: .5rem auto;
    font-size: 1.75rem;
    }
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.disabledX {
    pointer-events: none;
}
/* -----------FOOTER------------ */
footer{
    margin-top: 3rem;
}
.signature{
    transition: 200ms ease-in-out;
}

.signature:hover{
    filter: drop-shadow(0 0 2px rgb(255, 0, 212));
}

/* -----CONFETTI----- */
html {
  overflow: hidden;  
}

.confetti {
  width: 15px;
  height: 15px;
  background: rgb(38, 0, 255);
  position: absolute;
  top: -20px;
  left: 0;
  opacity: 1;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  z-index: -1;
  animation: confetti 10s ease-in infinite;
}

@keyframes confetti {
  100% { 
    top: 100%; 
    transform: rotate(1100deg);
  }
}

.loserfetti {
  font-size: 30px;
  position: absolute;
  top: -40px;
  left: 0;
  opacity: 1;
  z-index: -1;
  animation: poopfetti 30s ease-in infinite;
}

@keyframes poopfetti {
  100% { 
    top: 100%; 
    translateY:(200px);
  }
}








/* -----------X and O-------------- */
/* .Player-X {
  background: none;
  position: relative;
  color: rgb(66, 5, 68);
  filter: drop-shadow(3px 3px 3px rgb(36, 36, 36));
}
.Player-X:after {
  padding: 10px;
  justify-content: center;
  content: "\2715";
  text-align: center;  
}

.Player-O {
  background: none;
  position: relative;
  color: rgb(201, 42, 3);
  filter: drop-shadow(3px 3px 3px rgb(36, 36, 36));
}
.Player-O:after {
  align-content: center;
  justify-content: center;
  content: "\3007";
  
  text-align: center;
} */