:root {
    --scissors-gradient1: hsl(39, 89%, 49%) ;
    --scissors-gradient2: hsl(40, 84%, 53%);
    --paper-gradient1: hsl(230, 89%, 62%);
    --paper-gradient2: hsl(230, 89%, 65%);
    --rock-gradient1: hsl(349, 71%, 52%);
    --rock-gradient2: hsl(349, 70%, 56%);
    --lizard-gradient1: hsl(261, 73%, 60%);
    --lizard-gradient2: hsl(261, 72%, 63%);

    --dark-text: hsl(229, 25%, 31%);
    --score-text: hsl(229, 64%, 46%);
    --header-outline: hsl(217, 16%, 45%);

    --background-gradient1: hsl(214, 47%, 23%);
    --background-gradient2: hsl(237, 49%, 15%); 
}

body {
    background-image: linear-gradient(to right, var(--background-gradient1), var(--background-gradient2));
    box-sizing: border-box;
    font-family: 'Roboto';
    padding: 30px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 50px;
}

.head {
    display: flex;
    width: 50vw;
    justify-content: space-around;
    align-items: center;
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    font-weight: bold;
}

.score {
    color: var(--score-text);
}

.head-rock {
    display: block;
}

.head-paper {
    display: block;
}

.head-scissors {
    display: block;
}

.score-text {
    color: white;
}

.body {
    display: flex;
    align-items: center;
    justify-content: space-around;

    width: 60vw;
    margin-top: 70px;
}


.bot-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bot-img {
    width: 10rem;     
    background-color: gray;
    height: 10rem;
    border-radius: 100px;   
    border: .5rem solid white; 
}

.bot-img > img {
    transform: translateX(3.2rem) translateY(2.8rem)
}



.text {
    margin-bottom: 10px;
    color: white;
}

.play-button {
    background-color: white;
    width: 6rem;
    text-align: center;
    font-size: 40px;
    border-radius: 10px;
}

.play-button:hover {
    animation: playButton 1s infinite;
    transition: transform .35s ease-out;
    box-shadow: 5px 5px 4px black;
}

@keyframes playButton {
    0% {transform: scale(1.2);}
    30% {transform: scale(1.1);}
    70% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-text {
    font-size: 30px;
    margin-bottom: 2rem;
    color: white;
}

.your-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.your-img {
    width: 10rem;     
    background-color: gray;
    height: 10rem;
    border-radius: 100px;   
    border: .5rem solid white; 
}

.your-img > img {
    transform: translateX(3.2rem) translateY(2.8rem)
}

.pick {
    display: flex;
    width: 40vw;
    margin-top: 70px;
    align-items: center;
    justify-content: space-between;
}

.rules {
    font-size: 20px;
    text-align: center;
    color: white;
}

/* media queries */


@media only screen and (max-width: 1200px) {
    .head {
        width: 70vw;
    }
}

@media only screen and (max-width: 900px) {
    .head {
        width: 80vw;
    }

    .head-title {
        font-size: 40px;
    }

    .score {
        font-size: 40px;
    }
}

@media only screen and (max-width: 450px) {
    .head-title {
        font-size: 30px;
    }

    .score {
        font-size: 30px;
    }
}


@media only screen and (max-width: 1200px) {
    .body {
        width: 80vw;
    }
}

@media only screen and (max-width: 900px) {
    .body {
        width: 90vw;
    }

    
    .bot-text {
        font-size: 30px;
    }

    .your-text {
        font-size: 30px;
    }
}

@media only screen and (max-width: 450px) {
    .bot-text {
        font-size: 25px;
    }

    .your-text {
        font-size: 25px;
    }
}

@media only screen and (max-width: 900px) {
    .bot-img {
        width: 8rem;
        height: 8rem;
    }

    .bot-img > img {
        transform: translateX(2.4rem) translateY(2rem);
        width: 6rem;
        height: 6rem;
        object-fit: contain;
    }
}

@media only screen and (max-width: 570px) {
    .bot-img {
        width: 7rem;
        height: 7rem;
    }

    .bot-img > img {
        transform: translateX(1.8rem) translateY(1.7rem);
        width: 5rem;
        height: 5rem;
        object-fit: contain;
    }
}

@media only screen and (max-width: 450px) {
    .bot-img {
        width: 6rem;
        height: 6rem;
    }

    .bot-img > img {
        transform: translateX(1.3rem) translateY(1.3rem);
        width: 3rem;
        height: 3rem;
        object-fit: contain;
    }
}


@media only screen and (max-width: 900px) {
    .play-button {
        font-size: 30px;
    }
}

@media only screen and (max-width: 450px) {
    .play-button {
        font-size: 20px;
        width: 5rem;
    }
}


@media only screen and (max-width: 450px) {
    .info-text {
        font-size: 20px;
    }
}

@media only screen and (max-width: 900px) {
    .your-img {
        width: 8rem;
        height: 8rem;
    }

    .your-img > img {
        transform: translateX(2.4rem) translateY(2rem);
        width: 6rem;
        height: 6rem;
        object-fit: contain;
    }
}

@media only screen and (max-width: 570px) {
    .your-img {
        width: 7rem;
        height: 7rem;
    }

    .your-img > img {
        transform: translateX(1.8rem) translateY(1.7rem);
        width: 5rem;
        height: 5rem;
        object-fit: contain;
    }
}

@media only screen and (max-width: 450px) {
    .your-img {
        width: 6rem;
        height: 6rem;
    }

    .your-img > img {
        transform: translateX(1.3rem) translateY(1.3rem);
        width: 3rem;
        height: 3rem; 
        object-fit: contain;
    }
}

@media only screen and (max-width: 1200px) {
    .pick {
        width: 50vw;
    }
}

@media only screen and (max-width: 900px) {
    .pick {
        width: 60vw;
    }
}