@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: white;
}

body{
    height: 100vh;
    width: 100vw;
    background: radial-gradient(ellipse at top, hsl(214, 47%, 23%),hsl(237, 49%, 15%));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1440px;
    margin: 40px 0;
    gap: 40px;
}

main>section:first-child{
    height: 150px;
    width: 70%;
    border: 1px solid hsl(217, 16%, 45%);
    display: flex;
    flex-direction: row;
    padding: 20px;
    border-radius: .75rem;
}

main>section:first-child div:first-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main>section:first-child .title{
    font-size: 2.5rem;
    word-break: break-word;
    text-transform: uppercase;
    line-height: 2rem;
    width: 180px;
}

main>section:first-child>div:nth-child(2){
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
main>section:first-child>div:nth-child(2)>div{
    background: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:hsl(229, 64%, 46%);
    text-transform: uppercase;
    width: 150px;
    height: 100%;
    font-size: 1.25rem;
    border-radius: 1rem;
}
main>section:first-child>div:nth-child(2)>div>span{
    color: hsl(229, 25%, 31%);
    font-size: 5rem;
    line-height: 4.5rem;
}

.board  {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
    background-image: url(images/bg-triangle.svg);
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    background-clip: border-box;
}

.board>div{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
}
.board.selected>div{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
}
.board>div:nth-child(3){
    width: 100%;
}

.board>div>div{
    background: whitesmoke;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.board>div>div:hover{
    cursor: pointer;
}

.board.selected>div>div{
    width: 300px;
    height: 300px;
}

.board>div>div.temp{
background-color: rgba(0, 0, 0, .1);
}

.paper{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 1.5rem hsl(230, 89%, 65%),0 .5rem 0 1.5rem hsl(230, 89%, 62%);
}
.rock{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 1.5rem hsl(349, 70%, 56%),0 .5rem 0 1.5rem hsl(349, 71%, 52%);
}
.scissors{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 1.5rem hsl(40, 84%, 53%),0 .5rem 0 1.5rem  hsl(39, 89%, 49%);
}

.selected .paper{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(230, 89%, 65%),0 .5rem 0 2rem hsl(230, 89%, 62%);
}
.selected .rock{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(349, 70%, 56%),0 .5rem 0 2rem hsl(349, 71%, 52%);
}
.selected .scissors{
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(40, 84%, 53%),0 .5rem 0 2rem  hsl(39, 89%, 49%);
}

.winner .paper{
    transition: box-shadow 1s;
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(230, 89%, 65%),0 .5rem 0 2rem hsl(230, 89%, 62%), 0 0 0 5rem rgba(255, 255, 255, .1),0 0 0 10rem rgba(255, 255, 255, .075),0 0 0 14rem rgba(255, 255, 255, .050);
}
.winner .rock{
    transition: box-shadow 1s;
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(349, 70%, 56%),0 .5rem 0 2rem hsl(349, 71%, 52%), 0 0 0 5rem rgba(255, 255, 255, .1),0 0 0 10rem rgba(255, 255, 255, .075),0 0 0 14rem rgba(255, 255, 255, .050);
}
.winner .scissors{
    transition: box-shadow 1s;
    box-shadow:inset 0em .75em rgb(0, 0, 0,0.1), 0 0 0 2rem hsl(40, 84%, 53%),0 .5rem 0 2rem  hsl(39, 89%, 49%), 0 0 0 5rem rgba(255, 255, 255, .1),0 0 0 10rem rgba(255, 255, 255, .075),0 0 0 14rem rgba(255, 255, 255, .050);
}

.title{
    display: flex;
    flex-direction: row;
    width: 70%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
.title>h2{
    width: 50%;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 2px ;
    font-weight: 300;
}

main > section:nth-child(2).selected > div.selected{
    pointer-events: none;
}

.board.selected{
    width: 90%;
    background-size: 0;
}

.board.waiting{
    background-size: 0;
}

main > section:nth-child(2).selected > div.ia-selected{
    transition: all .2s;
}

.board>div>div>img{
    height: 50%;
    width: fit-content;
    display: flex;
    pointer-events: none;
}

.board.selected>div{
    width: 33.33%;
}

.board.selected .result>h2{
    text-transform: uppercase;
    font-size: 4rem;
}

.board.selected .result>button{
    width: 70%;
    padding: 10px 20px;
    font-size: 1rem;
    text-transform: uppercase;
    color: hsl(229, 25%, 31%);
}

.board.selected .result>button:hover{
    cursor: pointer;
    color: crimson ;
}


main>div:last-child{
    display: flex;
    flex-direction: column;
    width: 90%;
    align-items: flex-end;
}

main>div>button{
    width: fit-content;
    background: transparent;
    border: 1px solid  hsl(217, 16%, 45%);
    padding: 5px 30px;
    border-radius: .5rem;
    text-transform: uppercase;
    margin: 25px 0;
}
main>div>button:hover{
    transition: background .3s;
    cursor: pointer;
    background: rgb(255, 255, 255,0.4);
}

.attribution{
    display: none;
}

.modal.show{
    display: flex;
    /* background-color: rgba(0, 0, 0,0.4); */
}

.modal{
    transition: background-color 2s;
    display: none;
    position: absolute;
    /* background-color: hsla(0, 0%, 0%, 0); */
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background 10s;
}

.modal.show::before{
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content{
    background: whitesmoke;
    padding: 20px 15px;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 1;
}

.modal header{
    display: flex;
    flex-direction: row;
}
.modal header>div{
    width: 100%;
    text-transform: uppercase;
}
.modal h3{
    font-size: 2rem;
    color: hsl(229, 25%, 31%);
}

.modal header>button{
    border: none;
    background: transparent;
}

.modal header>button:hover{
    cursor: pointer;
}

/* @media screen and (max-width: 900px){
    .board{
        background-size: 60%;
    }
} */



@media screen and (max-width: 900px){

    main>section:first-child .title{
        font-size: 1rem;
        width: 70px;
        line-height: .9rem;
    }
    main{
        margin: 40px 0;
        padding: 20px 0;
    }
    div.title{
        width: 90%;
        height: 100px;
    }
    div.title>h2{
        font-size: 1rem;
    }
    main > section:first-child > div:nth-child(2) > div{
        width: 90px;
        font-size:1rem;
        border-radius: .5rem;
    }

    main > section:first-child{
        height: 100px;
        width: 90%;
        padding: 10px 20px;
    }

    main > section:first-child > div:nth-child(2) > div > span{
        font-size: 3rem;
        line-height: 2.4rem;
    }

    .board{
        width: 90%;
        background-size: 65% 50%;
    }
    .board>div{
        height: 200px;
    }
    .board>div>div{
        width: 100px;
        height: 100px;
    }

    .board.selected > div:nth-child(1){
        width: 50% ;
    }
    
    .board.selected > div:nth-child(3){
        width: 50% ;
    }
    .board.selected > div:nth-child(2){
        width:100% ;
        height: 150px;
    }
    .board.selected > div > div{
        width: 100px;
        height: 100px;
    }

    .result{
        order: 3;
        width: 100%;
    }

    .ia-selected{
        order: 2;
    }

    .selected .paper{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(230, 89%, 65%),0 .5rem 0 .75rem hsl(230, 89%, 62%);
    }
    .selected .rock{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(349, 70%, 56%),0 .5rem 0 .75rem hsl(349, 71%, 52%);
    }
    .selected .scissors{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(40, 84%, 53%),0 .5rem 0 .75rem  hsl(39, 89%, 49%);
    }

    .paper{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .5rem hsl(230, 89%, 65%),0 .5rem 0 .5rem hsl(230, 89%, 62%);
    }
    .rock{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .5rem hsl(349, 70%, 56%),0 .5rem 0 .5rem hsl(349, 71%, 52%);
    }
    .scissors{
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .5rem hsl(40, 84%, 53%),0 .5rem 0 .5rem  hsl(39, 89%, 49%);
    }

    .winner .paper{
        transition: box-shadow 1s;
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(230, 89%, 65%),0 .5rem 0 .75rem hsl(230, 89%, 62%), 0 0 0 2rem rgba(255, 255, 255, .1),0 0 0 4rem rgba(255, 255, 255, .075),0 0 0 6rem rgba(255, 255, 255, .050);
    }
    .winner .rock{
        transition: box-shadow 1s;
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(349, 70%, 56%),0 .5rem 0 .75rem hsl(349, 71%, 52%), 0 0 0 2rem rgba(255, 255, 255, .1),0 0 0 4rem rgba(255, 255, 255, .075),0 0 0 6rem rgba(255, 255, 255, .050);
    }
    .winner .scissors{
        transition: box-shadow 1s;
        box-shadow:inset 0em .25em rgb(0, 0, 0,0.1), 0 0 0 .75rem hsl(40, 84%, 53%),0 .5rem 0 .75rem  hsl(39, 89%, 49%), 0 0 0 2rem rgba(255, 255, 255, .1),0 0 0 4rem rgba(255, 255, 255, .075),0 0 0 6rem rgba(255, 255, 255, .050);
    }
}