:root { --cover-bg-color: var(--main-bg-color); --cover-fg-color: var(--title-color); --cover-z-index: 1950; } .cover { transition: var(--transition-cover) !important; position: fixed; z-index: var(--cover-z-index); display: flex; flex-direction: column; align-content: center !important; justify-content: center !important; align-items: center !important; justify-items: center !important; pointer-events: all; user-select: none; overscroll-behavior: contain !important; overflow-y: visible; overscroll-behavior: contain; padding-bottom: var(--footer-size); color: var(--cover-fg-color); border-top: 2pt solid var(--cover-fg-color); border-bottom: 2pt solid var(--cover-fg-color); contain: layout; border-bottom-left-radius: calc(var(--mp) * 2); border-bottom-right-radius: calc(var(--mp) * 2); } .cover_top, .cover_full { top: calc(var(--mp) * -1); left: 0px; right: 0px; background-color: var(--cover-bg-color); } .cover_full { bottom: 0px; } .cover_top { bottom: calc(var(--cover-bottom-size) + var(--mp) * 0) !important; } .cover_bottom { left: 0px; right: 0px; height: calc(var(--cover-bottom-size) + var(--mp) * 2) !important; z-index: calc(var(--cover-z-index) - 10); background-color: var(--box-bg-color-dark); display: flex !important; flex-direction: row !important; align-items: center !important; align-content: center !important; justify-items: center !important; justify-content: center !important; contain: layout; } .cover.cover_off { transform: translateY(-110%); } .cover_bottom_off, .cover_bottom.cover_off { transform: translateY(110%); } .cover .swipe_or_scroll .chevron { rotate: -90deg; max-height: 4rem; max-width: 4rem; font-size: 3.00rem; margin: auto; } .cover .swipe_or_scroll .swipe_animation { animation: bounce 3s cubic-bezier(.28, .84, .42, 1) infinite; } .cover .wip_animation { transform-origin: center; animation: blink 3s infinite; text-transform: none !important; font-size: 1.15rem; } .cover .round_tongue, .cover .swipe_or_scroll { position: fixed; transform-origin: center; margin: auto; text-align: center; display: flex; align-content: center !important; justify-content: center !important; align-items: center !important; justify-items: center !important; z-index: 1; display: flex; flex-direction: column; max-height: fit-content; border-radius: 100%; padding: calc(var(--mp) * 1); border-bottom: calc(var(--mp) / 2) solid var(--cover-fg-color); min-width: 15rem; min-height: 5rem; left: 50% !important; z-index: -1; } .cover .swipe_or_scroll { padding-bottom: calc(var(--mp) * 1); bottom: 0px; background-color: var(--cover-bg-color); } .cover .round_tongue { top: 0px; transform-origin: center; background-color: var(--box-bg-color-dark); } .cover_box_top { padding: calc(var(--mp) * 4); margin-bottom: calc(var(--footer-size) * 1); display: flex !important; flex-direction: column; text-shadow: var(--text-shadow); z-index: 0; visibility: visible; } .cover_box_top .h1_emu, .cover_box_top h1 { font-weight: 900; font-size: 3.50rem; display: block !important; text-align: center; } .cover_box_top .tag_line_disclaimer, .cover_box_top .tag_line { text-align: center; font-size: 1.25rem; padding: calc(var(--mp) * 2); margin-top: calc(var(--mp) * 4); } .cover_box_top .tag_line { border-bottom: 1pt solid var(--cover-fg-color); } .cover_box_top .logo { margin: auto; width: stretch; height: auto; overflow: hidden; border-top-left-radius: 100%; border-top-right-radius: 100%; border: calc(var(--mp) * 1) solid var(--cover-fg-color); border-left-width: 0px; border-bottom-width: 0px; margin-bottom: calc(var(--mp) * 1); border-right-width: 0px; } @media screen and (min-width:1024px) { :root { --cover-bottom-size: 20%; } .cover_box_top .logo { max-width: 24rem; } .cover .swipe_or_scroll { transform: translateX(-50%) translateY(25%); } .cover .round_tongue { display: none; } .cover_box_top .logo_container { object-fit: cover; max-width: 50vmin !important; height: 25vmin; overflow: visible; margin: auto; margin-bottom: 0pt !important; } .cover_bottom { bottom: calc(var(--mp) * 0); } } @media screen and (orientation:portrait) and (max-width:1023px) { :root { --cover-bottom-size: 25%; } .cover_box_top { max-height: 100%; flex: 1 1 auto; flex-grow: 1 1 auto; height: stretch; width: stretch; display: flex; align-content: space-around !important; justify-content: space-around !important; align-items: space-around !important; justify-items: space-around !important; min-height: 60%; } .cover_box_top * { margin: auto !important; } .cover_box_top h1 { font-size: 2.50rem !important; } .cover_box_top .tag_line { font-size: 1.15rem !important; padding: calc(var(--mp) * 0) !important; padding-bottom: calc(var(--mp) * 2) !important; } .cover_box_top .logo_container { position: relative; object-fit: cover; max-width: 50vmin !important; height: 35vmin !important; overflow: visible; margin-bottom: 0pt !important; } .cover_box_top .logo { width: 100%; } .cover_box_top .tag_line_disclaimer { font-size: 1.15rem; } .cover .round_tongue, .cover .swipe_or_scroll { width: 125dvw; } .cover .round_tongue { transform: translateX(-50%) translateY(-50%) rotateZ(180deg); z-index: 1; } .cover .swipe_or_scroll { transform: translateX(-50%) translateY(25%); } .cover_bottom { bottom: calc(var(--mp) * -1); } }