body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; margin: 0 } code { font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace } @font-face { font-family: swiper-icons; font-style: normal; font-weight: 400; src: url("data:application/font-woff;charset=utf-8;base64, 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") } :root { --swiper-theme-color: #007aff } .swiper, swiper-container { display: block; list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1 } .swiper-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { box-sizing: initial; display: flex; height: 100%; position: relative; transition-property: transform; transition-timing-function: ease; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); width: 100%; z-index: 1 } .swiper-android .swiper-slide, .swiper-wrapper { transform: translateZ(0) } .swiper-horizontal { touch-action: pan-y } .swiper-vertical { touch-action: pan-x } .swiper-slide, swiper-slide { display: block; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100% } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height } .swiper-backface-hidden .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0) } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { transform-style: preserve-3d } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: #00000026 } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(270deg, #00000080, #0000) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(90deg, #00000080, #0000) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(0deg, #00000080, #0000) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, #00000080, #0000) } .swiper-css-mode>.swiper-wrapper { -ms-overflow-style: none; overflow: auto; scrollbar-width: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-centered>.swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999 } .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100% } .swiper-lazy-preloader { border: 4px solid #007aff; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top: 4px solid #0000; box-sizing: border-box; height: 42px; left: 50%; margin-left: -21px; margin-top: -21px; position: absolute; top: 50%; transform-origin: 50%; width: 42px; z-index: 10 } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s linear infinite } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity .3s; z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 8px; bottom: var(--swiper-pagination-bottom, 8px); left: 0; top: auto; top: var(--swiper-pagination-top, auto); width: 100% } .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { position: relative; transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { background: #000; background: var(--swiper-pagination-bullet-inactive-color, #000); border-radius: 50%; display: inline-block; height: 8px; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); opacity: .2; opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); width: 8px; width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)) } button.swiper-pagination-bullet { -webkit-appearance: none; appearance: none; border: none; box-shadow: none; margin: 0; padding: 0 } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { background: var(--swiper-theme-color); background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: 1; opacity: var(--swiper-pagination-bullet-opacity, 1) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { left: auto; left: var(--swiper-pagination-left, auto); right: 8px; right: var(--swiper-pagination-right, 8px); top: 50%; transform: translate3d(0, -50%, 0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { display: block; margin: 6px 0; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0 } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: transform .2s, top .2s } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, left .2s } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform .2s, right .2s } .swiper-pagination-fraction { color: inherit; color: var(--swiper-pagination-fraction-color, inherit) } .swiper-pagination-progressbar { background: #00000040; background: var(--swiper-pagination-progressbar-bg-color, #00000040); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-theme-color); background: var(--swiper-pagination-color, var(--swiper-theme-color)); height: 100%; left: 0; position: absolute; top: 0; transform: scale(0); transform-origin: left top; width: 100% } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { height: 4px; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; width: 100% } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar { height: 100%; left: 0; top: 0; width: 4px; width: var(--swiper-pagination-progressbar-size, 4px) } .swiper-pagination-lock { display: none } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { align-items: center; color: var(--swiper-theme-color); color: var(--swiper-navigation-color, var(--swiper-theme-color)); cursor: pointer; display: flex; height: 44px; height: var(--swiper-navigation-size); justify-content: center; margin-top: -22px; margin-top: calc(0px - var(--swiper-navigation-size)/2); position: absolute; top: 50%; top: var(--swiper-navigation-top-offset, 50%); width: 27px; width: calc(var(--swiper-navigation-size)/44*27); z-index: 10 } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { cursor: auto; opacity: .35; pointer-events: none } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: 44px; font-size: var(--swiper-navigation-size); font-variant: normal; letter-spacing: 0; line-height: 1; text-transform: none !important } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; left: var(--swiper-navigation-sides-offset, 10px); right: auto } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev" } .swiper-button-next, .swiper-rtl .swiper-button-prev { left: auto; right: 10px; right: var(--swiper-navigation-sides-offset, 10px) } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next" } .swiper-button-lock { display: none } .App { text-align: center } .App-header { align-items: center; background-color: #282c34; color: #fff; display: flex; flex-direction: column; font-size: calc(10px + 2vmin); justify-content: center; min-height: 100vh } .swiper-container { height: 100%; margin: auto; max-height: 350px; max-width: 591px; overflow: hidden; position: relative; width: 75vw } .swiper-slide img { background-position: 50%; background-size: cover; height: auto; width: 100%; z-index: 2 } @media only screen and (max-width:600px) { .swiper-container { height: 100%; width: 90vw } } .header-image { display: block; height: auto; margin: 0 auto; width: 100px } .header-logo { display: flex; position: absolute; right: 40px; top: 40px } body { background-position: 50%; background-size: cover; color: #fff; display: flex; flex-direction: row; font-family: Roboto, sans-serif; height: 100vh; justify-content: center; margin-top: 40px; overflow-x: hidden; text-align: center; width: 100% } .container { display: flex; flex-direction: column; min-height: 100vh } .textContainer, .textContainer2 { align-items: center; display: flex; flex-direction: row; justify-content: center } .textContainer2 { padding: 20px 0 } .textContainer3 { align-items: center; display: flex; flex-direction: row; justify-content: center } #time-in-current-location { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 40px; padding-top: 40px; text-align: center } .textContainer>section { display: flex; flex-direction: column } .textContainer>img { height: 50px; margin-right: 5px; object-fit: fill; width: 50px } .flexRow { flex-direction: row } .buttonStyling, .flexRow { align-items: center; display: flex } .buttonStyling { background-color: #93fc938f; border-radius: 10px; color: #0fcc0f; flex-direction: column; font-size: 12px; font-weight: 600; justify-content: center; margin-left: 5px; padding: 4px } .text-style { font-size: 24px; margin: 0 } #user-city { text-align: center } @media only screen and (max-width:600px) { .text-style { font-size: 16px } } #customButton { align-items: center; background-color: #00aeef; border-radius: 15px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font-size: 16px; font-weight: 700; height: 56px; justify-content: center; margin-top: 25px; max-width: 390px; padding: 16px 32px; text-align: center; text-decoration: none; width: 100% } @media only screen and (max-width:400px) { #customButton { max-width: 350px } } .countdown-block { margin-top: 16px } @media only screen and (max-width:600px) { .swiper-container { height: 100%; width: 90vw } .header-logo { right: 15px; top: 15px } .text-style { font-size: 16px } body { margin-top: 15px } .footer { margin-top: 100px } } #customButton2 { align-items: center; background-color: #00aeef; border-radius: 15px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font-size: 16px; font-weight: 700; height: 56px; justify-content: center; margin-top: 25px; max-width: 390px; padding: 16px 32px; text-align: center; text-decoration: none; width: 100% } @media only screen and (max-width:400px) { #customButton2 { max-width: 350px } } #customButton2 img { height: 1em; margin-left: 5px; margin-top: 5px; width: 1em } .linktree { background-image: url(../imgs/pic/footer.svg); background-position: 50%; background-repeat: no-repeat; background-size: cover; height: 16px; width: 14px } .onlyfans { background-image: url(../imgs/pic/onlyfans.svg); height: 24px; width: 25px } .onlyfans, .snapchat { background-position: 50%; background-repeat: no-repeat; background-size: cover; margin-right: 5px } .snapchat { background-image: url(../imgs/pic/snapchat.svg); height: 32px; width: 24px } .fansly { background-image: url(../imgs/pic/fansly.svg); height: 20px; width: 25px } .fansly, .location { background-position: 50%; background-repeat: no-repeat; background-size: cover; margin-right: 5px } .location { background-image: url(../imgs/pic/location.svg); height: 16px; width: 16px } #customButton img { height: 1em; margin-left: 5px; margin-top: 5px; width: 1em } .exclusiveContent { font-family: Montserrat, sans-serif; font-size: 20px; margin-top: 20px; text-align: center } .username { font-size: 32px; margin-top: 8px } .useraccountname, .username { color: #fff; font-family: Roboto, sans-serif; text-align: center } .useraccountname { font-size: 20px; margin-top: 2px } .separator { background-image: url(../imgs/pic/separator.svg); height: 19px; width: 2px } .separator, .status { background-position: 50%; background-repeat: no-repeat; background-size: cover } .status { background-image: url(../imgs/pic/status.svg); height: 10px; width: 10px } .footer { align-items: flex-end; display: flex; justify-content: center; margin-top: auto; padding-bottom: 75px } .page-content { align-items: center; display: flex; flex-direction: column; padding: 0 8px; width: 100% } .user-status:before { background-image: url(../imgs/pic/status.svg); content: ""; display: none; height: 10px; left: -15px; position: absolute; width: 10px } .clock, .user-status:before { background-position: 50%; background-repeat: no-repeat; background-size: cover } .clock { background-image: url(../imgs/pic/clock.svg); height: 22px; width: 22px } .top-right-button { position: absolute; right: 40px; top: 40px; z-index: 10 } .top-right-button img { height: auto; width: 50px } .user-status { margin-top: 40px } .user-status, .user-status2 { align-items: center; color: #fff; display: flex; gap: 5px; position: relative } .user-status2 { margin-top: 10px } .discount { color: red } @keyframes bounce { 0% { transform: translateY(0) } to { transform: translateY(-5px) } }