.heading h1{
    
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    padding: 5px;
}
body{
    margin: 0;
    padding: 0;
    background-color:grey;
}
.heading{
    display: flex;
    background:linear-gradient(#FDFC47,#24FE41);
    justify-content: center;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    
}
.welcome{
    background:linear-gradient(90deg,#f12711,#f5af19);
    text-align: center;

     font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    width: 800px;
    border-radius: 20px;
    padding: 5px;
    margin-top: 30px;
    margin-left: 25%;
    position:absolute;
    height: 400px;
    


    
}

 @media screen and (max-width:800px) {
        .heading h1{
            font-size: 20px;
        }
        #choices button{
            font-size:30px;
            
            
            
        
        
        
        }


        .welcome{
            width: 350px;
            height: 500px;
            margin-left: 90px;
        }
        .welcome h2{
            font-size: 15px;
        }
        #nam{
            width:auto;
        }
        
    .RES{
            font-size: 10px;
        }

     
 }
.score{
    text-align: center;
    font-size: 40px;

}
.welcome input{
    background-color:transparent;
    color: black;
    border-radius: 10px;
    width: 20%;
    border: black solid 2px;
    outline: none;
    padding: 5px;

}
.welcome button{
    padding: 5px;
    border-radius: 20px;
    background: transparent;
    outline: none;
    border: black 2px solid;
    margin: 5px;

}
#choices{
    margin-top: 5%;
    margin-left: 35%;
    z-index: 2;

    

}
.stone{
    font-size: 100px;
    background: linear-gradient(90deg,#4b4b4b,#a0a0a0);
    margin: 15px;
    border-radius: 20px;
}
.paper{
    font-size: 100px;
    background: linear-gradient(90deg,#ffffff,#f0f0f0);
    margin: 15px;
    border-radius: 20px;
}
.Scissor{
font-size: 100px;
background: linear-gradient(90deg,#e0e0e0,#a3a3a3);
margin: 15px;
border-radius: 20px;
}
#playerdisplay{
    text-align: center;
    color: #24FE41;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
margin: 10px;
}
    
    
#oppodisplay{
    text-align: center;
    color:red;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
margin: 10px;
}

#result{
text-align: center;
font-size: 25px;
color:white;

}
.greentext,#namescore{
    color: green;
}
.redtext,#opponentscore{
    color: red;
}