:root { --white: #EBE9FC; --black: #111827; --select-bg: #64748b; --banner-height-landscape: 100vh; --banner-height-protrait: 30vh; --banner-boundary-height-landscape: 25%; --banner-boundary-height-portrait: 25%; } .slabo-27px-regular { font-family: "Slabo 27px", serif; font-weight: 400; font-style: normal; } body { top: 100%; height: 100vh; font-family: 'Slabo 27px', monospace; } *::-webkit-scrollbar { display: flexs; } * { scrollbar-width: auto; /* Firefox */ -ms-overflow-style: inherit; /* IE and Edge */ } .app { height: 100%; width: 100%; background-color: #f3f4f6; align-items: center; text-align: center; justify-content: center; color: var(--black); } .custom-button { background-color: #6ee7b7; border-radius: 10px; text-shadow: #2c2c3a; min-width: 60%; max-width: 60%; height: 20%; border-color: transparent; align-items: center; text-align: center; justify-content: center; align-content: center; display: inline-block; color: var(--white); overflow-wrap: break-word; text-wrap: wrap; transition: 1s linear; } .custom-text { background-color: inherit; border-radius: 10px; text-shadow: #f9fafb; width: 90%; height: 20%; border-color: transparent; align-items: center; text-align: center; justify-content: center; align-content: center; display: inline-block; } .sd { margin-bottom: 1em; } .sdu { margin-top: 1em; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .custom-button:hover { cursor: pointer; background-color: #059669; } .ab { padding: 10px; } .scrollable-box { background-color: #2c2c3a; width: fit-content; width: 40%; height: 70%; border-radius: 10px; box-shadow: #24242F; text-align: center; align-items: center; justify-content: center; align-content: center; display: inline-block; overflow: auto; scrollbar-width: none; } @media (orientation: portrait) { .scrollable-box { width: 80%; height: 50%; } .custom-button { height: 15%; } .custom-text { height: 15%; } } .footer { margin: auto 0; display: flex; align-items: center; justify-content: center; text-align: center; align-items: center; bottom: 0; width: 100%; height: 60px; padding: 0px 0px 0px 0px; left: 0px; background: #cbd5e1; } .container { position: relative; height: var(--banner-height-landscape); } .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--banner-height-landscape); background-color: rgba(178, 172, 172, 0.566); z-index: 1; } .container-upper-bound { position: absolute; left: 0; top: 0; width: 100%; height: var(--banner-boundary-height-landscape); background-color: rgba(255, 0, 4, 0.3); z-index: 999; } .container-lower-bound { position: absolute; left: 0; top: calc(100% - var(--banner-boundary-height-landscape)); width: 100%; height: var(--banner-boundary-height-landscape); background-color: rgba(255, 0, 4, 0.3); z-index: 999; } .banner-top { height: var(--banner-height-landscape); width: 100%; z-index: 1; } .text-container { position: absolute; top: calc(var(--banner-height-landscape) - var(--banner-boundary-height-landscape) * 3); width: 100%; font-family: 'Macondo', cursive; font-size: 4.5vw; color: #047857; } .text-container h1, .text-container h5 { margin: 0; } .banner-text-overlay { position: absolute; top: 0; max-height: 15%; left: 0; z-index: 999; justify-content: center; width: 100%; } .img-box-wrapper { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; height: 70%; padding: 20px; outline: none !important; } .img-box { top: 0; width: 40%; height: 100%; border-radius: 20px; box-shadow: 0 0 20px rgb(159, 156, 156); overflow: hidden; z-index: 0; transition: opacity 0.95s ease; opacity: 0; padding: 20px; } .img-view { height: 80%; width: 95%; padding-top: 4%; position: relative; border-radius: 50px; z-index: 2; transition: opacity 1s ease-in-out; /* https://stackoverflow.com/a/21003770 */ -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; :focus { outline: none !important; } } .img-box-text { position: relative; padding: 10px; z-index: 2; } .svg-arrow-right { right: 0; transform: matrix(-1, 0, 0, 1, 0, 0); -ms-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: matrix(-1, 0, 0, 1, 0, 0); circle { transform: matrix(-1, 0, 0, 1, 0, 0); -ms-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: matrix(-1, 0, 0, 1, 0, 0); } } .svg-arrow-left { left: 0; } .banner-texts { position: relative; } .banner-text { text-decoration: solid underline; font-weight: 400; font-size: x-large; display: inline; } .banner-text-small { display: inline; white-space: nowrap; font-weight: 200; font-size: small; color: #94a3b8; position: relative; bottom: -4px; padding: 6px; } .banner-text-small:hover, .banner-text:hover { cursor: pointer; } .svg-arrow-left, .svg-arrow-right { position: absolute; top: 40%; transition: 0.1s linear; z-index: 3; opacity: 0.5; width: 20%; } .banner-text-view { display: none; opacity: 0; overflow-wrap: break-word; transition: opacity 1s linear; } .svg-info { width: 8%; height: 8%; display: inline; padding: 5px; transition: opacity 1s linear; } .svg-arrow-left:hover, .svg-info:hover { -ms-transform: scale(0.92); -webkit-transform: scale(0.92); -moz-transform: scale(0.92); -o-transform: scale(0.92); transform: scale(0.92); cursor: pointer; } .svg-arrow-right:hover { transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.92); -ms-transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.92); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.92); -moz-transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.92); -o-transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.92); cursor: pointer; } .img-box-button { height: 100%; width: 80%; } .img-portrait { height: 40px; } @media (orientation: portrait) { .img-box-button { height: fit-content; width: 100%; } .svg-arrow { width: 70%; padding: 0; } .img-box-wrapper { height: 40%; } .img-box { width: 100%; } .banner-top { height: var(--banner-height-protrait); } .container { position: relative; height: var(--banner-height-protrait); } .container::before { position: absolute; height: var(--banner-height-protrait); } .text-container { top: calc(var(--banner-height-protrait) - var(--banner-boundary-height-portrait) * 3); height: 20%; font-size: 20px; } .container-upper-bound { position: absolute; height: var(--banner-boundary-height-portrait); } .container-lower-bound { height: var(--banner-boundary-height-portrait); } .svg-info { width: 12%; height: 12%; } }