:root { --custom-font-family: var(--custom-font-family); } body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #3498db; background: rgb(52, 152, 219); background: radial-gradient( circle, rgba(52, 152, 219, 1) 0%, rgba(93, 173, 226, 1) 50% ); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden; } p { /* font-family: 'Open Sans', sans-serif; */ font-family: var(--custom-font-family); font-size: 2vmin; font-weight: 300; color: #eee; user-select: none; } .boldText { font-weight: 800; } .smallText { font-size: 1.5vmin; } .justNumber { font-family: 'Open Sans', sans-serif; font-weight: 800; /* font-size: 16vmin; */ } a { user-select: auto !important; } .underlineFont { text-decoration: underline; } .simpleButton { width: fit-content; height: 3vh; height: 3svh; display: flex; align-items: center; justify-content: center; padding: 1.5vmin 1.75vmin; border: none; border-radius: 1vmin; font-family: 'Open Sans', sans-serif; font-size: 2vmin; font-weight: 700; text-transform: uppercase; text-align: center; color: #fff; background-color: #1abc9c; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px inset; transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); } .dialogButton { padding: 3vmin; } .simpleButton:focus { outline: none; } .simpleButton p { font-family: 'Open Sans', sans-serif; font-weight: 800; color: #fff; } .simpleButton svg { width: 3vmin; height: auto; fill: #fff; } .squareCorners svg { width: 4vmin; height: auto; fill: #fff; } .simpleButton:active { background-color: #12806a; box-shadow: none; } .redButton, .wideBtn, #dealBtn, #dealFaceBtn { width: 15vw !important; } .smallButton { width: 5.825vw !important; } .whiteButton { width: 5.825vw; } .whiteButton p { color: #2c3e50 !important; } .whiteButton { background-color: #fff; } .whiteButton p { color: #34495e; } .whiteButton svg { fill: #34495e; } .whiteButton:active { background-color: #ddd; box-shadow: none; } .redButton { background-color: #b33771; } .redButton:active { background-color: #6d214f; box-shadow: none; } .arrowBtnHolder { width: 80vw; height: 90vh; height: 90svh; display: flex; align-items: center; justify-content: space-between; position: absolute; } .arrowBtn { width: fit-content; border-radius: 1vmin 0 0 1vmin; border-right: 1px solid rgba(0, 0, 0, 0.3); background-color: #16a085; } .arrowBtn:active { background-color: #12806a; } .circleButton { border-radius: 100%; width: 7.5vw; height: 7.5vw; height: 7.5svw; aspect-ratio: 1/1; background-color: rgba(255, 255, 255, 0.1); box-shadow: none; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .circleButton svg { width: 3vw; } .circleButton:active { background-color: rgba(255, 255, 255, 0.05); } @media only screen and (max-width: 850px) { .circleButton { right: 5vw; } .circleButton:first-of-type { left: 5vw; } } .displayText { font-family: 'Open Sans', sans-serif; font-weight: 800; color: #fff; font-size: 4vmin; } #toDealText { font-weight: 900; color: #ffda79; font-size: 4vmin; margin-left: 1vmin; } #upBtn { border-radius: 0 1vmin 1vmin 0; border-right: none; border-left: 1px solid rgba(0, 0, 0, 0.3); } .squareCorners { border-radius: 0; width: 10vw; } .dealButtonHolder { display: flex; } dialog::backdrop { background: rgba(0, 0, 0, 0.8); } .stickyFooter { position: fixed; bottom: 0; width: 100%; height: 5vh; height: 5svh; padding: 1vmin 0; background-color: #5dade2; display: flex; align-items: center; justify-content: center; gap: 1vw; border-top: 1px solid rgba(255, 255, 255, 0.3); z-index: 1000; } .stickyFooterAlt { background-color: #34495e; display: none; } .stickyFooter p { font-family: 'Open Sans', sans-serif; color: #fff; text-align: center; } .alignRight { position: absolute; right: 2vw; } dialog { width: 80%; max-width: 800px; border: none; background-color: #fff; border-radius: 1vmin; padding: 6vmin; box-shadow: 0 0.5vmin 1.5vmin rgba(0, 0, 0, 0.75); } .dialogContent { display: flex; flex-direction: column; gap: 3vmin; align-items: center; text-align: center; text-wrap: balance; } .dialogContent p { font-family: 'Open Sans', sans-serif; font-size: 2vmin; color: #333; } .dialogContent p:first-child { font-weight: 800; font-size: 2.5vmin; color: #333; text-transform: uppercase; } /* .title p { font-size: 3vmin; font-weight: 800; } */ .cardHolder { width: 100%; height: calc(100vh - 10vh); display: grid; align-items: center; justify-items: center; } .card { aspect-ratio: 1/0.65; background-color: #eee; display: flex; align-items: center; justify-content: center; border-radius: 2vmin; box-sizing: border-box; transform-style: preserve-3d; perspective: 1000px; position: relative; cursor: pointer; } .card .front, .card .back { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; border-radius: 2.15vmin; box-shadow: rgba(0, 0, 0, 0.2) 0 0.3vmin 0; } .card .back { transform: rotateY(180deg); background-color: #34495e; } .card .back p { color: #fff; background-color: rgba(52, 73, 94, 0.7); } @keyframes cardIn { 0% { transform: translateY(200vh) rotate(30deg); } 100% { transform: translateY(0) rotate(0deg); } } .card p { color: #2c3e50; font-weight: 300; font-size: 4vmin; padding: 2vmin; text-align: center; text-wrap: balance; width: 100%; height: auto; line-height: 1; z-index: 1; background-color: rgba(238, 238, 238, 0.7); } .card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: 2vmin; } .box { border: none; box-shadow: #2980b9 0 5vmin 0.25vmin; background-color: #34495e; background-image: radial-gradient(#000 0.05vmin, transparent 0.05vmin), radial-gradient(#000 0.05vmin, #2c3e50 0.05vmin); background-size: 1vmin 1vmin; background-position: 0 0, 0.5vmin 0.5vmin; border-radius: 1vmin; z-index: 99; width: 50%; max-width: 800px; aspect-ratio: 1/0.65; display: flex; align-items: center; justify-content: center; } .box p { font-size: 6vmin; color: #333; width: 100%; text-align: center; padding: 2vmin 4vmin; background-color: #fff; border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); text-wrap: balance; } .boxCard { box-shadow: #2980b9 0 5vmin 0.25vmin; width: 50%; max-width: 800px; aspect-ratio: 1/0.65; background-color: #eee; display: flex; align-items: center; justify-content: center; border-radius: 2vmin; border: 1px solid #fff; border-bottom: none; box-sizing: border-box; } .swal2-popup p { font-family: 'Open Sans', sans-serif; color: #333 !important; text-wrap: balance; } .settingsHolder { display: none; position: absolute; width: 100%; height: 100%; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.75); z-index: 1000; } .settingsCard { width: 90%; height: 90%; background-color: #ffda79; border: 8px solid #fff; border-radius: 2vmin; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; display: grid; align-items: center; justify-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 8fr 1fr 1fr; } .settingsSection { width: 90%; height: fit-content; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px; border-radius: 12px; padding: 3vmin; box-sizing: border-box; background-color: #fff; grid-column: 2 / 3; grid-row: 1/2; margin-top: 5vmin; } .settingsSection .simpleButton { font-size: 1.5vmin; height: fit-content; } .settingsSectionLeft { grid-column: 1/2; grid-row: 1/2; } .updateHolder { grid-column: 1/3; grid-row: 2/3; width: 80%; background-color: rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1vmin; border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 1vmin; } .updateHolder p { font-family: 'Open Sans', sans-serif; color: #333; font-size: 1.75vmin; text-align: center; padding: 0.5vmin; margin: 0; } .key { display: inline-block; padding: 1vmin; font-size: 2vmin; font-family: 'Open Sans', sans-serif; border: 1px solid #ccc; border-radius: 3px; background-color: #f0f0f0; vertical-align: middle; } .settingsSection p { font-family: 'Open Sans', sans-serif; color: #333; font-size: 2vmin; } .settingsTitle { font-size: 3.5vmin; font-weight: 800; text-transform: uppercase; } .settingsSubSection { display: flex; align-items: center; justify-content: flex-start; gap: 3vmin; width: 100%; flex-direction: row; } #closeSettings_btn { grid-column: 1 / 3; grid-row: 3/4; } .settingsTopText { grid-column: 1 / 3; grid-row: 1 / 2; align-self: flex-start; justify-self: flex-start; margin-left: 2.5%; } .settingsTopText p { font-family: 'Open Sans', sans-serif; color: #333; } .settingsTopText p:first-of-type { font-size: 5vmin; margin-bottom: 1vmin; } .zoomHolder { display: flex; width: 100vw; height: 92.5vh; align-items: center; justify-content: center; } .zoomHolder .card { aspect-ratio: 1 / 0.65; } .zoomHolder .card p { font-size: 9vmin; } #zoomEndBtn { display: none; } .stage-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100svh; background-color: #3498db; z-index: 1000; display: none; align-items: center; justify-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; } .stage-overlay svg { width: 120px; height: auto; fill: #2c3e50; grid-column: 1/2; grid-row: 1/2; } .loader { width: 45px; aspect-ratio: 0.75; --c: no-repeat linear-gradient(#fff 0 0); background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; animation: l7 1s infinite linear alternate; grid-column: 1/2; grid-row: 1/2; } .loadingText { font-family: 'Open Sans', sans-serif; font-weight: 100; grid-column: 1/2; grid-row: 1/2; margin-top: 15vh; } @keyframes l7 { 0% { background-size: 20% 50%, 20% 50%, 20% 50%; } 20% { background-size: 20% 20%, 20% 50%, 20% 50%; } 40% { background-size: 20% 100%, 20% 20%, 20% 50%; } 60% { background-size: 20% 50%, 20% 100%, 20% 20%; } 80% { background-size: 20% 50%, 20% 50%, 20% 100%; } 100% { background-size: 20% 50%, 20% 50%, 20% 50%; } } .slide-in-top { -webkit-animation: slide-in-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; animation: slide-in-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } @-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }