:root{
--ScissorsGradient: hsl(39, 89%, 49%) to hsl(40, 84%, 53%);
--PaperGradient: hsl(230, 89%, 62%) to hsl(230, 89%, 65%);
--RockGradient: hsl(349, 71%, 52%) to hsl(349, 70%, 56%);
--LizardGradient: hsl(261, 73%, 60%) to hsl(261, 72%, 63%);
--Cyan: hsl(189, 59%, 53%) to hsl(189, 58%, 57%);
--DarkText: hsl(229, 25%, 31%);
--ScoreText: hsl(229, 64%, 46%);
--HeaderOutline: hsl(217, 16%, 45%);
--RadialGradient: hsl(214, 47%, 23%) to hsl(214, 47%, 23%) ;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
width: 100vw;
min-width: 100vh;
display: flex;
justify-content: center;
padding: 25px;
background:linear-gradient(hsl(214, 47%, 23%) ,hsl(214, 47%, 23%));
}
.container .score{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid var(--HeaderOutline);
padding: 40px 240px;
border-radius: 10px;
margin-bottom: 100px;
}
.container .score .text{
position: absolute;
left: 20px;
}
.container .score .text p{
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.container .score .numscore{
position: absolute;
right: 20px;
background: white;
padding: 15px 25px;
border-radius: 10px;
}
.container .score .numscore p{
color: var(--ScoreText);
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.container .score .numscore :first-child{
font-size: 8px;
}
.container .score .numscore :nth-child(2){
font-size: 28px;
}
.container .game{
text-align: center;
}
.container .game .triangle{
position: relative;
}
.container .game .triangle img{
width: 190px;

}
.container .game .image{
position: absolute;
top: 170px;

}
.container .game .image .top{
position: absolute;
left: 180px;
top: -10px;
}
.container .game .image .top :first-child{
position: relative;
left: -80px;
background-color: white;
padding: 15px 20px;
border-radius: 50%;
border: 12px solid hsl(230, 89%, 62%);
cursor: pointer;
transition: .5s;
}
.container .game .image .top :first-child:hover{
transform: scale(1.2);
}
.container .game .image .top :nth-child(2){
position: relative;
left: 100px;
bottom: 120px;
background-color: white;
padding:  20px;
border-radius: 50%;
border: 12px solid hsl(230, 89%, 62%);
cursor: pointer;
transition: .5s;
}
.container .game .image .top :nth-child(2):hover{
transform: scale(1.2);
}
.container .game .image .bottom{
position: absolute;
top: 140px;
left: 180px;
background-color: white;
padding: 20px;
border-radius: 50%;
border: 12px solid hsl(349, 71%, 52%);
cursor: pointer;
transition: .5s;
}
.container .game .image .bottom:hover{
transform: scale(1.2);
}
.container .footer{
position: absolute;
bottom: 20px;
right: 20px;
}
.container .footer button{
padding: 10px 20px;
background-color: transparent;
border: 2px solid var(--HeaderOutline);
color: white;
border-radius: 10px;
cursor: pointer;
}
.container .msg{
position: absolute;
z-index: 1;
background-color: rgba(255, 255, 255, 1);
padding: 50px;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 0px 5px white ,0px 0px 20px black;
display: none;
}
.container .msg :nth-child(2){
width: 500px;
}
.container .msg :nth-child(1){
position: absolute;
right: -10px;
top: -10px;
background-color: aqua;
padding: 10px;
border-radius: 50%;
cursor: pointer;
}