style.css

@font-face{font-family:"Lexend";font-style:normal;font-weight:400;src:local(""),url("../fonts/lexend-v17-latin-regular.woff2") format("woff2"),url("../fonts/lexend-v17-latin-regular.woff") format("woff")}@font-face{font-family:"Lexend";font-style:normal;font-weight:700;src:local(""),url("../fonts/lexend-v17-latin-700.woff2") format("woff2"),url("../fonts/lexend-v17-latin-700.woff") format("woff")}@font-face{font-family:"Lexend";font-style:normal;font-weight:900;src:local(""),url("../fonts/lexend-v17-latin-900.woff2") format("woff2"),url("../fonts/lexend-v17-latin-900.woff") format("woff")}@font-face{font-family:"Lovelo";src:url("../fonts/Lovelo Line Bold.otf")}*,*::before,*::after{box-sizing:border-box}header{display:flex;justify-content:center;align-items:center;padding:.2rem;padding-top:.7rem;font-size:2.187rem;border-bottom:1px solid #72e6a6}header span{color:#72e6a6;font-family:"Lovelo",serif;display:block;text-shadow:0px 0px 8px #72e6a6}.logo-hover{color:#6bffab;text-shadow:0 0 7px #fff,0 0 21px #72e6a6,0 0 92px #72e6a6}.unlit{opacity:.1}.refresh{cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center}.logo:hover{text-shadow:0 0 7px #fff,0 0 10px #fff,0 0 21px #72e6a6,0 0 42px #72e6a6,0 0 82px #72e6a6,0 0 92px #72e6a6,0 0 102px #72e6a6}.name-btn{display:block}html{height:100vh}body{padding:0;margin:0;background:#141412;height:100vh;z-index:-1}main{display:flex;align-items:center;justify-content:center;height:75%}.input-form{display:flex;flex-direction:column;text-align:center;border:7px solid #72e6a6;font-family:"Lexend",sans-serif;width:413px;height:350px}.name-input-text{padding:1rem;display:flex;flex-direction:column;justify-content:space-around;height:100%;row-gap:.5rem;background:#141412}.input-small-con{height:80px;display:flex;flex-direction:column;justify-content:space-between}.input-label{text-transform:capitalize;color:#141412;background:#72e6a6;display:block;padding:2rem 1rem;border-bottom:7px solid #72e6a6;box-shadow:inset 0 0 5px 3px #386c50;font-size:1.5rem;font-weight:800;font-size:2rem}#name,#name-change{border:none;padding:1rem;font-size:1rem;background:#bff3d6;box-shadow:inset 0 0 3px 1px rgba(0,0,0,.46);display:block;height:45px;margin:0 auto;text-align:center;font-family:"Lexend",sans-serif;font-weight:400;font-size:1.875rem;width:65%;text-transform:uppercase;color:#0e4414}#name::-moz-placeholder{text-align:center;font-family:"Lexend",sans-serif;color:#b0b0b0;font-weight:700;font-size:1.875rem}#name:-ms-input-placeholder{text-align:center;font-family:"Lexend",sans-serif;color:#b0b0b0;font-weight:700;font-size:1.875rem}#name::placeholder{text-align:center;font-family:"Lexend",sans-serif;color:#b0b0b0;font-weight:700;font-size:1.875rem}.name-question{background:#72e6a6;text-transform:capitalize}small{color:#72e6a6;font-size:1rem;font-weight:700}.btn{display:block;background:#72e6a6;border:none;margin:0 auto;font-size:1.2rem;padding:.2rem 2rem;cursor:pointer;font-weight:800;font-size:1.625rem;font-family:"Lexend",sans-serif}.btn:hover{color:#72e6a6;background:#141412;font-weight:600;border:1px solid #72e6a6;transition:all .3s ease;text-shadow:0 0 7px #72e6a6,0 0 21px #72e6a6,0 0 92px #72e6a6;position:relative}.color-btn-con{padding:2rem;display:flex;flex-direction:column;height:65%;justify-content:space-between;background:#141412}.color-con{display:flex;width:100%;justify-content:space-between}.color-con img{width:60px;height:auto}.color-con img:hover{cursor:pointer;box-shadow:0 0 5px 2px #72e6a6;transition:all .1s ease-in-out}.name,.score-middle{box-shadow:inset 0 0 10px 5px rgba(0,0,0,.46);padding:0 1rem}.play-page{display:flex;justify-content:space-evenly;align-items:stretch;min-width:95%}.block{display:flex;flex-direction:column;border:5px solid #72e6a6;width:20%;margin-top:2rem}.player-block{margin-left:auto}.computer-block{margin-right:auto}.player-block img{transform:scaleX(-1)}.name{color:#141412;background:#72e6a6;font-family:"Lexend",sans-serif;font-weight:600;text-transform:uppercase;text-align:center;font-size:3.037rem;width:100%;padding:1rem 0;border-bottom:7px solid #72e6a6}.history{padding-left:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between;margin:0;height:100%}.items{margin:0 auto;border-bottom:1px solid #254935;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.mid-con{width:50%;height:100%}.play-box{display:flex;justify-content:space-between;align-items:stretch;border:3px solid #72e6a6;padding:3rem 3rem;width:92%;margin:0 auto;height:82.5%}.rps{display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;gap:2.4rem}.rps-el{cursor:pointer}.rps-animation{-webkit-animation:logo-flicker 2s forwards;animation:logo-flicker 2s forwards}.score{font-size:5.625rem}.score-con{display:flex;justify-content:center}.score-middle{background:#72e6a6;font-family:"Lexend",sans-serif;font-weight:800;border:7px solid #72e6a6}.rock-img,.computer-rock{width:46%;transform:scaleX(-1)}.paper-img,.computer-paper{width:46%}.scissors-img,.computer-scissors{width:59%}.computer-rps{transform:scaleX(-1)}@-webkit-keyframes logo-flicker{0%{opacity:0}100%{opacity:1}}@keyframes logo-flicker{0%{opacity:0}100%{opacity:1}}.visible{display:block}.invisible{display:none}.come-in{-webkit-animation:come-in 100ms forwards;animation:come-in 100ms forwards}.go-out{-webkit-animation:go-out 100ms forwards;animation:go-out 100ms forwards}@-webkit-keyframes come-in{0%{transform:translateX(150%)}100%{transform:translateX(0%)}}@keyframes come-in{0%{transform:translateX(150%)}100%{transform:translateX(0%)}}@-webkit-keyframes go-out{0%{transform:translateX(0%)}100%{transform:translateX(-250%)}}@keyframes go-out{0%{transform:translateX(0%)}100%{transform:translateX(-250%)}}.selected{transform:scale(1.15)}.endgame-settings{border:7px solid #72e6a6;position:absolute;margin:0 auto;z-index:100;opacity:1}.endgame-settings label{font-family:"Lexend",sans-serif;text-align:center;font-size:3.125rem}.button-con{padding:1rem 4rem;background:#141412}.button-con button{margin:1.5rem auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:280px;font-size:1.625rem}.main-end{position:absolute;top:0;bottom:0;left:0;right:0;height:100vh}.body-end{display:relative}.low-opacity{opacity:.2}.endgame-settings-end{opacity:1}.change-btn-con{display:flex;flex-direction:space-around}.btn-color-con{margin:2rem;margin-bottom:2rem}.endgame-con{display:flex;justify-content:center;align-items:center;position:absolute;opacity:1;top:0;left:0;right:0;bottom:0}.change-name-con{position:absolute;opacity:1;display:flex;justify-content:center;align-items:center;height:90%;width:100vw}.endgame-message{position:relative;z-index:5}