body{
     background-color: #222;
     font-family: monospace;
     color: cornsilk;
     font-size: 1.05em;
     letter-spacing: 0.1em;
}

img{
     height:30px
}

/* Site logo */
.logo{
     text-align: center;
     margin: 20px auto 40px ;
}
.logo img{
     height: 100px;
     margin: auto;
}

/* Cards */
.display{
     text-align: center;
}
.hide{
     display: none;
}
.show{
     display: block;
}
.display .label{
     font-size: 1.1em;
     color: rgb(105, 197, 117);
}

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

.card{
     display: flex;
     flex-direction: column;
     background: #202020;
     border: 1px solid #252525;
     border-radius: 20px;
     height: 275px;
     width: 215px;
     justify-content: center;
     align-items: center;
     margin: auto 20px;
     box-shadow: 0 0 20px#151515;
     animation-name: animateCard;
     animation-duration: 0.3s;
     animation-fill-mode: forwards;
     overflow: hidden;
}
.card:hover{
     color: rgb(105, 197, 117);
     cursor: pointer;
     transform: scale(1.08);
     transition: transform 0.3s;
     box-shadow: 0 0 20px#050505;
}

@keyframes animateCard{
     from {transform: scale(0);}
     to {transform: scale(1);}
}
.card .card-label{
     margin-top: 16px;
}

.display .label{
     margin-top: 20px;
}

.screen{
     display: flex;
     flex-direction: column;
     background: #202020;
     border: 1px solid #252525;
     border-radius: 20px;
     height: 275px;
     width: 450px;
     justify-content: center;
     align-items: center;
     margin: auto;
     box-shadow: 0 0 20px#151515;
     animation-name: animateCard;
     animation-duration: 0.3s;
     animation-fill-mode: forwards;
     overflow: hidden;
}

.screen .signs{
     font-size: 3.5em;
     display: flex;
}
.signs div{
     border: 2px solid #252525;
     height: 60px;
     width: 60px;
     margin: 20px 12px;
     border-radius: 12px;
}

.signs div:hover{
     color: rgb(105, 197, 117);
     cursor: pointer;
     transform: scale(1.08);
     transition: transform 0.3s;
     box-shadow: 0 0 20px#050505;
}

.signs div.active{
     color: rgb(105, 197, 117);
     cursor: pointer;
     transform: scale(1.08);
     transition: transform 0.3s;
     box-shadow: 0 0 20px#050505;
}

input[type='text']{
     border: none;
     border-bottom: 1px solid #252525;
     background: none;
     margin-top: 16px;
     text-align: center;
     padding: 5px;
     outline: none;
     color: #fff;
     font-size: 14px;
     letter-spacing: 3px;
}
input:focus{
     border-color: rgb(105, 197, 117);
}
button{
     width: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #181818;
     border: 1px solid #191919;
     color: #fff;
     padding: 12px;
     margin-top: 10px;
     border-radius: 12px;
     cursor: pointer;
     outline: none;
}
button:hover{
     color: rgb(105, 197, 117);
     transform: scale(1.04);
     transition: transform 0.3s ease-in-out;
     box-shadow: 0 0 20px#050505;
}

.screen img{
     margin-left: 12px;
     height: 20px;
}

.error{
     display: none;
     font-size: 0.8em;
     color: rgb(170, 80, 80);
     margin-top: 10px;
}

.sign{
     font-size: 3.0em;
     color: rgb(105, 197, 117);
     border: 2px solid #252525;
     height: 50px;
     width: 50px;
     border-radius: 12px;
}
.sign div{
     line-height: 43px;
}

.screen-C .card input[type='text']{
     font-size: 10px;
}
.go{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
}
.go:hover{
     color: #69c575;
     cursor: pointer;
}

/* Controller */
.controller{
     display: flex;
     justify-content: center;
}
.controller .body{
     height: 280px;
     background-color: #202020;
     /* border: 1px dashed #333; */
     border-top: 1px solid #333;
     z-index: 3;
     border-radius: 60px;
}

.controller .left, .controller .right{
     height: 310px;
     min-width: 88px;
     background-color: #1c1c1c;
     border: 1px solid #333;
     position: relative;
     border-radius: 25px;
     opacity: 0;
     top: 0px
}

.controller .left{
     position: relative;
     left: 70px;
     animation: controllerLeft 0.5s 0.5s forwards;
     border-top-left-radius: 60px;
}
.controller .right{
     position: relative;
     left: -70px;
     animation: controllerRight 0.5s 0.5s forwards;
     border-top-right-radius: 60px;
}

.body{
     display: flex;
     justify-content: center;
}
.board{
     width: 300px;
     display: flex;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
     animation: controllerBoard 0.5s forwards;
}

@keyframes controllerRight{
     0% {transform: rotate(0deg)}
     100% {transform: rotate(-8deg);opacity: 1;}
}

@keyframes controllerLeft{
     0% {transform: rotate(0deg)}
     100% {transform: rotate(8deg);opacity:1}
}

@keyframes controllerBoard{
     0% {width: 0; opacity: 0;}
     99%{opacity: 0;}
     100% {width: 300px; opacity: 1;}
}
.grids{
     display: flex;
     width: 190px;
     flex-wrap: wrap;
     box-sizing: border-box;
     justify-content: center;
     margin-top: 12px;
}
.cell{
     width: 55px;
     height: 55px;
     margin: 2px;
     font-size: 3em;
     text-align: center;
     background: #1c1c1c;
     border: 1px solid #252525;
}
.player-left{
     background-color: #252525;
     width: 85px;
     height: 100%;
     border-bottom-left-radius: 60px;
     border-top-left-radius: 60px;
}
.player-right{
     background-color: #252525;
     width: 85px;
     height: 100%;
     border-bottom-right-radius: 60px;
     border-top-right-radius: 60px;
}

.cell:hover{
     box-shadow: 0 0 10px #303030;
     cursor: pointer;
     transform: scale(1.05);
     transition: transform 0.2s;
}
.player-left,.player-right{
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
}
.body .player-name{
     text-orientation: upright;
     writing-mode: vertical-rl;
     position: absolute;
     text-transform: capitalize;
}
.body .player-score{
     background-color: #202020;
     padding: 20px 10px;
     font-size: 1.5em;
     position: absolute;
     box-shadow: inset 0 0 10px #1a1a1a;
}
.body .player-left .player-name{
     left: 10px;
}

.body .player-right .player-name{
     right: 10px;
}

.body .player-left .player-score{
     right: 0;
     border-bottom-left-radius: 25px;
     border-top-left-radius: 25px;
}
.body .player-right .player-score{
     left: 0;
     border-bottom-right-radius: 25px;
     border-top-right-radius: 25px;
}
.board .info{
     margin-top: 5px;
     display: none;
     justify-content: center;
     align-items: center;
}
.info.tie{
     color: rgb(105, 197, 117);
     font-size: 1..5em;
     margin-top: 12px;
}
.board .info div{
     font-size: 2em;
     width: 37px;
     height: 37px;
     text-align: center;
     border-radius: 12px;
     margin-left: 8px;
     border: 2px solid #252525;
}
.info.winner{
     color:rgb(105, 197, 117)
}
.links{
     margin-top: 15px;
     margin-bottom: 5px;
}
.links span:hover{
     color: rgb(105, 197, 117);
     cursor: pointer;
}