body{margin:0;background-color:#edebff}#top-container{text-align:center;margin-top:100px;height:300px}h3{font-family:Arial,Helvetica,sans-serif}#photo{display:flex;gap:30px;justify-content:center;align-items:center}img{height:220px;width:100px;cursor:pointer}#rock:hover,#paper:hover,#scissor:hover{animation:slidein 1.5s ease-in-out infinite}#play,#playAgain{text-align:center}#design{position:absolute;background-color:#faebd7;height:100px;width:100%;transform:translateY(-50px);z-index:-1}#btn-play{height:40px;width:100px;font-size:large;font-family:monospace;font-weight:600;border-radius:10px;border-style:solid;cursor:pointer;background-color:#b5f1ff}#btn-play:hover{background-color:#f0f8ff}#btn-playagain{position:absolute;bottom:-70px;left:50%;transform:translate(-50%);height:40px;width:100px;font-size:large;font-family:monospace;font-weight:600;border-radius:10px;border-style:solid;cursor:pointer;background-color:#b5f1ff}#btn-playagain:hover{background-color:#f0f8ff}#new-container{display:none;position:relative;width:100%;height:25rem}#left-wall{position:absolute;display:flex;justify-content:center;text-align:center;height:100%;width:25%;background-color:#6890ff;border-radius:0 3rem 3rem 0}#right-wall{position:absolute;text-align:center;display:flex;justify-content:center;right:0;height:100%;width:25%;background-color:#6890ff;border-radius:3rem 0 0 3rem}#user{position:absolute;height:50%;z-index:-1;top:30%;right:11%;animation:forward1 2s ease-in-out 1 forwards}#cpu{position:absolute;height:50%;z-index:-1;top:30%;left:17%;animation:forward2 2s ease-in-out 1 forwards}#score{position:absolute;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:larger;color:azure;top:20%}#userScore,#cpuScore{margin-top:20px;width:40px;height:40px;font-size:xx-large;text-align:center;font-family:Lato,sans-serif;font-weight:600;border-width:3px;border-radius:25%;border-color:#456ed6;border-style:solid}#display{position:absolute;top:5%;left:50%;transform:translate(-50%);font-size:x-large;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#ff977a;font-weight:600}@media screen and (max-width: 768px){#user{height:40%;width:50%;top:30%;right:20%}#cpu{height:40%;width:50%;top:30%;left:30%}#new-container{height:15rem}#score{font-size:small}}@keyframes slidein{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes forward1{0%{transform:rotate(0) translateY(-20%)}to{transform:rotate(90deg) translateY(-90%)}}@keyframes forward2{0%{transform:scaleX(0) rotate(0) translateY(0)}to{transform:scaleX(-1) rotate(90deg) translateY(-100%)}}