html {
     font-family: 'New Amsterdam', sans-serif;
     color: #cd1316;
     /* background-image: repeating-linear-gradient(
          to right,
          #2d0000,
          #2d0000 50%,
          transparent 30px,
          transparent
        ); */
     background-size: 50px 50px;
     /* background-color: #eeeeee; */
     display: flex;
     flex-direction: column;
     height: 100%;
     max-height: 100vh;
     overflow: hidden;
 }

 .header__top {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     /* height: 80px; */
     background-color: white;
     /* padding: 8px 0;
      */
     z-index: 5;
     border-radius: var(--header-border-radius);
     box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px, rgba(0, 0, 0, 0.2) 0px 5px 5px -3px;
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
     padding: 0 !important;
     height: 80px;
     display: flex;
     align-items: center;
     align-content: center
 }

 .logo__img {
     width: 62px;
     height: 62px;
     margin-left: 120px;
     scale: 1.3;
     /* background-color: red; */
 }

 .disabledButton {
     opacity: 0.5;
     pointer-events: none;
     cursor: not-allowed;
     background: grey !important;
     /* display: none !important;
      bac */
 }

 .nav-btns {
        display: flex !important;
        flex-direction: row;
    }

 /* .margin__block {
     height: 110px;
 } */

 .title__text,
 .prize-text,
 .screen__title {
     color: #404b5b !important;
     /* margin-top: 120px; */
     margin-top: 0 !important;
     font-size: 66px;
     margin-bottom: 24px !important;
     line-height: 100%;
     margin-top: 158px !important;
 }

 .screen__title {
     margin-top: 60px !important;
 }

 .prize-text {
     margin: 0 !important;
 }

 .description__text {
     color: rgb(78, 90, 95) !important;
     font-size: 20px;
     max-width: 600px;
     text-align: center;
     margin: 0 auto;
 }

 body {
     font-family: 'New Amsterdam', sans-serif;
     /* font-family: 'New Amsterdam', sans-serif;
      */
     margin: 0;
     padding: 1rem;
     display: flex;
     flex-grow: 1;
     background-color: #eeeeee;
     /* background-color: #eeeeee;;
      */
     background-size: 50px 50px;
     /* background-color: #450101;
      */
     /* width: 100vw;
      max-width: 100vw; */
     min-height: 100dvh;
     height: 100dvh;
     color: #cd1316;
     /* background-image: repeating-linear-gradient(to right, #2d0000, #2d0000 50%, transparent 30px, transparent);
       */
     background-size: 50px 50px;
     background-color: #eeeeee;
     display: flex;
     flex-direction: column;
     height: 100vh;
     max-height: 100vh;
     overflow: hidden;
 }


 .lil-gui {
     --slider-knob-width: 5px;
     --number-color: #fff;
     --string-color: #fff;
     background: rgba(0, 0, 0, 0.5) !important;
 }

 /* .lil-gui { display: none !important; } */

 #spin-button,
 .button__cards, .card__btn, .pop-btn {
     position: relative;
     font-family: 'New Amsterdam', sans-serif;
     padding: 30px 40px;
     border: 0;
     background: #c91414;
     color: #ffffff;
     font-weight: 500;
     font-size: 2.5rem;
     line-height: 0rem;
     /* border-radius: 8px; */
     overflow: hidden;
     cursor: pointer;
     /* transition: 0.3s ease-in-out text-shadow, 0.3s ease-in-out transform,
        0.3s ease-in-out box-shadow; */
     margin-top: 48px;
     margin-bottom: 0;

     max-width: 360px;
     border-radius: 32px;
     width: fit-content !important;
     box-shadow: 0 8px 10px 1px hsl(var(--btn-shadow-color) / .14), 0 3px 14px 2px hsl(var(--btn-shadow-color) / .12), 0 5px 5px -3px hsl(var(--btn-shadow-color) / .2);
 }

 .pop-btn {
    margin: 0 auto !important;
 }

 .card__btn {
    margin: 0 auto !important;
    font-size: 16px !important;
    padding: 24px 40px !important;
    margin-top: 12px !important;
 }

 .logo__img {
     /* height: 100%; */
     height: 50px !important;
 }

 .logo__img img {
     /* width: 100%; */
     height: 100%;
     object-fit: contain;
     /* scale: 2; */
     user-select: none;
 }

 /* .button__cards {
     background: #ffffff;
     color: #cd1316;
 } */

 #spin-button:hover,
 .button__cards:hover {
     font-family: 'New Amsterdam', sans-serif;
     text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.562);
     transform: scale(1.01);
     box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);
 }

 /* .button__cards:hover {
     color: white;
     text-shadow: 0px 5px 10px rgba(199, 15, 15, 0.562);
     background: rgb(9, 211, 9);
     transform: scale(1.01);
     box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);
     ;
 } */

 #spin-button::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100px;
     width: 50%;
     height: 100%;
     transform: rotate(80deg);
     background: #ffffff77;
     filter: blur(10px);
     transition: 0.6s ease-in-out;
 }

 #spin-button:hover::after {
     left: 100%;
 }

 h3 {
     font-family: 'New Amsterdam', serif;
     font-weight: 400;
     font-style: normal;
     margin: 0;
     padding: 0;
     margin-bottom: 0.75rem;
     font-size: 2rem;
     color: #ffffff;
 }

 .logo {
     height: 12rem;
     position: absolute;
     top: 1.5rem;
     left: 1.5rem;
 }

 

 #properties {
     flex: 0 0 40%;
 }

 #canvas {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     position: relative;
     justify-content: flex-start;

 }

 #wheel {
     width: 50%;
     position: absolute;
     top: 30%;
 }

 #prize {
     font-family: 'New Amsterdam', sans-serif;
     /* background-color: #cd1316; */
     /* color: #cd1316; */
     width: 100%;
     max-width: 60vw;
     height: 60dvh !important;
     padding: 1rem;
     position: absolute;
     z-index: 1000;
     border-radius: 0 !important;
     font-size: 3rem;
     text-align: center;
     margin-top: -5rem;
     display: none;
     transition: 2.3s ease all;
     /* animation: blink 5s ease-in-out infinite; */
     flex-direction: column;
     justify-content: center;
     border: 3px solid #cd1316;
     background-color: #eeeeee;
     ;
     background-size: 50px 50px;
     /* background-color: #450101; */
     color: #cd1316;
     background-color: #eeeeee;
     border-radius: 10px !important;
     border: none !important;
     box-shadow: rgb(35 33 33 / 69%) 0px 5px 15px !important;
     align-items: center;

 }

 .prize-text {
     font-size: 48px;
 }

 @keyframes blink {
     0% {
         transform: scale(1.2);
     }

     20% {
         transform: scale(1.1);
     }

     40% {
         transform: scale(1);
     }

     60% {
         transform: scale(1.1);
     }

     80% {
         transform: scale(1);
     }

     100% {
         transform: scale(1.2);
     }
 }

 .blink {
     /* animation: blink 1s step-end infinite; */
 }

 #menu {
     position: absolute;
     top: 15rem;
     left: 2rem;
     z-index: 1000;
 }

 #menu form {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
 }

 #menu label {
     display: flex;
     cursor: pointer;
     font-weight: 500;
     position: relative;
     overflow: hidden;
     margin-bottom: 0.375em;
 }

 #menu label input {
     position: absolute;
     left: -9999px;
 }

 .lil-gui {
     display: none !important;
 }

 #menu label input:checked+span {
     background-color: #814141;
     color: white;
 }

 #menu label input:checked+span:before {
     box-shadow: inset 0 0 0 0.4375em #5c0000;
 }

 #menu label span {
     display: flex;
     align-items: center;
     padding: 0.375em 0.75em 0.375em 0.375em;
     border-radius: 99em;
     transition: 0.25s ease;
     color: #a35b5b;
 }

 #menu label span:hover {
     background-color: #d6d6e5;
 }

 #menu label span:before {
     display: flex;
     flex-shrink: 0;
     content: '';
     background-color: #fff;
     width: 1.5em;
     height: 1.5em;
     border-radius: 50%;
     margin-right: 0.375em;
     transition: 0.25s ease;
     box-shadow: inset 0 0 0 0.125em #5c0000;
 }

 .poster__mobile {
     display: none;
 }

 .nav-btns {
        display: flex !important;
        flex-direction: row !important;
    }

 @media (max-width: 768px) {
    .poster__mobile {
        display: block;
        height: 120px;
        width: 100%;

        margin-top: 18px;
        border-radius: 22px;
        overflow: hidden;
    }

    .poster__mobile img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
     body {
         padding: 1rem;
     }

     .lil-gui {
         background: rgba(0, 0, 0, 0.5) !important;
     }

     #wheel {
         width: 90%;
         height: auto;
         margin-top: 1rem;
     }

     .header__top {
         /* padding: 8px; */


     }

     .logo__img {}

     #wheel {
         width: 180%;
         position: absolute;
         top: 30%;
     }


     #prize {
         right: auto;
     }

     .logo {
         top: 3rem;
         height: 10rem;
         position: unset;
         margin-top: 2rem;
         margin-bottom: 1.5rem;
     }

     #menu {
         position: unset;
         background-color: rgba(0, 0, 0, 0.5);
         width: 85%;
         border-radius: 1rem;
         margin-top: 2rem;
         padding: 1rem;
     }
 }

 /* Додано стилі для поекранного попапу */

 .overlay {
     font-family: 'New Amsterdam', sans-serif;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 4 !important;
 }

 .popup {
     font-family: 'New Amsterdam', sans-serif;
     background: white;
     width: 100vw;
     height: 100dvh;
     /* max-width: 500px; */
     /* border-radius: 10px; */
     overflow: hidden;
     transition: all 0.3s ease;
     color: black;
 }

 .screens {
     font-family: 'New Amsterdam', sans-serif;
     /* font-size: 36px; */
     display: flex;
     width: 100%;
     height: 100%;
     transition: transform 0.5s ease;
 }

 .screen {
     font-family: 'New Amsterdam', sans-serif;
     width: 100%;
     padding: 8px;
     flex-shrink: 0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* border: 3px solid #cd1316; */
     background-color: #eeeeee;
     ;
     background-size: 50px 50px;
     background-color: #450101;
     color: #cd1316;
     background-color: #eeeeee;
     overflow: hidden;
 }

 .screen__content {
     margin-top: 52px !important;
 }

 /* .screen__cards {
    display: flex;
    width: 100%;
        overflow-x: scroll;
 } */

 .screen__cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     padding: 20px;
     max-width: 860px;
     margin: 0 auto;
     padding-top: 0 !important;
 }

 #cardInfoPopup, #cardInfoPopup2 {
    font-family: 'New Amsterdam', sans-serif;
     /* background-color: #ffffff; */
     width: 100%;
     max-width: 90vw;
     height: 90dvh !important;
     padding: 1rem;
     position: absolute;
     box-shadow: rgba(37, 34, 34, 0.35) 0px 5px 15px;
     z-index: 1000;
     border-radius: 1rem;
     font-size: 3rem;
     text-align: center;
     margin-top: -5rem;
     display: none;
     transition: 2.3s ease all;
     /* animation: blink 15s ease-in-out infinite; */
     flex-direction: column;
     justify-content: center;
     position: fixed;
     top: 50%;
     left: 50%;
    transform: translate(-50%, -42%) !important;

     background-color: #eeeeee !important;
 }



 .card-info-popup__close {
    position: absolute;
    top: 32px;
    right: 32px;
    cursor: pointer;
 }

 .info-btn {
    color: #e7c209;
    text-decoration: underline;
    cursor: pointer;
    transition: 0.3s ease all;
 }

 .info-btn:hover {
    opacity: 0.7;
 }

 .card__info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
 }

 .card__info-btn img {
    width: 100%;
    height: 100%;
 }

 .card__info-btn img {
    width: 100%;
    height: 100%;
 }

 .card__info__img {
    width: 100% !important;
    height: 100% !important;
 }



 .card {
    position: relative;
     font-family: 'New Amsterdam', sans-serif;
     border: 2px solid #ccc;
     padding: 15px;
     margin: 10px 0;
     min-width: calc(100% - 80px);
     /* border-radius: 8px; */
     cursor: pointer;
     transition: 0.3s;
     width: 100%;
     margin-right: 20px;
     display: flex;
     flex-direction: column;

     color: white;
     padding: 20px;
     border-radius: 10px;
     /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
     box-shadow: rgba(37, 34, 34, 0.35) 0px 5px 15px;
     text-align: center;
     width: calc(100% - 20px);
     height: 25vh !important;
     width: 100%;
     height: 100%;
     object-fit: contain;
     margin: 0 !important;
     min-height: 226px;

     width: calc(100% - 40px) !important;
     justify-content: space-between
 }

 .card img {
     height: auto;
     /* height: 50%; */
     max-height: 50%;
     object-fit: contain;
     /* width: fit-content; */
     /* width: 100%;    */
        max-width: 192px;
     margin: 0 auto;
 }

 .card_title {
    margin: 0 !important;
     font-family: 'New Amsterdam', sans-serif;
     margin-top: 24px !important;
     font-size: 24px;
     color: rgb(78, 90, 95);
     /* font-weight: 700; */
 }

 .card_description {}

 .card_description {
    margin: 0 !important;
     font-size: 14px !important;
     color: rgb(78, 90, 95);
     margin-top: 16px !important;
 }


 .card.selected {
     background: #c91414;
     /* border-color: #2b0404; */
     color: white !important;

 }

 .card-info-image {
  border-radius: 22px !important;
  max-width: 600px;
  /* box-shadow: rgba(37, 34, 34, 0.35) 0px 5px 15px; */
}

