body {
    background-color: #242424;
}

h1 {
    color: wheat;
    text-align: center;
}

.selDiv {
    height: 200px;
    width: 75%;
    border: 2px solid whitesmoke;
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

.choice {
    border-radius: 50%;
    height: 200px;
    width: 200px;
    background-size: contain;
    transition: all 0.2s ease-in-out;
}

#rock{
    background-image: url(rock.jpg);
}
#paper{
    background-image: url(paper.jpg);
}
#scissor{
    background-image: url(scissor.jpg);
}
#rock:hover{
    background-blend-mode:soft-light;
    background-color: rgba(255, 192, 215, 0.5);
}
#paper:hover{
    background-blend-mode:soft-light;
    background-color: rgba(135, 207, 235, 0.5);
}
#scissor:hover{
    background-blend-mode:soft-light;
    background-color: rgba(255, 255, 0, 0.35);
}


.iwon{
    height: 100px;
    width: 300px;
    background-color: green;
    color: white;
    border: 2px solid black;
    border-radius: 50px;
    margin: auto;
    margin-top: 20px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iwonPlayed{
    height: 25px;
    width: 200px;
    font-size: 20px;
}

.ilost{
    background-color: red;
}
.itie{
    background-color: yellow;
    color: black;
}

.scoreBoard {
    background-image: url(ScoreBoard.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 300px;
    width: 300px;
    margin: auto;
    display: flex;
    justify-content: center;


}

.sbs1 {
    color: rgba(245, 245, 245, 0.75);
    text-align: center;
    transform: rotateY(45deg);
    transform: rotateZ(4deg);
    font-size: 16px;
    position: relative;
    top: 24px;
    left: 10px;
}

.sbs1s {
    top: 20px;
    left: -60px;
    font-size: 50px;
}

.sbs2 {
    color: rgba(245, 245, 245, 0.75);
    text-align: center;
    transform: rotateY(45deg);
    transform: rotateZ(4deg);
    font-size: 14px;
    position: relative;
    top: 35px;
}

.sbs2s {
    top: 20px;
    left: -60px;
    font-size: 50px;
}

.ctrl {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

/* CSS */
.ng {
    --b: 3px;
    /* border thickness */
    --s: .45em;
    /* size of the corner */
    --color: #9cabcd;

    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
        conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .6em;
    font-size: 16px;

    border: 0;

    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.ng:hover,
.ng:focus-visible {
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
}

.ng:active {
    background: var(--color);
    color: #fff;
}