*,
  *::after,
  *::before {
      margin:0;
      padding:0;
      outline:0;
      box-sizing: border-box;
  }  
  html{
      font-size:16px;
  }
  body
  {
    height: 100vh;
    background-image: linear-gradient( to right, #85FFBD , #FFFB7D);
    width:100vw;
    display:grid;
    place-items: center;
    font-family: 'Roboto Mono', monospace;
  }
  .container{
      width:80%;
      max-width: 30rem;
      height:auto;
      padding: 3rem 0rem;
      background-color: whitesmoke;
      border-radius: 10px;
      box-shadow: 6px 6px 2px
  }
  .title{
      text-align: center;
      margin-bottom: 15px;
      background-color: black;
      color:white;
      padding: 5px;
  }
  .details{
      display:flex;
      align-items: center;
      justify-content:space-evenly;
      margin-bottom:1rem;
  }
  .details .scores{
      font-size:1.2rem;
      text-align: center;
      background-color:#FFFB7D ;
      color: black;
      padding: 15px;
      border-radius: 10px;
      font-weight: 900;
      border: 5px solid #85FFBD;
    
  }
  .details .scores .span{
      font-weight:900;
  }
  .weapons{
      display:flex;
      align-items:center;
      justify-content: space-evenly;
      padding:1rem;
      }
.weapons button{
    width:4rem;
    height:4rem;
    font-size:2rem;
    font-weight: 900;
    background-color:#85FFBD ;
    border-radius:50px;
    border: 5px solid #FFFB7D;
    cursor:pointer;
}
.result{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 10px;
}
.result p{
    font-size:1.2rem;
    font-weight:600;
    text-decoration:uppercase;
}
.result p:last-child{
    color:#FFFB7D;
    border:5px solid #85FFBD;
    background-color: black;
    padding:10px;
    font-size:1.3rem;
    font-weight:900;
    text-transform: uppercase;
    border-radius: 15px;
}