*{box-sizing: border-box;margin: 0;padding: 0;}
body{font-family: Arial, Helvetica, sans-serif;}

.start-screen{
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba(17, 17, 17, .8);
   width: 100%;
   height: 100%;
   z-index: 2;
}
.start-screen button, input{
   position: absolute;
   top: 54%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 25px;
   font-weight: bold;
   text-transform: capitalize;
   padding: 10px 15px;
   background-color: #2196f3;
   color: #DDD;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}
.start-screen input{
   background-color: #FFF;
   color: #333;
   top: 42%;
   font-size: 20px;
   padding: 15px;
   cursor: auto;
}

main{
   margin: 5px auto;
   padding: 2px;
   width: 50%;
   border: 3px solid #CCC;
}

.info-header{
   padding: 5px;
   margin-bottom: 3px;
   border: 2px solid #2196f3;
   background-color: #333;
   overflow: hidden;
}
.info-header .name, .tries{
   display: inline-block;
   width: 49.5%;
   font-size: 20px;
   font-weight: bold;
   text-transform: capitalize;
   color: #CCC;
}
.info-header .tries{
   text-align: right;
}

.game-block{
   border: 2px solid #2196f3;
   background-color: #333;
   padding: .25%;
   overflow: hidden;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}
.no-click, .flipped, .matched{
   pointer-events: none;
}
.game-block .img-block{
   border: 2px solid #2196f3;
   margin: .25%;
   width: 19.5%;
   height: 125px;
   overflow: hidden;
   position: relative;
   transition: transform 1s;
   transform-style: preserve-3d;
}
.game-block .flipped, .matched{
   transform: rotateY(180deg);
}
.game-block .img-block .face{
   width: 100%;
   height: 100%;
   padding: 5px;
   text-align: center;
   position: absolute;
}
.game-block .img-block .front{
   background-color: #333;
   z-index: 2;
}
.game-block .img-block .back{
   background-color: #CCC;
   transform: rotateY(180deg);
   z-index: 1;
}
.game-block .img-block .face img{
   width: 100%;
   height: 100%;
}

.info-footer{
   padding: 5px;
   margin-top: 3px;
   border: 2px solid #2196f3;
   background-color: #333;
   overflow: hidden;
}
.info-footer .name, .tries{
   display: inline-block;
   width: 49.5%;
   font-size: 20px;
   font-weight: bold;
   text-transform: capitalize;
   color: #CCC;
}
.info-footer .tries{
   text-align: right;
}