.card img {
    /* box-shadow: rgba(37, 34, 34, 0.35) 0px 5px 15px; */
    
}




 .screen__title {
     font-size: 46px;
     text-align: center;
 }

 .nav-btns {
    margin: 24px 0;
    margin-bottom: 40px;
     /* margin: 32px 0; */
     display: flex;
     justify-content: space-between;
     display: flex;
     flex-direction: column;
 }

 .screens__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    /* height: 30px; */
    width: 100%;
    background-color: #cd1314;
    padding: 4px;
    display: flex;
    font-size: 12px;
    color: #eeeeee;
        width: 98vw;
    max-width: 98vw;
    display: none;
    flex-direction: column;
    align-items: center;
 }


 .card.selected .card__btn {
  background-color: #eeeeee;
  color: #c91414;
}

.card.selected .card_title {
  /* background-color: #eeeeee; */
  color: #ffffff;
}


.card.selected.card_title {
  /* background-color: #eeeeee; */
  color: #ffffff;
}

/* 


 /* Всі попередні стилі */
 html {
     font-family: 'New Amsterdam', sans-serif;
     color: #cd1316;
     background-size: 50px 50px;
     display: flex;
     flex-direction: column;
     height: 100%;
     max-height: 100vh;
     overflow: hidden;
 }

 .header__top {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: #cd1314;
     padding: 8px 62px;
 }

 .logo__img {
     width: 62px;
     height: 62px;
 }

 .disabledButton {
     opacity: 0.5;
     pointer-events: none;
     cursor: not-allowed;
     background: grey !important;
 }

 .margin__block {
     height: 110px;
 }

 .title__text {
     font-family: 'New Amsterdam', sans-serif;
     /* margin-top: 0 !important; */
     font-size: 72px;
 }

 .title__text.red {
  color: #c91414 !important;
}


 body {
     font-family: 'New Amsterdam', sans-serif;
     margin: 0;
     padding: 1rem;
     display: flex;
     flex-grow: 1;
     background-color: #eeeeee;
     ;
     background-size: 50px 50px;
     background-color: #450101;
     min-height: 100dvh;
     height: 100dvh;
     color: #cd1316;
     background-color: #eeeeee;
     flex-direction: column;
     max-height: 100vh;
     overflow: hidden;
 }

 .lil-gui {
     --slider-knob-width: 5px;
     --number-color: #fff;
     --string-color: #fff;
     background: rgba(0, 0, 0, 0.5) !important;
     display: none !important;
 }

 #spin-button,
 .pop-btn {
     position: relative;
     font-family: 'New Amsterdam', sans-serif;
     padding: 35px 70px;
     border: 0;
     background: #cd1316;
     color: #ffffff;
     font-weight: 500;
     font-size: 2.5rem;
     line-height: 0rem;
     overflow: hidden;
     cursor: pointer;
     margin-top: 2rem;
     margin-bottom: 32px;
     width: 100%;
 }

 .pop-btn {
     margin-bottom: 0 !important;
 }

 .btn-back {
     background-color: #ffffff;
     color: #c91414;
 }

 .btn-back {
     /* margin-bottom: 18px !important; */
 }

 .pop-btn {
     /* max-width: 150px; */
 }

 /* .button__cards {
     background: #ffffff;
     color: #c91414;
 } */

 #spin-button:hover,
 .pop-btn:hover {
     text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.562);
     transform: scale(1.01);
     box-shadow: inset 0px 0px 10px rgba(255, 0, 0, 0.575);
 }

 /* .button__cards:hover {
     color: white;
     text-shadow: 0px 5px 10px rgba(199, 15, 15, 0.562);
     background: rgb(9, 211, 9);
 } */

 #spin-button::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100px;
     width: 50%;
     height: 100%;
     transform: rotate(80deg);
     background: #ffffff77;
     filter: blur(10px);
     transition: 0.6s ease-in-out;
 }

 .pop-btn::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100px;
     width: 50%;
     height: 100%;
     transform: rotate(80deg);
     background: #ffffff77;
     filter: blur(10px);
     transition: 0.6s ease-in-out;
 }

 #spin-button:hover::after {
     left: 100%;
 }

 .pop-btn:hover::after {
     left: 100%;
 }

 h3 {
     font-family: 'New Amsterdam', serif;
     font-weight: 400;
     font-style: normal;
     margin: 0;
     padding: 0;
     margin-bottom: 0.75rem;
     font-size: 2rem;
     color: #ffffff;
 }

 .logo {
     height: 12rem;
     position: absolute;
     top: 1.5rem;
     left: 1.5rem;
 }

 #properties {
     flex: 0 0 40%;
 }

 #canvas {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     padding: 1rem;
     position: relative;
 }

 #wheel {
     width: 50%;
     position: absolute;
     top: 30%;
 }

 #prize {
     font-family: 'New Amsterdam', sans-serif;
     /* background-color: #ffffff; */
     width: 100%;
     max-width: 90vw;
     height: 90dvh !important;
     padding: 1rem;
     position: absolute;
     box-shadow: rgba(236, 224, 224, 0.35) 0px 5px 15px;
     z-index: 1000;
     border-radius: 1rem;
     font-size: 3rem;
     text-align: center;
     margin-top: -5rem;
     display: none;
     transition: 2.3s ease all;
     /* animation: blink 15s ease-in-out infinite; */
     flex-direction: column;
     justify-content: center;
     position: fixed;
     top: 50%;
     transform: translateY(-40%);
 }

 @keyframes blink {
     0% {
         transform: scale(1);
     }

     20% {
         transform: scale(1.02);
     }

     40% {
         transform: scale(1.03);
     }

     60% {
         transform: scale(1.02);
     }

     80% {
         transform: scale(1);
     }

     100% {
         transform: scale(1);
     }
 }

 .blink {
     animation: blink 1s step-end infinite;
 }

 #menu {
     position: absolute;
     top: 15rem;
     left: 2rem;
     z-index: 1000;
 }

 #menu form {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
 }

 #menu label {
     display: flex;
     cursor: pointer;
     font-weight: 500;
     position: relative;
     overflow: hidden;
     margin-bottom: 0.375em;
 }

 #menu label input {
     position: absolute;
     left: -9999px;
 }

 #menu label input:checked+span {
     background-color: #814141;
     color: white;
 }

 #menu label input:checked+span:before {
     box-shadow: inset 0 0 0 0.4375em #5c0000;
 }

 #menu label span {
     display: flex;
     align-items: center;
     padding: 0.375em 0.75em 0.375em 0.375em;
     border-radius: 99em;
     transition: 0.25s ease;
     color: #a35b5b;
 }

 #menu label span:hover {
     background-color: #d6d6e5;
 }

 #menu label span:before {
     display: flex;
     flex-shrink: 0;
     content: '';
     background-color: #fff;
     width: 1.5em;
     height: 1.5em;
     border-radius: 50%;
     margin-right: 0.375em;
     transition: 0.25s ease;
     box-shadow: inset 0 0 0 0.125em #5c0000;
 }




 .fullscreen-glitch {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: radial-gradient(circle, #fefefe 0%, #ffd70010 100%);
     opacity: 0;
     pointer-events: none;
     z-index: 9999;
     animation: glitchFlash 0.6s ease-in-out;
 }


 .fullscreen-glitch2 {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: radial-gradient(circle, #a31111 0%, #c9ac0c10 100%);
     opacity: 0;
     pointer-events: none;
     z-index: 9999;
     animation: glitchFlash 0.1s ease-in-out;
 }

 #prize .full__popup__size {
     display: none;
 }


 .full__popup__size {
     /* width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    transition: all 1.2s ease; */
 }

 @keyframes glitchFlash {
     0% {
         opacity: 0;
     }

     10% {
         opacity: 0.4;
     }

     20% {
         opacity: 0.2;
     }

     30% {
         opacity: 0.3;
     }

     50% {
         opacity: 0.1;
     }

     70% {
         opacity: 0.4;
     }

     100% {
         opacity: 0;
     }
 }

 #number {
     max-width: 100%;
     width: webkit-fill-available !important;
 }



 .number__input {
     width: -webkit-fill-available !important;
     max-width: 100% !important;
     min-width: 100% !important;
     display: block;
     min-width: -webkit-fill-available;
 }

 .pop__title_fix {
     font-family: 'New Amsterdam', sans-serif;
    margin: 0 !important;
}

