@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Roboto:wght@400;500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
    list-style: none;
}

html{
    font-size: 62.5%;
}

body{
    background-color: #576574;
}

.btn {
    padding: .7rem 2rem;
    font-weight: 500;
    background: #01a3a4;
    color: white;
    outline: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
}
.btn:hover{
  box-shadow: 0 0 1.5rem #01a3a4;
}

 .score{
    color: white;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
 }

 .score h2{
    font-size: 1.9rem;
 }

 .score p{
    text-align: center;
    padding: 1rem;
    font-size: 1.7rem;
    font-weight: 500;
}

.intro {
    color: #fff;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: opacity .5s ease;
}


.intro h1{
    font-size: 3rem;
}

.match{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .5s ease .5s;
}

.winner{
    color: white;
    text-align: center;
    font-size: 2.7rem;
}

.hands,
.options{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.player-hand{
    transform: rotateY(180deg);
}

div.fadeOut{
    opacity: 0;
    pointer-events: none;
}

div.fadeIn{
    opacity: 1;
    pointer-events: all;
}


@keyframes shakePlayer {
    0% {
      transform: rotateY(180deg) translateY(0px);
    }
    15% {
      transform: rotateY(180deg) translateY(-50px);
    }
    25% {
      transform: rotateY(180deg) translateY(0px);
    }
    35% {
      transform: rotateY(180deg) translateY(-50px);
    }
    50% {
      transform: rotateY(180deg) translateY(0px);
    }
    65% {
      transform: rotateY(180deg) translateY(-50px);
    }
    75% {
      transform: rotateY(180deg) translateY(0px);
    }
    85% {
      transform: rotateY(180deg) translateY(-50px);
    }
    100% {
      transform: rotateY(180deg) translateY(0px);
    }
  }
  
  @keyframes shakeComputer {
    0% {
      transform: translateY(0px);
    }
    15% {
      transform: translateY(-50px);
    }
    25% {
      transform: translateY(0px);
    }
    35% {
      transform: translateY(-50px);
    }
    50% {
      transform: translateY(0px);
    }
    65% {
      transform: translateY(-50px);
    }
    75% {
      transform: translateY(0px);
    }
    85% {
      transform: translateY(-50px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  

  @media (max-width:380px){
    .score{
      margin-left: 8rem;
    }
    .match{
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 8rem;
        transition: opacity .5s ease .5s;
    }
    .options {
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: -30rem;
    }


    .intro h1{
        font-size: 3rem;
        text-align: center;
        margin-left: 6rem;
    }

    .btn{
        font-size: 2rem;
    }

  }