* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Barlow Semi Condensed', sans-serif;
    }
    
    body {
        background-image: radial-gradient(circle at 50%, hsl(214, 47%, 23%), hsl(237, 49%, 15%));
    }
    /* header container */
    
    .powers-score-container {
        display: flex;
        justify-content: space-between;
        margin: 2rem auto;
        width: 50%;
        border: hsl(217, 16%, 45%) 2px solid;
        border-radius: 10px;
    }
    
    .powers-score-container img {
        height: 4rem;
        margin-top: 1rem;
    }
    
    .powers {
        margin: .3rem 0rem 0rem 1rem;
    }
    
    .score-box {
        background-color: white;
        margin: 1rem 2rem 1rem 0rem;
        height: 4.5rem;
        text-align: center;
        width: 5rem;
        border-radius: 8px;
    }
    
    .score-box h3 {
        color: hsl(229, 64%, 46%);
        font-weight: 400;
        font-size: 1rem;
    }
    
    .score-box h2 {
        font-size: 2.5rem;
        color: hsl(229, 25%, 31%);
    }
    /* main container which containes whole buttons */
    
    main {
        background-image: url(images/bg-triangle.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 350px;
        width: 25rem;
        margin: auto;
    }
    
    .slide-in-elliptic-top-fwd {
        -webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    .bg-circle {
        width: 9rem;
        height: 9rem;
        background: white;
        border: 15px solid;
        border-radius: 50%;
        box-shadow: inset -2px -10px 2px 2px rgb(0 0 0 / 25%);
        cursor: pointer;
        display: inline-block;
        scale: 0.4;
    }
    
    .bg-circle:active {
        transform: translateY(4px);
    }
    
    .paper {
        border-color: hsl(230, 89%, 62%);
        margin-right: 2rem;
    }
    
    .rock {
        border-color: hsl(349, 71%, 52%);
    }
    
    .scissors {
        border-color: hsl(39, 89%, 49%);
    }
    
    .hide-btns {
        display: none;
    }
    /* main animation */
    
    .slideInUp {
        -webkit-animation-name: slideInUp;
        animation-name: slideInUp;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @-webkit-keyframes slideInUp {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            visibility: visible;
        }
        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
    
    @keyframes slideInUp {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            visibility: visible;
        }
        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
    /* Rules btn  & rule card */
    
    .rules-btn {
        width: 4.5rem;
        height: 1.5rem;
        color: hsl(0, 0%, 86%);
        background-color: transparent;
        border: 1px solid hsl(217, 16%, 45%);
        border-radius: 4px;
        font-size: 1rem;
        font-weight: 400;
        position: absolute;
        bottom: 3%;
        right: 2%;
    }
    
    .rules-btn:hover {
        color: black;
        background-color: white;
        cursor: pointer;
    }
    
    .rule-card {
        display: none;
        background: white;
        width: 25%;
        height: 20rem;
        text-align: center;
        border-radius: 0.5rem;
        position: absolute;
        right: 38%;
        top: 35%;
        animation: rule-card .4s cubic-bezier(.39, .575, .565, 1.000) both
    }
    
    @keyframes rule-card {
        0% {
            transform: scale(.5);
            transform-origin: 50% 0
        }
        100% {
            transform: scale(1);
            transform-origin: 50% 0
        }
    }
    /* toggler class */
    
    .rule-show {
        display: block;
        z-index: 1;
    }
    
    .cross {
        height: fit-content;
    }
    
    .rule-card-img {
        height: 13rem;
    }
    
    .rule-header {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
    }
    
    #close-rules {
        cursor: pointer;
    }
    
    .selection {
        display: none;
        justify-content: space-around;
        align-items: center;
        width: 65%;
        margin: auto;
        margin-top: 3rem;
    }
    
    .selection h2 {
        color: white;
    }
    
    .picked {
        text-align: center;
    }
    
    .picked h2 {
        margin-bottom: 5rem;
    }
    
    .result-container {
        text-align: center;
        /* transition: all 0.4s 1s linear; */
    }
    
    .play-btn {
        border: none;
        height: 3rem;
        border-radius: 5px;
        width: 11rem;
        color: hsl(229, 25%, 31%);
        cursor: pointer;
        margin-top: 2rem;
        font-size: 2rem;
        font-weight: 700;
    }
    
    .play-btn:hover {
        color: hsl(349, 71%, 52%);
    }
    /* play-btn animation */
    
    .tada {
        -webkit-animation-name: tada;
        animation-name: tada;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @-webkit-keyframes tada {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        10%,
        20% {
            -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%,
        50%,
        70%,
        90% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%,
        60%,
        80% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    
    @keyframes tada {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        10%,
        20% {
            -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%,
        50%,
        70%,
        90% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%,
        60%,
        80% {
            -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    
    .selection-shower {
        display: flex;
    }
    
    .text-focus-in {
        -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }
    
    @-webkit-keyframes text-focus-in {
        0% {
            -webkit-filter: blur(12px);
            filter: blur(12px);
            opacity: 0;
        }
        100% {
            -webkit-filter: blur(0px);
            filter: blur(0px);
            opacity: 1;
        }
    }
    
    @keyframes text-focus-in {
        0% {
            -webkit-filter: blur(12px);
            filter: blur(12px);
            opacity: 0;
        }
        100% {
            -webkit-filter: blur(0px);
            filter: blur(0px);
            opacity: 1;
        }
    }
    /* responsiveness */
    
    @media only screen and (max-width: 900px) {
        * {
            overflow: hidden;
        }
        .powers-score-container {
            width: 80%;
        }
        main {
            height: 300px;
            width: 25rem;
        }
        .rules-btn {
            left: 45%;
            bottom: 5%;
        }
        .rule-card {
            width: 70%;
            left: 15%;
        }
        .selection {
            width: 80%;
        }
    }
    
    @media only screen and (max-width: 750px) {
        .rules-btn {
            bottom: 5%;
            left: 44%;
        }
        .picked {
            display: flex;
            font-size: 0.8rem;
            flex-direction: column-reverse;
        }
        .result-container {
            position: absolute;
            bottom: 15%;
            left: 40%;
        }
        .picked h2 {
            margin-top: 4rem;
        }
        .play-btn {
            height: 2.5rem;
            font-size: 1.4rem;
            width: 8rem;
        }
    }
    
    @media only screen and (max-width: 600px) {
        .result-container {
            left: 35%;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .rules-btn {
            top: 80%;
        }
        .selection-shower {
            display: flex;
        }
        .selection {
            width: 100%;
        }
        .picked {
            display: flex;
            font-size: 0.8rem;
            flex-direction: column-reverse;
        }
        .result-container {
            position: absolute;
            top: 55%;
        }
    }
    
    @media only screen and (max-width: 300px) {
        .powers-score-container {
            width: 100%;
        }
        main {
            width: 20rem;
            height: 300px;
        }
        .bg-circle {
            width: 7rem;
            height: 7rem;
        }
        .rule-card {
            width: 90%;
            left: 5%;
        }
    }