@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html, body { font-family: "Roboto", sans-serif; font-weight: 400; color: #2c2c2c; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: #f9f9f9; position: relative; } p { line-height: 160%; } h1 { font-size: 40px; font-weight: 700; text-align: center; margin: 28px 0; } h2 { font-size: 34px; font-weight: 700; margin: 22px auto; text-align: center; border-bottom: 2px solid #ff6432; max-width: -moz-fit-content; max-width: fit-content; } h3 { font-size: 28px; font-weight: 700; margin: 18px 0; } ol { list-style: decimal; padding: 18px 28px; } ul { list-style: disc; padding: 18px 28px; } li { line-height: 160%; } ol li::marker, ul li::marker { color: #ff6432; font-weight: 700; } table { border-collapse: collapse; width: 100%; overflow-x: auto; margin: 22px 0; overflow: auto; } table tr td, table tr th { border: 1.5px solid #2c2c2c; padding: 18px; } table tr th { background: linear-gradient(90deg, #ff4505 0%, #bc2f03 100%); color: #fff; font-size: 20px; text-align: center; } table tr td:hover { background-color: rgba(130, 130, 130, 0.12); } .top-bar { position: sticky; width: 100%; top: 0; left: 0; z-index: 99; background: #1a1a1a; padding: 22px 0; } .top-bar .wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .top-bar .wrapper .brand { flex: 0 0 210px; height: 77px; } .top-bar .wrapper .user-actions { display: flex; gap: 18px; } .top-bar .wrapper .user-actions .action-login { background: linear-gradient(90deg, #ff4505 0%, #bc2f03 100%); } .top-bar .wrapper .user-actions .action-login:hover { background: #ff6432; background: linear-gradient(90deg, #ff4505 0%, #ff6432 100%); } .top-bar .wrapper .user-actions .action-signup { border: 1.5px solid #ff4505; } .top-bar .wrapper .user-actions .action-signup:hover { background: #ff4505; } .action { border-radius: 12px; display: flex; justify-content: center; align-items: center; gap: 12px; width: 160px; padding: 12px 18px; border-radius: 10px; transition: all 0.4s; color: #fff; } .content-area { height: 100%; flex: 1 1 auto; padding: 0 0 55px; } .content-area .hero-section { padding: 55px 0; position: relative; background-color: #1c1e22; background: linear-gradient(95deg, #d8b8b8 0.5%, #ff6432); background-position: 100%; background-size: contain; height: 410px; display: flex; z-index: 0; } .content-area .hero-section::before { content: ""; background: url(../img/coins.png) center/cover no-repeat; width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: -1; opacity: 0.35; } .content-area .hero__image { flex: 1; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.55); border-radius: 95px; padding: 55px; box-shadow: 0 0 22px #ff4505; } .content-area .hero__image img { width: 210px; } .content-area .hero-section .wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 35px; margin: 0 55px; } .content-area .hero-section .block { flex: 0 0 62%; } .content-area .hero-section .block img { animation: transform 5s infinite; max-width: 410px; } .content-area .hero__content { display: flex; flex-direction: column; gap: 22px; font-size: 21px; } .content-area .hero__content h1 { margin: 0; text-align: left; } .content-area .hero__img { text-align: center; } .content-area .hero__button a { position: relative; transition: all 0.4s ease-in-out; background: #e60000; max-width: 310px; white-space: nowrap; font-size: 21px; overflow: hidden; width: auto; color: #fff; padding: 16px; box-shadow: 0 9px 18px 0 rgba(97, 229, 146, 0.25); animation: glow-effect 1400ms infinite; } .content-area .hero__button a:hover { background-color: #a80000; color: #fff; } .content-area .hero__button a::after { content: ""; position: absolute; width: 145px; height: 100%; top: 0; left: -145px; background: -webkit-linear-gradient(-40deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #ffffff 25.2%, #fff 46%, rgba(255, 255, 255, 0) 46.2%, rgba(255, 255, 255, 0) 49%, #ffffff 49.2%, #fff 53.5%, rgba(255, 255, 255, 0) 53.7%, rgba(255, 255, 255, 0) 100%); -webkit-background-size: 100% 100%; animation: animation-15c8vog 3s infinite ease-in-out forwards; filter: drop-shadow(0px 0px 6px #fff); } .content-area .features-section { padding: 80px 18px; box-shadow: 0 0 6px #7a619d; } .content-area .features-section h2 { margin: 0 auto 75px; } .content-area .features-section .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); justify-content: center; gap: 22px; } .content-area .features-section .feature-grid .feature-item { background: rgba(255, 105, 105, 0.22); border-radius: 18px; padding: 26px; height: 205px; position: relative; overflow: hidden; } .content-area .features-section .feature-grid .feature-item::before { content: ""; position: absolute; right: 0; bottom: 0; width: 345px; height: 275px; z-index: -1; } .content-area .features-section .feature-grid .feature-item:nth-child(1)::before { background: url("../img/light.png") center/cover no-repeat; } .content-area .features-section .feature-grid .feature-item:nth-child(2)::before { background: url("../img/prize.png") center/cover no-repeat; } .content-area .features-section .feature-grid .feature-item:nth-child(3)::before { background: url("../img/phone.png") center/cover no-repeat; } .content-area .features-section .feature-grid .feature__title { font-size: 28px; font-weight: 700; max-width: 82%; } .content-area .features-section .feature-grid .feature__desc { font-size: 21px; font-weight: 600; max-width: 82%; } .content-area .info-section { padding: 55px 0; } .content-area .info-section p { margin: 18px 0; } .content-area .info-section img { display: flex; margin: 0 auto; max-width: 510px; } .content-area .payment-options { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 22px; } .content-area .payment-options .payment-option { cursor: pointer; transition: filter 0.5s ease-in-out; } .content-area .payment-options .payment-option svg path { transition: fill 0.5s ease-in-out; } .content-area .payment-options .payment-option:nth-child(1):hover { filter: drop-shadow(0px 0px 18px #1f46ff); } .content-area .payment-options .payment-option:nth-child(1):hover svg path { fill: #1f46ff; } .content-area .payment-options .payment-option:nth-child(2):hover { filter: drop-shadow(0px 0px 18px #ff8500); } .content-area .payment-options .payment-option:nth-child(2):hover svg path { fill: #ff8500; } .content-area .payment-options .payment-option:nth-child(3):hover { filter: drop-shadow(0px 0px 18px #ffc700); } .content-area .payment-options .payment-option:nth-child(3):hover svg path { fill: #ffc700; } .content-area .payment-options .payment-option:nth-child(4):hover { filter: drop-shadow(0px 0px 18px #f7951e); } .content-area .payment-options .payment-option:nth-child(4):hover svg path { fill: #f7951e; } .content-area .payment-options .payment-option:nth-child(5):hover { filter: drop-shadow(0px 0px 18px #c91be6); } .content-area .payment-options .payment-option:nth-child(5):hover svg path { fill: #c91be6; } .content-area .payment-options .payment-option:nth-child(6):hover { filter: drop-shadow(0px 0px 18px #2bd7a2); } .content-area .payment-options .payment-option:nth-child(6):hover svg path { fill: #2bd7a2; } .wrapper { max-width: 92vw; margin: 0 auto; padding: 0 18px; } .bottom-bar { padding: 35px 0; background-color: #1a1a1a; color: #f1f1f1; display: flex; justify-content: center; font-size: 15px; } .bottom-bar .wrapper { display: flex; flex-direction: column; gap: 22px; } .bottom__icons { display: flex; align-items: center; justify-content: center; gap: 22px; } .bottom__icons img { height: 32px; } @media (max-width: 768px) { h1 { margin: 22px 0; font-size: 32px; } h2 { font-size: 26px; margin: 18px 0; } h3 { font-size: 22px; margin: 12px 0; } .wrapper { max-width: 100%; } .action { padding: 12px 18px; } .top-bar .wrapper { justify-content: center; gap: 18px; flex-direction: column; gap: 20px; } .top-bar .wrapper .brand { flex: auto; } .top-bar .wrapper .brand img { width: 120px; } .content-area { padding: 0 0 35px; } .content-area .hero-section { height: auto; padding: 35px 0; background-size: cover; padding: 0; } .content-area .hero-section .wrapper { gap: 35px; flex-direction: column; align-items: center; text-align: center; z-index: 3; padding: 22px; margin: 0 22px; } .content-area .hero-section h1 { text-align: center; } .content-area .hero__button a { margin: 0 auto; } .content-area .hero__image img { width: 110px; } .content-area .hero__img { max-width: 260px; } .content-area .hero-section .block { flex: 1 1 auto; } .content-area .hero-section .block img { max-width: 100%; } .content-area .features-section { padding: 50px 0; } .content-area .features-section h2 { margin: 0 auto 35px; } .content-area .features-section .feature-item { width: 310px; height: 310px; margin: 0 auto; } .content-area .features-section .feature-item:not(:last-child) { margin-bottom: 55px; } .content-area .features-section .feature-item_play { margin-bottom: 130px; } .content-area .info-section { padding: 35px 0; } .content-area .info-section img { max-width: 100%; } .content-area .payment-options { padding: 0 18px; gap: 12px; justify-content: space-around; } .content-area .payment-options svg { height: 32px; } } @keyframes glow-effect { 0% { box-shadow: 0 0 6px #4a4a4a; } 50% { box-shadow: 0 0 22px #ff0000; } 100% { box-shadow: 0 0 6px #4a4a4a; } }