style.css

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}*{margin:0;padding:0}@font-face{font-family:'VT323';src:url("./font/VT323-Regular.ttf")}body{color:#222;font-family:'VT323';font-size:26px;line-height:147%}h1{font-family:'VT323';font-size:120px;color:#222;text-transform:uppercase;line-height:83px}p{margin:0}button{font-family:'VT323';font-size:20px}html,body{height:100%}main{padding:40px;display:flex;justify-content:center}body{background-color:#F1F1E7;display:flex;align-content:center;flex-direction:column;justify-content:center;position:relative}body .touch-area{position:absolute;height:100%;width:100%}body .touch-area .left-screen{height:100%;width:50%;margin:0;float:left}body .touch-area .right-screen{height:100%;width:50%;margin:0;float:right}.container{width:50%;margin:0 auto}canvas{width:100%}.intro{display:flex;justify-content:center;flex-direction:column;height:100%}.intro h1{margin-bottom:40px}.intro .input{margin-bottom:40px}.intro .input input{padding:10px;border:3px solid #E3514C;background:#F1F1E7;font-family:'VT323';font-size:15px}.intro .buttons{display:flex;justify-content:space-around}.intro .buttons div{flex:1;margin-right:5px}.intro .buttons div:last-child{margin-right:0}.intro .buttons .button{width:100%;padding:10px 53px;background-color:#3F5CDC;color:#F1F1E7;border:none}.intro .buttons .high-score-button{width:100%;padding:10px 25px;background-color:#E69B0C;color:#F1F1E7;border:none}.intro .buttons .rules{width:100%;padding:10px 47px;background-color:#299B41;color:#F1F1E7;border:none}@media (max-width: 730px){.intro h1{font-size:70px;line-height:52px}.intro .buttons button{font-size:14px}.intro .buttons .button{padding:10px 20px}.intro .buttons .high-score-button{padding:10px 6px}.intro .buttons .rules{padding:10px 20px}}.high-score-screen{display:flex;justify-content:center;flex-direction:column;height:100%}.high-score-screen h1{text-align:center;margin-bottom:20px}.high-score-screen .button-esc{flex:1;text-align:right}.high-score-screen .button-esc button{font-size:80px;background:none;border:none;color:#E3514C}.high-score-screen .list-high-scores{flex:1;margin-bottom:30px}.high-score-screen h3{text-align:center;text-transform:uppercase;margin-bottom:15px}.high-score-screen .list-scores{margin:0 auto;width:90%}.high-score-screen li{list-style:none;display:flex;justify-content:center;border-bottom:3px solid #E3514C}.high-score-screen li p{flex:1;text-align:right;font-size:32px}.high-score-screen li .name{text-align:left;text-transform:capitalize}@media (max-width: 730px){.high-score-screen h1{font-size:70px;line-height:52px}}.game{text-align:center;flex-direction:column}.game header{height:50px;display:flex;align-items:center}.game .lives{flex:1}.game .score{flex:1}.game .label{font-weight:bold}.game .value{font-style:italic}.game .canvas{border-right:3px solid #299B41;border-left:3px solid #3F5CDC;margin-bottom:10px}.game .buttons-mobile{justify-content:space-between;display:none}.game .buttons-mobile div{flex:1;text-align:left}.game .buttons-mobile div:last-child{text-align:right}.game .buttons-mobile .left{padding:10px 25px;background-color:#3F5CDC;color:#F1F1E7;border:none}.game .buttons-mobile .right{padding:10px 25px;background-color:#299B41;color:#F1F1E7;border:none}@media all and (max-width: 1024px) and (min-width: 769px){.game{height:100%}.game .canvas{margin-bottom:30px;height:100%}.game .buttons-mobile{display:flex}.game .buttons-mobile button{font-size:20px;padding:10px 30px}}@media all and (max-width: 768px) and (min-width: 320px){.game header{font-size:18px}.game .canvas{height:100%;margin-bottom:0}.game .buttons-mobile{display:flex;margin-bottom:20px}.game .buttons-mobile button{font-size:14px;padding:10px 30px}}.game-over{display:flex;justify-content:center;flex-direction:column;height:100%;text-align:center}.game-over h1{flex:1;margin-bottom:40px}.game-over p{flex:1}.game-over p.message{font-size:40px}.game-over p .score{color:#299B41}.game-over .list-high-scores{flex:1;margin-bottom:30px;width:60%;padding:30px 0;margin:0 auto}.game-over h2{text-align:center;text-transform:uppercase;margin-bottom:15px;color:#E69B0C}.game-over .list-scores{width:240px;margin:0 auto}.game-over li{list-style:none;display:flex;justify-content:center}.game-over li p{text-align:center}.game-over li .name{padding-left:35px;text-align:left}.game-over .buttons{flex:1;display:flex;justify-content:left;text-align:center}.game-over .buttons .restart-buttons{flex:1}.game-over .buttons .restart-buttons button{padding:10px 30px;background-color:#3F5CDC;color:#F1F1E7;border:none}.game-over .buttons .change-buttons{flex:1}.game-over .buttons .change{padding:10px 25px;background-color:#E3514C;color:#F1F1E7;border:none}@media (min-width: 820px) and (max-width: 949px){.game-over{padding:10px}.game-over h1{font-size:80px;line-height:55px}.game-over p{flex:1}.game-over p.message{font-size:30px}}@media (max-width: 819px){.game-over{padding:10px}.game-over h1{font-size:60px;line-height:35px}.game-over p{flex:1;font-size:20px}.game-over p.message{font-size:20px;line-height:20px}.game-over .list-high-scores{flex:1;margin-bottom:30px;width:80%;padding:20px 0}.game-over h2{font-size:30px}.game-over li .name{padding-left:0}.game-over .buttons .restart-buttons button{padding:10px 26px;font-size:14px}.game-over .buttons .change{padding:10px 18px;font-size:14px}}.characters-screen{display:flex;justify-content:center;flex-direction:column;width:50%;margin:0 auto}.characters-screen h1{flex:1;margin-bottom:20px;text-align:center}.characters-screen .characters-icons{flex:1;display:flex;text-align:center;justify-content:space-between;flex-wrap:wrap}.characters-screen .characters-icons div{flex:1}.characters-screen .characters-icons img{width:130px}.characters-screen .characters-icons img.selected{border:5px solid #E69B0C}.characters-screen .go-game{flex:1;display:flex;text-align:center}.characters-screen .go-game div{flex:1}.characters-screen .go-game button{padding:10px 55px;color:#F1F1E7;border:none}.characters-screen .go-game .button-play{background-color:#3F5CDC}.characters-screen .go-game .button-back{background-color:#299B41}@media (max-width: 1600px) and (min-width: 1024px){.characters-screen h1{font-size:70px;line-height:52px}.characters-screen .characters-icons img{width:100px}.characters-screen .go-game button{font-size:14px;padding:10px 30px}}@media all and (max-width: 1023px) and (min-width: 768px){.characters-screen h1{font-size:70px;line-height:52px}.characters-screen .characters-icons img{width:80px}.characters-screen .go-game button{font-size:14px;padding:10px 30px}}@media all and (max-width: 767px) and (min-width: 320px){.characters-screen{padding:10px}.characters-screen h1{font-size:40px;line-height:32px}.characters-screen .characters-icons img{width:40px}.characters-screen .go-game button{font-size:14px;padding:10px 20px}}.description{display:flex;justify-content:center;flex-direction:column;align-content:center;height:100%}.description .button-esc{text-align:right}.description .button-esc button{font-size:80px;background:none;border:none;color:#299B41}.description h1{text-align:center;margin-bottom:20px}.description .text{margin-bottom:30px}.description .text p{font-size:18px;line-height:20px}.description .text p.game-intro{font-size:30px;line-height:28px;color:#E69B0C;text-align:center;margin-bottom:10px}.description .text p img{width:20px}.description .images{flex:1;display:flex;justify-content:space-between;align-content:center;width:100%;height:100%}.description .images img{width:50px}.description .images .enemies{flex:1;width:33%;display:flex;flex-direction:column;align-content:center;text-align:center;padding-top:25px}.description .images .enemies div{flex:1}.description .images .lives{flex:1;width:33%;text-align:center;display:flex;flex-direction:column;align-content:center}.description .images .lives div{flex:1}.description .images .points{flex:1;width:33%;text-align:center;display:flex;justify-content:center;flex-direction:column;align-content:center;padding-top:25px}.description .images .points div{flex:1}.description .rules{display:flex;justify-content:space-around;padding-top:20px}.description .rules p{flex:1;text-align:center;line-height:16px;font-size:18px}@media all and (max-width: 1024px) and (min-width: 769px){.description h1{font-size:70px;line-height:52px}.description .text{margin-bottom:30px}.description .text p{font-size:18px;line-height:20px}.description .text p.game-intro{font-size:25px;line-height:23px;color:#E69B0C;text-align:center;margin-bottom:10px}.description .text p img{width:20px}}@media all and (max-width: 768px) and (min-width: 320px){.container.rules-screen{width:100%}.description{margin-bottom:70px}.description .button-esc button{line-height:20px}.description h1{font-size:70px;line-height:52px}.description .text{margin-bottom:30px}.description .text p{font-size:13px;line-height:20px}.description .text p.game-intro{font-size:20px;line-height:23px;color:#E69B0C;text-align:center;margin-bottom:10px}.description .text p img{width:20px}}