.pop__text_fix {
     font-family: 'New Amsterdam', sans-serif;
    margin: 0 !important;
    margin-top: 24px !important;
}

.description__subtitle_fix {
     font-family: 'New Amsterdam', sans-serif;
        margin: 24px auto !important;
        font-size: 28px;
     }

      .card_description {
        margin-top: 32px    !important;
        font-size: 32px !important;
        text-align: center;
     }

     .red {
        color: #c91414;
     }

     .creen__title_2 {
        margin-top: 90px !important;
     }


     .card img {
        border-radius: 12px;
     }


    .screen3 {
  position: relative;
  overflow: hidden;
}

.screen3::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('confety.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.5; /* якщо хочеш затемнити */
}
 @media (max-width: 768px) {
     body {
         padding: 1rem;
     }

     .screens__footer  {
        display: flex;
     }

     #wheel {
         width: 180%;
         height: auto;
         margin-top: 1rem;
     }

     .header__top {
         padding: 8px;
     }

     .logo {
         top: 3rem;
         height: 10rem;
         position: unset;
         margin-top: 2rem;
         margin-bottom: 1.5rem;
     }

     #menu {
         position: unset;
         background-color: rgba(0, 0, 0, 0.5);
         width: 85%;
         border-radius: 1rem;
         margin-top: 2rem;
         padding: 1rem;
     }


     .title__text {
         font-size: 48px !important;
     }

     #spin-button {
         margin: 0 !important;
         margin-top: 12px !important;
     }

     #prize {
         transform: translateY(-38%);
     }

     .logo__img {
         width: 42px;
         height: 42px;
     }

     .screen__content {
         margin: 0 !important;
         margin-top: 48px !important;
     }

     .screen__title {
         font-size: 42px;
         margin: 0 !important;
         margin-top: 12px !important;
         margin-bottom: 12px !important;
     }

     .card_title {
         margin-top: 12px !important;
     }

     .card_description {
         margin-top: 12px !important;
     }

     .logo__img {
         margin-left: 0 !important;
         width: fit-content;
         height: 32px !important;
     }

     .header__top {
         justify-content: center;
         height: 66px !important;
     }

     .title__text,
     .prize-text,
     .screen__title  {
         font-size: 36px !important;
         margin-top: 104px !important;
     }

     .screen__title, .prizeText {
        font-size: 24px !important;
        margin-top: 28px !important;
     }

     .prize-text {
         margin: 0 !important;
     }

     .description__text {
         font-size: 16px !important;
     }

     .screen__cards {
        display: flex;
        gap: 4px;
        overflow: scroll;
        padding: 0;
     }

    .card {
        min-width: auto !important;
        gap: 10px;

    }



    .card__info-btn {
        top: 2%;
        right: 2%;
        width: 16px;
        height: 16px;
    }

    .card-info-popup__close {
        top: 12px;
        right: 12px
    }

    .pop__title_fix {
        margin-top: 32px !important;
    }

    .pop__text_fix {
        margin-top: 28px !important;
    }

    .nav-btns {
        display: flex;
        flex-direction: row;
    }

     #spin-button,
     .button__cards,
     .pop-btn {
         font-size: 16px !important;
         height: 48px !important;
         padding: 0 40px !important;
     }

     #cardInfoPopup, #cardInfoPopup2 {
        transform: translate(-50%, -38%) !important;
     }

     .card_description {
        margin-top: 24px    !important;
        font-size: 22px !important;
        text-align: center;
     }

     .red {
        color: #c91414;
     }

     .creen__title_2 {
        margin-top: 90px !important;
     }

     .card__info__img {
        max-height: 100% !important;
     }


     #resultCardImage {
        width: 50% !important;
     }

     

 }