*{
margin: 0;
padding: 0;
}
body{
    background-image: url("https://unsplash.com/photos/book-lot-on-table-9BoqXzEeQqM");
    z-index: 0;
  height: 100vh;
  width: 100vw; 
}
header{
    position: sticky;
    background-color: navy;
    color: white;
    text-align: center;
    font-size: 2rem;
}
header .logo{
    padding: 20px;
}

.QsAndAn{
    text-align: center;
    width: 30vw;
    margin: auto;
    margin-top:9vh;
    font-size: 1.2rem;
}

.QsAndAn #rounds{
    font-size: 1.2rem;
}
.scoreboard {
    text-align: center;
    display: grid;
    color: white;
    width: 9vw;
    font-size: 1.4rem;
    background-color: navy;
    margin: auto;
    margin-top:9vh;
}

.bothscreen{
    width: 24vw;
    padding: 9.4px;
    display: flex;
    background-color: (0,0,0,0.1);
    backdrop-filter: blur(24px);
    text-align: center;
    margin: auto;
    margin-top: 6vh;
    border: 2px solid black;
    border-radius: 20px;
    justify-content: center;
}

.human, .machine{
    font-size: 1.2rem;
    margin: auto;
}
.display1, .display2{
    font-size: 1.2rem;
    
    width: 60px;
    height: 90px;
    margin: auto;
}

#screen2, #screen3{
    min-width: 40px;
    height: 70px;
    margin: auto;
}
main{
    background-color: (0,0,0,0.1);
    backdrop-filter: blur(24px);
    width: 24vw;
    text-align: center;
    margin: auto;
    margin-top: 4.2vh;
    border: 2px solid black;
    border-radius: 20px;
}

main #screen{
    font-size: 1.2rem;
    font-weight:bold;
    width: 20vw;
    height: 12vh;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    border: 2px solid black;
    border-radius:9px ;
}

main .allbtns{
    display: flex;
    margin: auto;
}

main .button{
   display: flex;
   margin: auto;
   min-width: 40px;
   height: 70px;
}
.rockbtn, .paperbtn, .scissorbtn{
    font-size: 1.2rem;
    margin: auto;
}
main .button:hover{
cursor: pointer;
}

main .reset{
    margin-top: 20px;
    margin-bottom: 20px;
    min-width: 60px;
    height: 40px;
    border: 2px solid black;
    border-radius: 50px;
    
}

main .button:active {
    transform: translateY(4px);
  }


footer{
    margin-top: 25px;
    padding-top: 25px;
    text-align: center;
    position: relative;
    background-color: navy;
    color: white;
}
.social-media{
    text-align: center;
    margin: 2%;
}
.social-media a{
    font-size: 1.2rem;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    border-radius: 7px;
    margin: 4.5px;
    padding: 6px;

}

.social-media a:hover{
    background-color: white;
    color: navy;
}
footer p{
    padding: 20px;
}



@media(max-width:1420px){
    .bothscreen{
      width: 46vw;
  }
  #screen2, #screen3{
    min-width: 40px;
    height: 70px;
}
    main {
        width: 46vw;
      }

      main #screen {
        width: 40vw;
      }
      .scoreboard {
        width: 46vw;
    }
    .QsAndAn{
        width: 96vw;
    }
}


@media(max-width:760px){
    .bothscreen{
       width: 90vw;
   }
   #screen2, #screen3{
    min-width: 40px;
    height: 70px;
}
    main {
        width: 96vw;
      }

      main #screen {
        width: 90vw;
      }
      .scoreboard {
        width: 96vw;
    }
    .QsAndAn{
        width: 96vw;
    }
}