@font-face{
 font-family: Poppins;
 src: url("Fontes/Poppins-Regular.ttf")
}

body{
 margin: 0;
 padding: 0;
 background: #000000;
}

*{
 font-family: Poppins;
}

.game{
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.game .pontos{
 margin-top: 20px;
 margin-bottom: 5vw;
}

.game .pontos span{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: #aaa;
 background: #eee;
 width: 100px;
 height: 40px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-size: 18px;
 box-shadow: 0 0 20px #aaa;
 -webkit-transition: 200ms linear;
 -moz-transition: 200ms linear;
 -ms-transition: 200ms linear;
 -o-transition: 200ms linear;
 transition: 200ms linear;
}

.game .pontos .vc.atual{
 background-color: #7D00D4;
 color: #fff;
}

.game .pontos .bt.atual{
 background-color: #00ACD4;
 color: #fff;
}

.flexbox{
 height: 70vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.grid{
 margin-top: 30px;
 display: grid;
 place-items: center;
 grid-template-columns: repeat(3,1fr);
 width: 70vw;
 grid-gap: 3vw;
}

.grid input[type=button]{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 22vw;
 height: 22vw;
 background: #42445A;
 border: none;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 font-size: 13vw;
 color: #aaa;
 -webkit-transition: 300ms ;
 -moz-transition: 300ms ;
 -ms-transition: 300ms ;
 -o-transition: 300ms ;
 transition: 300ms ;
}

.grid .x[type=button]{
 color: #7D00D4;
 background-color: #E1C4FF;
}

.grid .x[type=button].ok{
 color: #fff;
 background-color: #7D00D4;
}

.grid .o[type=button]{
 color: #00ACD4;
 background-color: #C4E9FF;
}

.grid .o[type=button].ok{
 color: #fff;
 background-color: #00ACD4;
}

.pop-up{
 position: fixed;
 width: 100%;
 left: 0;
 bottom: 0;
 background: #6900BC;
 color: #fff;
 height: 50px;
 padding-bottom: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 -webkit-animation: pop 500ms ;
 -o-animation: pop 500ms ;
 animation: pop 500ms ;
}

.app-logo{
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 flex-direction: column;
}

.app-logo img{
 height: 80px;
 width: 80px;
}

.app-logo .load span{
 display: inline-block;
 height: 20px;
 width: 20px;
 margin-right: 5px;
 -webkit-border-radius: 60%;
 -moz-border-radius: 60%;
 border-radius: 60%;
 background: #6900BC;
 -webkit-animation: load 500ms linear infinite;
 -o-animation: load 500ms linear infinite;
 animation: load 500ms linear infinite alternate;
}

.app-logo span:nth-child(2){
 animation-direction: alternate-reverse
}

.app-logo p{
  font-weight: bold;
  font-family: Poppins,sans-serif;
  font-size: 20px;
  color: #42445A;
  color: #6900BC;
}


@keyframes pop{
  0%{
   opacity: 0;
   bottom: -50px;
  }
}

@keyframes load{
 0%{
  opacity: 0;
  -webkit-transform: translateY(15px);
  -moz-transform: translateY(15px);
  -ms-transform: translateY(15px);
  -o-transform: translateY(15px);
  transform: translateY(15px);
 }100%{
  opacity: 1;
 }
}