* {
        margin: 0;
        padding: 0;
      }
      .wapper {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(#1f3756, #141539);
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: -1;
      }
      .content {
        max-width: 800px;
        width: 100%;
        margin: auto;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background: linear-gradient(#1f3756, #141539);
        background: #000;
        position: relative;
        /* z-index: 1; */
        /* border: 4px solid; */
        /* box-shadow: 0px 2px 10px 2px #2929dc; */
      }

      @property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      .content::before,
      .content::after {
        content: "";
        max-width: 800px;
        width: 100%;
        height: 100%;
        padding: 1px;
        border-radius: 10px;
        position: absolute;
        background: linear-gradient(var(--angle), red, rgb(78, 233, 78), blue);
        /* background: linear-gradient(var(--angle),transparent 90%,blue); */
        z-index: -1;
        animation: 3s spin linear infinite;
        transition: opacity 0.3s ease-in-out;
      }
      .content::before {
        filter: blur(1.5rem);
        opacity: 0.8;
      }

      @keyframes spin {
        from {
          --angle: 0deg;
        }
        to {
          --angle: 360deg;
        }
      }
      .game {
        width: 100%;
        height: calc(100% - 140px);
        display: flex;
        justify-content: space-around;
      }
      .hidden {
        display: none !important ;
      }

      .imgfix {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #ffffff;
        font-size: large;
        font-weight: 700;
        gap: 10px;
        box-sizing: border-box;
      }
      .imgfix img {
        filter: invert(100%);
      }
      #user-choice {
        width: 110px;
        height: 40px;
        font-size: 2rem;
        border: 2px solid rgb(0, 0, 192);
        padding: 10px 20px;
        border-radius: 10px;
        text-align: center;
      }
      #Computer-choice {
        width: 110px;
        height: 40px;
        font-size: 2rem;
        border: 2px solid rgb(176, 4, 4);
        border-radius: 10px;
        text-align: center;
        padding: 5px 20px;
      }
      .second-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: auto;
        border-radius: 10px;
        color: #97ae23;
        padding: 10px;
      }
      button {
        font-size: 1.5rem;
        padding: 4px 10px;
        background: #000;
        color: #ffffff;
        border: 2px solid;
        border-radius: 5px;
        transform: scale(1.5);
        transition: 100ms ease-in-out;
      }
      button:hover {
        transform: scale(2);
      }
      .btn {
        width: 100%;
        height: calc(100% - 140px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 95px;
        margin-top: 80px;
        position: relative;
      }
      .btn .img {
        width: 300px;
        height: 300px;
        border: 2px solid;
        border-radius: 100%;
        position: absolute;
        top: 40px;
      }

      #rock {
        position: absolute;
        top: 90px;
        color: brown;
        background: rgb(35, 8, 4);
        cursor: pointer;
        z-index: 1;
      }
      #papper {
        cursor: pointer;
        color: cornflowerblue;
        background: #02113b;
        margin-right: 40px;
        z-index: 1;
      }
      #scissor {
        cursor: pointer;
        color: rgb(20, 143, 55);
        background: #141539;
        z-index: 1;
      }

      .header {
        width: 100%;
        height: 140px;
        padding: 10px;
        display: flex;
        border: 2px solid rgb(173, 173, 173);
        border-radius: 10px;
        box-sizing: border-box;
        justify-content: space-around;
      }

      .header .score-bar {
        width: 140px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 5px;
        padding: 17px;
        margin: 10px;
        color: #000;
        box-sizing: border-box;
      }
      .score-bar div {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: center;
        font-family: Barlow Semi Condensed, sans-serif;
        box-sizing: border-box;
      }
      .score-bar div span:nth-child(1) {
        font-size: 1.3rem;
        letter-spacing: 3px;
        color: rgb(114, 114, 246);
        font-weight: 00;
      }
      .score-bar div span:nth-child(2) {
        font-size: 3rem;
        font-weight: 600;
      }
      .restart {
        width: 75%;
        padding: 15px 19px;
        background: #3aa9e2;
        color: #112254;
        border-radius: 10px;
        align-self: center;
        font-size: large;
        font-weight: 700;
        font-family: sans-serif;
        margin-top: 10px;
        cursor: pointer;
        z-index: 1;
        transition: 100ms ease-in-out;
      }

      .restart:hover {
        background: #6ec1f7;
        transform: scale(1.1);

      }

      @media screen and (max-width: 500px) {
        #rock {
          top: 90px;
        }
      }