body {
    margin: 0;
    padding: 0;
    background: radial-gradient(#1e3657, #16183B);
    font-family: Barlow Semi Condensed, sans-serif;


}

/* score*/

.wrapper {
    margin: 2rem auto;
    border: #5A6882 2px solid;
    background: none;
    width: 35%;
    height: 4.5rem;
    border-radius: 10px;
    padding: 0.5rem 1rem 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.one {
    background: none;
    height: fit-content;
    grid-column: 1;

}

img {
    margin-top: 0.2rem;
    width: 120px;
    height: 70px;
}

.two {
    background: white;
    grid-column: 2;
    grid-row: 1;
    height: 70px;
    width: 6rem;
    border-radius: 5px;

}

.text {

    font-size: 9px;
    color: #4758A2;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    padding: 0;
    margin: 10px 0 0;

}

.number {

    color: #56536A;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/* player choose */
.container {
    background: none;
    height: 50vh;

}

.slice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 10rem);
    grid-gap: 5%;
    background: url('../images/bg-triangle.svg') no-repeat center 4rem;


}




.paper {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    border: 15px #4B66F3 solid;
    box-shadow: 0px 5px #2945C2, inset 0em 5px #BABFD7;



}

.scissors {
    grid-column: 2;
    grid-row: 1;
    height: 10rem;
    border: 15px #EAA51A solid;
    box-shadow: 0px 5px #C86B1A, inset 0em 5px #BABFD7;

}

.rock {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
    height: 10rem;
    border: 15px #DC3853 solid;
    box-shadow: 0px 5px #9D1535, inset 0em 5px #BABFD7;
    justify-self: center;

}

.paper,
.scissors,
.rock {
    border-radius: 50%;
    background: white;
    height: 7rem;
    width: 7rem;
}


.img-paper,
.img-rock,
.img-scissors {
    width: 45%;
    height: 55%;
    margin: 25% 0 0 25%;
}

/* rules */
button {
    background: none;
    border: #5A6882 1px solid;
    border-radius: 7px;
    cursor: pointer;

    font-size: 12px;
    color: #ffffff;
    margin-bottom: 1rem;
    padding: .7rem 2.3rem;

    position: relative;

    left: 90%;

}

.rules {
    position: absolute;
    z-index: 99;
    height: 100vh;
    width: 100vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #080b16c4;
    display: none;

}

.bg-rules {
    width: 25rem;
    height: 30rem;
    position: relative;
    z-index: 4;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding-top: .5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 20%);

}

.img-rules {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 7;
    width: 100%;
    height: 80%;
    background: url(../images/image-rules.svg) no-repeat center;
    margin: 0;

}

h1 {

    color: #394361;
    font-weight: bold;
    margin-left: 1.5rem;
}

.heading {
    grid-column: 1;
    grid-row: 1;
    height: 1rem;
    width: 1rem;
    background: none;
}

.close {
    color: #D0D1D5;
    border: none;
    margin: 0;
    background: url('../images/icon-close.svg') no-repeat;
    background-size: 100%;
    height: 10rem;

}

.btn-close {
    grid-column: 2;
    grid-row: 1;
    height: 1rem;
    width: 1rem;
    background: none;
    padding: 15% 0 0 63%;
    position: absolute;
    z-index: 1;
    
}


/* What player and computer choose */
.picked {
    display: none;
    height: fit-content;
    background: none;
}

.container-picked {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 4.5%);
    width: 100%;
    background: none;
}

.player-picked {
    grid-column: 1;
    grid-row-start: 4;
    grid-row-end: 4;
    background: none;
    justify-self: center;
    margin: 1.3rem 0 0 0;
    position: relative;
    z-index: 2;
}

.computer-picked {
    grid-column: 3;
    grid-row-start: 4;
    grid-row-end: 4;
    background: none;
    justify-self: center;
    margin: 1.3rem 0 0 0;
    position: relative;
    z-index: 2;

}

h4 {
    color: white;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 200px;
}
.heading-player{
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
}
.heading-house{
    position: relative;
    z-index: 3;
    grid-column: 3;
    grid-row: 1;

}

.picked-scissors,
.picked-rock,
.picked-paper,
.computer-rock,
.computer-paper,
.computer-scissors {
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    display: none;


}

.picked-paper,
.computer-paper {

    background: white url('../images/icon-paper.svg') no-repeat center;
    border: 30px #4B66F3 solid;
    box-shadow: 0px 10px #2945C2, inset 0em 10px #BABFD7;
    background-size: 5rem;
    border-radius: 50%;
    background-size: 5rem;
    display: none;
}

.picked-scissors,
.computer-scissors {
    background: white url('../images/icon-scissors.svg') no-repeat center;
    border: 30px #EAA51A solid;
    box-shadow: 0px 10px #C86B1A, inset 0em 10px #BABFD7;
    background-size: 5rem;
    display: none;

}

.picked-rock,
.computer-rock {
    background: white url('../images/icon-rock.svg') no-repeat center;
    border: 30px #DC3853 solid;
    box-shadow: 0px 10px #9D1535, inset 0em 10px #BABFD7;
    background-size: 5rem;
    
}

.computer-paper {
    display: none;
}

.computer-scissors {
    display: none;
}

.computer-rock {
    display: none;
}

.computer-none {
    width: 13rem;
    height: 13rem;
    grid-column: 3;
    grid-row-start: 4;
    justify-self: center;
    border-radius: 50%;
    background: #172240;
    background-size: 5rem;

}



/* pulsing circle */

.circle1{
    grid-column: 1;
    grid-row-start: 2;
    grid-row-end: 7;
    justify-self: center;
    width: 27rem;
    height: 27rem;
    border-radius: 50%;
    background: #1E2949;
    animation: scaleIn 2s infinite ;
    position: relative;
    z-index: 1;
    display: none;
}

.circle2{
    grid-column: 1;
    grid-row-start: 3;
    grid-row-end: 6;
    justify-self: center;
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    background: #222C4B ;
    position: relative;
    z-index: 1;
    animation: scaleIn 2s infinite ;
    display: none;
}
.circle3{
    grid-column: 1;
    grid-row-start: 4;
    grid-row-end: 5;
    justify-self: center;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: #293251;
    position: relative;
    z-index: 1;
    animation: scaleIn 2s infinite ;
    display: none;
}

.circle1-comp{
    grid-column: 3;
    grid-row-start: 2;
    grid-row-end: 7;
    background: none;
    justify-self: center;
    width: 27rem;
    height: 27rem;
    border-radius: 50%;
    background: #222848;
    animation: scaleIn 2s infinite ;
    position: relative;
    z-index: 1;
    display: none;
}
.circle2-comp{
    grid-column: 3;
    grid-row-start: 3;
    grid-row-end: 6;
    justify-self: center;
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    background: #222C4B ;
    position: relative;
    z-index: 1;
    animation: scaleIn 2s infinite ;
    display: none;
}
.circle3-comp{
    grid-column: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    justify-self: center;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: #293251;
    position: relative;
    z-index: 1;
    animation: scaleIn 2s infinite ;
    display: none;

}

@keyframes scaleIn {
    0% {
        transform: scale(1, 1);
       
    }
    50% {
        transform: scale(1.2, 1.2);
     
    }

    to {
        transform: scale(1, 1);
        
    }
}


/* result and play again */
.result {
    grid-column: 2;
    grid-row: 1;
    height: 3.5rem;
    width: 100%;
    background: none;
    justify-self: center;
    margin-top: 5rem;
    display: none;
}

h3 {

    color: white;
    font-size: 3.5rem;
    text-align: center;
    font-weight: 200px;
    text-transform: uppercase;
    margin-bottom: 0;
}

p {

    color: none;
    font-size: .8rem;
    text-align: center;
    background: white;
    padding: 1rem;

    border-radius: 10px;
    cursor: pointer;
}

p:hover {

    color: #AA4C60;
}

.play {
    background: none;
    width: 50%;
    margin: auto;
}






/* iPad version */
@media only screen and (max-width: 768px) {
    /* score*/

    .wrapper {
        width: 80%;
        height: 6rem;
        padding: 1.3rem 1rem 0rem 1rem;

    }

    /* rules */
    button {
        left: 50%;
        transform: translate(-50%);
    }




    .bg-rules {
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 100px);
    }
    .img-rules {
        grid-row-start: 2;
        grid-row-end: 5;
        height: 100%;
        justify-content: center;

    }


    .heading {
        grid-row: 1;
        background: none;
        padding: 0;
        margin: 2rem;
        width: fit-content;
        justify-self: center;
    }
    h1{
        padding: 0;
        margin: 0;
    }


    .btn-close {
        grid-row: 5;
        grid-column-start: 1;
        grid-column-end: 3;
      padding-left: 0;
      justify-self: center;

    }

    .close {
        background-size: 100%;
        height: 2rem;
        width: 2rem;

    }

    /* What player and computer choose */

    h4 {
        font-size: 1rem;
    }
    .heading-house{
        grid-row: 2;
        grid-column: 2;

    }
    .heading-player{
        grid-row: 2;
        grid-column: 1;
    }

    .container-picked {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);

      

    }

    .player-picked {
grid-row: 1;
grid-column: 1;

  
        
    }

    .computer-picked {
        grid-row: 1;
        grid-column: 2;

      
  
        
    }



    .picked-scissors,
    .picked-rock,
    .picked-paper,
    .computer-rock,
    .computer-paper,
    .computer-scissors {
        width: 7rem;
        height: 7rem;

    }

    .picked-paper,
    .computer-paper {
        border: 15px #4B66F3 solid;
        box-shadow: 0px 5px #2945C2, inset 0em 5px #BABFD7;
        background-size: 3rem;
    }

    .picked-scissors,
    .computer-scissors {
        border: 15px #EAA51A solid;
        box-shadow: 0px 5px #C86B1A, inset 0em 5px #BABFD7;
        background-size: 3rem;
    }

    .picked-rock,
    .computer-rock {
        border: 15px #DC3853 solid;
        box-shadow: 0px 5px #9D1535, inset 0em 5px #BABFD7;
        background-size: 3rem;
    }

    .computer-none {
        width: 7rem;
        height: 7rem;
        background-size: 3rem;
    }

    /* pulsing circle */



.circle1, .circle2, .circle3, .circle1-comp, .circle2-comp, .circle3-comp {
    display: none!important;
}

    /* result and play again */

    h3 {
        font-size: 2rem;

    }

    .result {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 2;
        justify-self: center;
    }

}


/* mobile version */
@media only screen and (max-width: 411px) {

    /* score*/

    .wrapper {
        width: 80%;
        padding: 1rem 1rem .1rem 1rem;

    }
}