@import url('https://fonts.cdnfonts.com/css/azonix');

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    background-image: url("images/wasteland.avif");
    background-size: cover; /* This ensures the image covers the entire element */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    backdrop-filter: blur(10px);
    font-family: 'Azonix', sans-serif;
    user-select: none;
    overflow: hidden;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-size: cover; /* Adjust as needed */
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: none;
    opacity: 80%;
}

button:hover {
    transform: scale(1.1);
}

button:active {
    animation: clickAnimation 0.2s ease;
}

@keyframes clickAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
    
}

.header p{
    color: yellow;
    text-align: center;
    font-size: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



.startGameButton {
    width: 200px;
    height: 50px;
    background-color: #2980b9;
    font-family: 'Azonix';
    color: white;
    border: none;
    border-radius: 5px;
}


.displayResults {
    color: white;
    padding-top: 20px;
}

.displayScore {
    padding-top: 10px;
    color: yellow;
}

.character {
    width: 45vh;
    position: fixed;
    margin-top: -10%;
    margin-left: -3%;
    align-self: flex-start;
    display: none;
    -webkit-user-drag: none;
}

.character:hover{
    transform: none;
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  /* Apply animation to the image */
  .animated {
    animation: fadeIn 1s ease-in-out;
  }

.robot {
    width: 30vh;
    margin-right: 20px;
    position: fixed;
    align-self: flex-end;
    display: none;
    -webkit-user-drag: none;
}

.rock, .paper, .scissors{
    width: 20vh;
    height: 20vh;
    display: none;
    border-radius: 10%;
    margin-bottom: 10%;
}

.rock {
    background-image: url('images/rock.png');
    background-size: 90%;
}

.paper {
    background-image:url('images/paper.jpg');
}

.scissors {
    background-image:url('images/scissors.png');
}

audio {
    display: none;
}

.character {
    animation: circularAnimation 3.5s infinite linear;
}

.robot {
    animation: circularAnimationReverse 3.5s infinite linear;
}

.victoryImg {
    width: 100vh;
    height: 50vh; /* Set the height as needed */
    border-radius: 25px;
    background-image: url('images/victory_img.jpg'); /* Replace with your image's path */
    background-size: cover; /* Adjust how the image covers the div */
    background-repeat: no-repeat; /* Prevent image repetition */
    display: none;
}

.defeatImg {
    width: 100vh;
    height: 50vh; /* Set the height as needed */
    border-radius: 25px;
    background-image: url('images/defeat_img.jpg'); /* Replace with your image's path */
    background-size: cover; /* Adjust how the image covers the div */
    background-repeat: no-repeat; /* Prevent image repetition */
    display: none;
}

.resetButton {
    text-align: center;
    font-size: large;
    margin-top: 10px;
    width: 200px;
    height: 50px;
    background-color: rgb(218, 133, 7);
    font-family: 'Azonix';
    color: white;
    border: none;
    border-radius: 5px;
    display: none;
    padding-top: 10px;
}

.playerResultImg {
    display: none;
    background-color: white;
    background-size: 10vh; /* Adjust how the image covers the div */
    background-repeat: no-repeat; /* Prevent image repetition */
    width: 15vh;
    height: 15vh;
    align-self: flex-start;
    background-position: center center;
    position: absolute;
    margin-top: 80vh;
    margin-left: 10vh;
    border-radius: 40%;
    opacity: 80%;
}

.computerResultImg {
    position: absolute;
    display: none;
    margin-top: 80vh;
    margin-right: 10vh;
    border-radius: 40%;
    background-color: white;
    background-size: 10vh; /* Adjust how the image covers the div */
    background-repeat: no-repeat; /* Prevent image repetition */
    width: 15vh;
    height: 15vh;
    align-self: flex-end;
    background-position: center center;
}

@keyframes circularAnimation {
    0% {
        transform: rotate(0deg) translateX(10px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(10px) rotate(-360deg);
    }
}

@keyframes circularAnimationReverse {
    0% {
        
        transform: rotate(360deg) translateX(10px) rotate(-360deg);
    }
    100% {
        transform: rotate(0deg) translateX(10px) rotate(0deg);
    }
}


@media (max-width: 768px) {
    .rock, .paper, .scissors{
        width: 20vh;
        height: 20vh;
        display: none;
    }

    .character {
        width: 20vh;
        z-index: 1;
    }
    
    .robot {
        width: 15vh;
        margin-right: -2%;
        z-index: 1;
    }

    .playerResultImg, .computerResultImg {
        width: 10vh;
        height: 10vh;
    }

    @media only screen and (orientation: landscape) {
        
        .playerResultImg, .computerResultImg {
            margin-bottom: 10vh;
        }
      }

}