/*             */
/*    Fonts    */
/*             */

/* google-webfonts-helper :: HEADINGS */
@font-face {
  font-display: swap;
  font-family: 'Doto Black';
  font-weight: normal;
  src: url('/fonts/doto-v3-latin-900.woff2') format('woff2');
}

/* google-webfonts-helper :: BODY TEXT - REGULAR */
@font-face {
  font-display: swap;
  font-family: 'Host Grotesk';
  font-weight: normal;
  src: url('/fonts/host-grotesk-v5-latin-regular.woff2') format('woff2');
}

/* google-webfonts-helper :: BODY TEXT - BOLD */
@font-face {
  font-display: swap;
  font-family: 'Host Grotesk';
  font-weight: bold;
  src: url('/fonts/host-grotesk-v5-latin-800.woff2') format('woff2');
}

/* Manual install :: CLOCK DESKTOP */
@font-face {
  font-display: block;
  font-family: 'DSEG 7-BI';
  src: url('/fonts/DSEG7Classic-BoldItalic.woff2') format('woff2');
}

/* Manual install :: CLOCK MOBILE */
@font-face {
  font-display: block;
  font-family: 'DSEG 7-BI Mini';
  src: url('/fonts/DSEG7ClassicMini-BoldItalic.woff2') format('woff2');
}

/* google-webfonts-helper :: DO HYEON EXAMPLE */
@font-face {
  font-display: block;
  font-family: 'Do Hyeon';
  src: url('/fonts/do-hyeon-v21-latin-regular.woff2') format('woff2');
}


/*                */
/*    Generics    */
/*                */

/* The foundation for everything */
html { font-size: 16px; }

body {
  font-size: 1rem;
  font-family: 'Host Grotesk', sans-serif;

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  
  color: #FFFFFF;
  background: #111122;
}

/* We will never need those ugly blue/purples on our links */
a { color: inherit; }

/* But we need something on some hovers */
a:hover {
  opacity: 70%;
  transition: opacity 0.075s;
}

/* Let's just keep the default button but change the font */
button { 
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: bold; 
}

/* Mega huge headers for some pages */
h1 { font-size: 4rem; }

/* Where's your JavaScript buddy? (Also the 404 page) */
noscript, #page404 {
  flex-shrink: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9;

  background-color: #222299; /* fallback */
  background: linear-gradient(0deg,#62EAFF 0%, #1C1C55 100%);
  font-size: 2rem;
  text-align: center;
  text-shadow: #000000 0 0 .125rem;

  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

noscript b, #page404 b {
  margin-bottom: 0;
  font-size: 4rem;
}

/* We can't stack <br> tags in our 80vw-based page bodies, so we need to do this */
#br2 { height: 2rem; }
#br3 { height: 3rem; }

/* Cool fonts for clocks */
#time-ET-desktop, #page-wheel-time-ET {
  font-family: 'DSEG 7-BI';
  font-size: 2rem;
}

#time-ET-mobile {
  font-family: 'DSEG 7-BI Mini';
  font-size: 4vh;

  color: #2b2c53;
  text-shadow: #94a0b1 .25vh .25vh .5vh; /* would be #2b2c5388 if Safari didn't suck at transparent text colors */
}

/* Main navigation for landscape visitors */
.global-nav-desktop {
  background: linear-gradient(180deg,#D8ECF2 0%, #B2CBD1 12.5%, #98ADB3 87.5%, #5F767E 100%);
 
  position: fixed;
  bottom: 0;
  max-width: 75%;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0;

  border-radius: 0.75rem;
  display: flex;
  align-items: center;

  z-index: 2;
}

/* Styling for scrolling buttons, left and right */
.global-nav-desktop-button {
  display: flex;
  align-items: center;
}

.global-nav-desktop-button img {
  height: 2.25rem;
  width: 1.3376rem;
  
  margin: 0 0.4rem;
  user-select: none;

  filter: drop-shadow(0 0 0.085rem #2b2c53);
}

#global-nav-desktop-back { margin-left: 0.9rem; }
#global-nav-desktop-forth { margin-right: -0.4rem; }

/* Styling for LCD-looking navbar */
#global-nav-desktop-items {
  font-family: 'Doto Black', 'Host Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: bold;
  -webkit-text-stroke: 1px;

  display: flex;
  align-items: center;
  height: 2.5rem;

  margin: 0 1.125rem;
  overflow-x: scroll;
  scrollbar-width: none;
  padding: 0.25rem 0;
  white-space: nowrap;
  word-spacing: -0.4rem;

  background-image: url('/img/lcd.svg'); /* made with fffuel.co/nnnoise  */
  box-shadow: inset 0 0 0.25rem #2b2c53;
}

/* Styling for LCD-looking text items (including selected page) */
#global-nav-desktop-items a, #g-n-d-current-page, #g-n-d-divider {
  color: #2b2c53;
  margin: 0 0.5rem;
  padding: 0 0.5rem;
  text-decoration: none;
  text-shadow: #96a3b4 .15rem .15rem .125rem; /* would be #2b2c5377 if Safari didn't suck at transparent text colors */
}

/* Additional styling for dividers between desktop menu items */
#g-n-d-divider { margin: 0 -0.5rem; }

/* Invert the LCD colors on hover */
#global-nav-desktop-items a:hover  {
  background-color: #2b2c53;
  box-shadow: .05rem .05rem .5rem #2b2c5377;
  color: #c4d8db;
  opacity: 100%; /* Patching the global style for a:hover */
  text-shadow: none;
}

/* Special styling to mark the current page in desktop navbar */
#g-n-d-current-page { 
  text-decoration: underline overline; 
  text-underline-offset: 0.4rem;
}

/* Special styling for pages you can't click in the desktop navbar yet */
#global-nav-desktop-items a.g-n-d-coming-soon { 
  color: #a3abb4;
  text-shadow: #afbfcb .15rem .15rem .125rem; /* would be #2b2c533f if Safari didn't suck at transparent text colors */
  box-shadow: none;
  background-color: #00000000;
}

#global-nav-desktop-items a.g-n-d-coming-soon:hover  {
  background-color: #a3abb4;
  box-shadow: .05rem .05rem .5rem #2b2c533f;
  color: #c4d8db;
  text-shadow: none;
}

#global-coming-soon-msg {
  color: #FFFF00;
  display: none;
}

/* MOBILE: Navigation menu for mobile */
#global-nav-mobile {
  height: 48vh;
  width: 50vw;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2vw;
  
  overflow: visible;

  z-index: 2;
}

/* MOBILE: Row of mobile nav buttons */
.g-n-m-btnrow {
  display: flex;
  flex-direction: row;

  gap: 3vw;

  padding-top: 0.5vh;
}

/* MOBILE: Text labels for mobile nav buttons and their spacing */
.g-n-m-btnlabel {
  width: 9vh;

  font-size: 1.3vh;
  font-weight: bold;
  text-align: center;
  line-height: 1.5vh;
  color: #FF9532;
  text-shadow: 0 0 1px #000000;

  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5vh;
}

/* MOBILE: The mobile nav buttons themselves */
.g-n-m-btn {
  height: 10vw;
  width: 10vw;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: radial-gradient(circle at 30% 20%, #B1B2B8 0%, #4D4E5C 35%, #131318 100%);
  border-radius: 100%;

  font-size: 5vh;
  text-shadow: none;
  user-select: none;
}

/* MOBILE: The shadow div around all mobile nav buttons */
.g-n-m-btnshadow {
  height: 10vw;
  width: 10vw;

  background-color: #00000066;
  border-radius: 100%;
  box-shadow: 0 0 0.4vh 0.2vh #00000099;
}

/* MOBILE: Animated button presses for mobile nav */
.g-n-m-btn:hover { transform: scale(0.935); }

/* MOBILE: Styling for mobile nav button functionality */
.g-n-m-btnlabel a {
  color: #FFFFFFDD;
  text-decoration: none;
  -webkit-tap-highlight-color: #00000000;
}

/* MOBILE: Patching the global style for a:hover... but using it to our advantage */
.g-n-m-btnlabel a:hover { opacity: 95%; }

/* MOBILE: Special color labels on mobile nav */
.g-n-m-bl-coming-soon { color: #7a6551; }
.g-n-m-bl-here { color: #FFFFFF; }


/*            */
/*    HOME    */
/*            */

/* Main area/bg on homepage */
#home-body {
  background: linear-gradient(0deg,#62EAFF 0%, #1C1C55 100%); /* fallback */ 
  background-image: url('/img/home.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100vh;

  height: 100vh;
  width: 233.3333vh; /* 21:9 aspect ratio */
  box-shadow: inset 4vh 0 2vh -2vh #111122, inset -4vh 0 2vh -2vh #111122; /* vh ignores zoom level */
  
  align-items: start;
  margin: 0;
  
  transition: 0.1s filter;
}

/* Randall in the background on a separate div (this lets him dodge the color filter) */
#home-body-randall {
  background-image: url('/img/home_randall.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 233.3333vh 100vh;

  position: absolute;
  height: 100vh;
  width: 100vw;

  margin: 0;

  pointer-events: none;
}

/* Top of homepage */
.home-header-desktop { 
  display: flex;
  gap: 1rem;
  width: 100%
}

.home-header-desktop div { 
  padding: 2rem 3rem;
  width: 50%;
  text-shadow: #000000 0 0 .125rem;
}

/* Upper-left logo and timestamp area */
.home-h-d-top-left svg {
  display: block;
  fill: #FFFFFF;
  filter: drop-shadow(0 0 .1rem #000000);
  margin-top: 0.4rem;

  height: 7.953rem;
  width: 30rem;
}

/* Upper-right "mobile view" text that balances the header */
.home-h-d-top-right {
  text-align: right;
  font-size: 1.2rem;
}

/* Styling for text next to and around desktop clock */
.home-h-d-time, .page-wheel-time {
  font-size: 1rem;
  font-weight: bold;
}

/* MOBILE: Base gradients for device shape */
.home-mobile {
  display: none;
  justify-content: center;
  align-items: center;

  height: 100vh;
  width: 100vw;
  background: linear-gradient(180deg,#7f8796 0%, #494958 5%, #322f3b 95%, #1b1827 100%);
  border-radius: 8vw;
}

/* MOBILE: Flat part of device shape */
.home-mobile-flat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  height: 96vh;
  width: 93vw;
  background-color: #484958;
  border-radius: 6vw;
}

/* MOBILE: Screen with cool design */
#home-mobile-screen {
  height: 40%;
  width: 84vw;

  background-image: url('/img/lcd.svg');
  box-shadow: inset 0.75vh 0.75vh 1.5vh #2b2c53;
  border-radius: 1vh;
  border-right: 0.8vh solid #62667a;
  border-bottom: 0.8vh solid #9a9dad;
  border-left: 0.8vh solid #62667a;
  border-top: 0.8vh solid #3a3e50;
  margin-top: 3vh;

  display: flex;
  justify-content: end;
}

/* MOBILE: The cool design in question */
#home-mobile-screen-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;

  background-image: url('/img/homeMobile.svg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 63.33333vh 38vh;
  overflow: hidden;

  filter: drop-shadow(.25vh .25vh .5vh #94a0b1); /* would be #2b2c5388 if didn't need to match Safari-patched colors */
}

/* MOBILE: Styling for text next to and around mobile clock */
.home-h-m-time {
  font-size: 1.75vh;
  font-weight: bold;

  position: absolute;
  padding-right: 1.25vh;
  padding-top: 1.75vh;
  z-index: 4;

  color: #2b2c53;
  text-shadow: #94a0b1 .25vh .25vh .5vh; /* would be #2b2c5388 if Safari didn't suck at transparent text colors */
}

/* MOBILE: Put the mobile nav menu NEXT to the logo, not under */
.home-mobile-lower {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;

  width: 84vw;
  margin-bottom: 3%;
}

/* MOBILE: Bunch of duct tape to make the date stamp sideways */
.home-mobile-sideways {
  display: flex;
  align-items: end;
  flex-direction: row;
  gap: 2vw;
  filter: drop-shadow(0 0 0.2vw #00000033); /* used to be #000000 but needs to match Safari-patched colors */
}

.home-m-s-timestamp {
  color: #2e2f38; /* would be #00000033 if Safari didn't suck at transparent text colors */
  font-size: 3vw;

  writing-mode: sideways-lr;
}

.home-m-s-timestamp span { font-size: 2vw; }

/* MOBILE: Cool sideways logo */
.home-mobile-sideways svg {
  height: 60.75vw;
  width: 16.107vw;

  fill: #2e2f38; /* used to be #00000033 but Safari */
}


/*                     */
/*    PAGE TEMPLATE    */
/*                     */

/* Adding the TabF5 logo on desktop nav subpages */
.global-nav-desktop-logo { 
  display: flex;
  justify-content: center; 
}

.global-nav-desktop-logo svg {
  height: 1.5906rem;
  width: 6rem;
  margin: 0 0.8rem 0 -0.4rem;

  fill: #45525f;
  filter: drop-shadow(0 0 0.075rem #293038bb);
}

/* Frame border thing on pages */
.page-body-frame {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;

  z-index: 1;
  pointer-events: none;
  
  box-sizing: border-box;
  border: 2vw solid #FFFFFF;
}

/* Base design for most pages */
#page-body, #page-body-contact {
  min-height: 100vh;
  width: 233.3333vh; /* 21:9 aspect ratio */

  background-attachment: fixed;
  background-image: url('/img/pageBG.svg');
  background-position: center;
  background-size: cover;

  transition: opacity 1s;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

/* Base styling for most subpage content */
#page-body p, #page-body-contact p { width: 80vw; }
#page-body *, #page-body-contact * { max-width: 80vw; }

/* MOBILE: Gradient container that holds main mobile nav */
#global-nav-mobile-subpage {
  display: none;
  justify-content: center;

  background: linear-gradient(180deg,#7f8796 0%, #494958 5%, #322f3b 95%, #1b1827 100%);

  width: 70vw;
  height: 60vh;
  border-radius: 4vh 0 0 4vh;
  padding: 1.5vh 0 1.5vh 1.5vh;

  position: fixed;
  top: 25vh;
  right: 0;
  transform: scale(0, 0);
  transform-origin: center right;
  transition: transform 0.25s;

  z-index: 3;
}

/* MOBILE: Solid gray container that holds nav buttons */
.global-nav-mobile-subpage-flat {
  background-color: #484958;

  height: 56vh;
  width: 70vw;
  padding: 3vh 0 1vh 0;
  border-radius: 3vh 0 0 3vh;
  
  display: flex;
  justify-content: center;
}

/* MOBILE: Logo on the upper portion of said mobile nav (on subpages) */
.global-n-m-subpage-logo svg {
  height: 3.977vh;
  width: 15vh;

  fill: #2e2f38; /* used to be #00000033 but Safari */
  filter: drop-shadow(0 0 0.2vw #00000033); /* used to be #000000 but needs to match Safari-patched colors */
  margin-bottom: 1.5vh;
}

/* MOBILE: Styling for button that you click to open mobile nav */
#global-nav-mobile-toggle {
  display: none;
  position: fixed;
  top: 50vh;
  right: 0;

  background-color: #484958;
  padding: 1vh;
  border-radius: 3vh 0 0 3vh;

  opacity: 40%;
  transition: opacity 0.1s;

  align-items: center;
  justify-content: center;
  z-index: 2;
}

#global-nav-mobile-toggle:hover { opacity: 100%; }

/* MOBILE: Styling for symbol INSIDE button that you click to open mobile nav */
#global-nav-mobile-toggle svg {
  height: 7vh;
  fill: #222222;
}

/* Page-specific stylings */
/* .page-b-f-works { border-image: url('/img/background-tiles-com-1026-tweaked.png') 50 round; } */
.page-b-f-carvings { border-image: url('/img/oak_veneer_01_diff_512.jpg') 60 round; }
.page-b-f-museum { border-image: url('/img/background-tiles-com-1038-tweaked.png') 48 round; }
.page-b-f-wheel { border-image: url('/img/background-tiles-com-1030.png') 77 round; }
.page-b-f-stuff { border-image: url('/img/background-tiles-com-5012.png') 28 round; }
.page-b-f-stickers { border-image: url('/img/background-tiles-com-1057-tweaked.png') 60 round; }
.page-b-f-contact { border-image: url('/img/background-tiles-com-1033.png') 30 round; }


/*                */
/*    CARVINGS    */
/*                */

/* CSS grid for all carvings */
.carvings-models {
  width: 75rem;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10rem;
  grid-row-gap: 5rem;
}

/* Grid settings per 3D object */
.carvings-models model-viewer {
  min-height: 15rem;
  width: 100%;
}

/* Hide the weird black shadows when loading */
.modelviewer-progress-bar {
  display: none;
  visibility: hidden;
}

/* Each carving gets a cool label */
.carvings-models-label {
  display: flex;
  gap: 2rem;

  justify-content: space-around;
  align-items: center;
}

/* Cool icon on each carving's label */
.carvings-models-label svg {
  width: 4rem;
  height: 4rem;
  fill: #ffffff;
}

/* Special media query to reduce columns to 2 on square windows */
@media (max-aspect-ratio: 1.4) { .carvings-models { grid-template-columns: 1fr 1fr; } }


/*             */
/*   MUSEUM    */
/*             */

/* Base container for each exhibit's row/section */
.page-museum-exhibit {
  display: flex;
  justify-content: center;
  align-items: start;

  gap: 0.75rem;
}

/* Alternate placement of text and images down the page */
.page-museum-exhibit-rev { flex-direction: row-reverse; }

/* Exhibit picture height */
.page-museum-exhibit img {
  height: 30vw;
  width: auto;
}

/* Make the pictures glow on hover */
.page-museum-exhibit-pic:hover img { 
  transition: 0.1s filter;
  filter: drop-shadow(0 0 0.5rem #dddddd); 
}

/* Exhibit picture surroundings (color) */
.page-museum-exhibit-pic {
  padding: 4vw;
  min-width: 30vw;

  border-radius: 0.5rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background colors per exhibit image area */
.page-museum-e-p-20q { background-color: #ff000033; }
.page-museum-e-p-3ds { background-color: #56cfff33; }
.page-museum-e-p-chronograph { background-color: #042a6333; } 
.page-museum-e-p-clipplus { background: linear-gradient(90deg, #33333366 20%, #a5000033 60%, #008cff33 100%); }
.page-museum-e-p-cubeworld { background: conic-gradient(from 90deg,#ff000033,#0000ff33,#00ff0033,#ffff0033, #ff000033); }
.page-museum-e-p-flipvid { background-color: #008cff33; }
.page-museum-e-p-h1n { background-color: #0000ff33; }
.page-museum-e-p-icf-c318, .page-museum-e-p-mc-101 { background-color: #33333366; }
.page-museum-e-p-icy, .page-museum-e-p-pugg, .page-museum-e-p-roboquad { background-color: #dddddd33; }
.page-museum-e-p-juke { background: linear-gradient(90deg, #c70b0b33 20%, #00ccff33 100%); }
.page-museum-e-p-navage { background-color: #00ffff33; }
.page-museum-e-p-po33 { background-color: #fc691b33; }
.page-museum-e-p-shockwave { background-color: #56a5ff33; }

/* Special sizes for really wide images */
.page-museum-e-p-clipplus img { height: 20vw; }

/* Speaker icon that shows up during audio playback */
#museum-speaker-icon { 
  position: absolute;

  fill: #ffffff; 
  filter: drop-shadow(0 0 1rem #000000);

  height: 6rem;
  width: auto;
}

/* Styling for text description boxes */
.page-museum-exhibit-desc {
  background-color: #ffffff;
  color: #000000;

  border-radius: 0.5rem;

  width: 24vw;
  padding: 1rem 2rem;
  white-space: normal;
}

/* Styling for exhibit titles */
.page-museum-exhibit-desc h3 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: -0.5rem;
  margin-top: 1rem;
}

/* Duct tape fix to ensure text wraps inside the description box properly */
.page-museum-exhibit-desc p { width: inherit !important; }


/*           */
/*   WHEEL   */
/*           */

/* Layout for game text box, wheel, and Peter */
.page-wheel-area {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 2rem;
}

/* Styling for both desktop and mobile versions of text box */
#page-wheel-game-desktop, #page-wheel-game-mobile {
  height: 10rem;
  width: 13.4rem;

  border-radius: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  
  background-color: #ffffff;
  color: #000000;
}

/* Hide the mobile version by default (but also use vw units on mobile) */
#page-wheel-game-mobile {
  display: none; 

  height: 30vw;
  width: 70vw;
}

/* Fix to allow text to wrap properly inside box (and also fix spacing) */
#page-wheel-game-desktop p, #page-wheel-game-mobile p { 
  width: inherit; 
  margin-top: 0;
}

/* Text color for bet amount */
#page-wheel-bet { 
  color: #cc3355;
  font-weight: bold;
}

/* Text color for wallet amount */
#page-wheel-wallet { 
  color: #119933;
  font-weight: bold;
}

/* Arrange buttons and such inside text box vertically */
#page-wheel-bet-ui { 
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Styling for button selection area (bet amount options, color options, etc) */
#page-w-b-ui-select { display: flex; }

#page-w-b-ui-select * { flex-grow: 1; }

/* More text styling for bet amount */
#selected-bet {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

/* Really shitty fix that displays the bet raise button over the mobile nav button */
#higher-bet { z-index: 3; }

/* Animation keyframes for bouncing win text */
@keyframes waving {
  0% { transform: translateY(-15%) }
  50% { transform: translateY(15%) }
  to { transform: translateY(-15%) }
}

/* Animation stylings for bouncing win text */
#wheel-wavy span {
  display: inline-block;
  animation: waving .6s ease-in-out infinite
}

/* Animation offsets for bouncing win text */
#wheel-wavy span:nth-of-type(1) { animation-delay: 0s }
#wheel-wavy span:nth-of-type(2) { animation-delay: .05s }
#wheel-wavy span:nth-of-type(3) { animation-delay: .1s }
#wheel-wavy span:nth-of-type(4) { animation-delay: .15s }
#wheel-wavy span:nth-of-type(5) { animation-delay: .2s }
#wheel-wavy span:nth-of-type(6) { animation-delay: .25s }
#wheel-wavy span:nth-of-type(7) { animation-delay: .3s }
#wheel-wavy span:nth-of-type(8) { animation-delay: .35s }
#wheel-wavy span:nth-of-type(9) { animation-delay: .4s }

/* Center the time in the text box when you get denied for having $0 */
.page-wheel-time { text-align: center; }

/* Stylings for Peter (no pupil) */
.page-wheel-dealer { position: relative; }

.page-wheel-dealer img { 
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.page-wheel-dealer .dealer-base { height: 15rem; }

/* Stylings for Peter's pupil (animated) */
.page-wheel-dealer #dealer-eye { 
  height: 3.1717rem; 

  position: absolute;
  top: 3.4rem;
  left: 2.45rem;

  transition: 0.3s top, 0.3s left; /* also update in wheel.js */
}

/* Wheel size */
.page-wheel-main {
  width: 30rem;
  height: 30rem;
}

/* Temporary style to keep the pupil from jiggling when the window resizes */
.HOLD-IT-RIGHT-THERE * { transition: none !important; }


/*             */
/*    STUFF    */
/*             */

/* Center everything on this page pretty more */
.page-stuff-section { text-align: center; }

/* Cool font for hit counter */
#page-stuff-hits-counter {
  font-family: 'DSEG 7-BI';
  font-size: 3rem;
  color: #ff5252;

  margin-bottom: 1rem;
  white-space: nowrap;
}


/*                     */
/*    FREE STICKERS    */
/*                     */

/* CSS grid for stickers */
.stickers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
  grid-row-gap: 5rem;
}

/* Grid settings per sticker (perspective allows for 3D effect) */
.stickers-grid-sticker {
  display: flex;
  justify-content: center;
  align-items: center;

  perspective: 0.1rem;
  transition: transform 0.05s ease-in-out;
}

/* Grid settings for sticker SVGs themselves (with stuff for 3D tilt) */
.stickers-grid-sticker img { 
  width: 100%; 

  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* Each sticker gets a cool label */
.stickers-grid-label {
  display: flex;
  gap: 2rem;

  justify-content: center;
  align-items: center;
}

/* Hi Lewis! */
#stickers-lewis {
  width: 16rem;
}


/*               */
/*    CONTACT    */
/*               */

/* Special full-height page layout with upside-down background */
#page-body-contact { 
  background-image: url('/img/pageBG_inv.svg');
  height: 100vh; 
}

/* Center everything and align it in a column */
.page-body-contact-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;

  font-size: 1.7rem;
}

.page-body-contact-centered span { text-align: center; }

/* SVG of email address */
.page-body-contact-centered svg {
  height: 1.7rem;
  margin-top: 0.6rem;

  fill: #ffffff;
}


/*              */
/*    Mobile    */
/*              */

/* By default, you cannot see the special homepage */
.home-mobile { display: none; }

/* But if browser window is thinner than 3:4 - 4:5 aspect ratio... */
@media (max-aspect-ratio: 0.77) {

  /* Swap desktop homepage for mobile */
  .global-nav-desktop { display: none; }
  .home-header-desktop { display: none; }
  #home-body { display: none; }
  #home-body-randall { display: none; }
  body { background: #111122; }

  .home-mobile { display: flex; }
  #global-nav-mobile-subpage { display: flex; }
  #global-nav-mobile-toggle { display: flex; }

  #home-body {
    background: #111122;
    box-shadow: none;
  }

  #page-body, #page-body-contact { background-position: 32%; }

  .carvings-models { grid-template-columns: 1fr; }
}

/* Patch for smaller screens */
@media only screen and ((max-width: 800px) or (max-height: 500px)) {
  
  html { font-size: 12px; }

  .home-h-d-top-left svg {
    height: 3.977rem;
    width: 15rem;
  }

  .page-body-frame { border-width: 4vw; }

  #page-body h2, #page-body-contact h2 { font-size: 1.8rem; }
  #page-body p, #page-body-contact p { font-size: 1.2rem; }

  .page-museum-exhibit { 
    align-items: center;
    flex-direction: column; 
  }
  .page-museum-exhibit-pic { width: 72vw; }
  .page-museum-exhibit img { height: 50vw; }
  .page-museum-exhibit-desc { width: inherit; }

  .page-museum-e-p-clipplus img { height: 33vw; }

  .page-wheel-dealer .dealer-base { height: 8rem; }

  .page-wheel-dealer #dealer-eye { 
    height: 1.6916rem; 

    top: 1.8133rem;
    left: 1.3067rem;
  }

  .page-wheel-main {
    width: 40vw;
    height: 40vw;
  }

  #page-wheel-game-desktop { display: none; }
  #page-wheel-game-mobile { display: flex; }

  .stickers-grid { grid-template-columns: 1fr; }
}

/* Disable press-and-hold nav buttons on touch screens (they don't work) */
@media (pointer: coarse) { .global-nav-desktop-button { display: none; } }

/* Even more duct tape fixes for most phone screens */
@media (max-aspect-ratio: 0.66) {
  .home-mobile-sideways svg {
    height: 40.5vw;
    width: 10.738vw;
  }

  #global-nav-mobile { 
    width: 60vw;
    gap: 3vw;
  }

  .g-n-m-btn, .g-n-m-btnshadow {
    height: 6vh;
    width: 6vh;
    font-size: 4.5vh;
  }

  .g-n-m-btnlabel { 
    width: 8vh; 
    gap: 1vh;
  }

  #page-wheel-game-mobile { height: 18vh; }
}


/*                   */
/*  Ultra-Ultrawide  */
/*                   */

/* Why would you have a screen wider than this? */
@media (min-aspect-ratio: 2.4) {

  html { font-size: 2vh; }

  .home-h-d-top-left svg {
    height: 7.953rem;
    width: 30rem;
  }

  .global-nav-desktop { max-width: 175vh; }

  #page-body, #page-body-contact { 
    background-position: center 10%; 
    width: 100%;
  }

  .page-body-frame { border-width: 1vw; }

  .carvings-models { grid-template-columns: 1fr 1fr 1fr; }

  .page-wheel-dealer .dealer-base { height: 15vh; }

  .page-wheel-dealer #dealer-eye { 
    height: 3.1717vh; 

    top: 3.4vh;
    left: 2.45vh;
  }

  .page-wheel-main { 
    width: 40vh; 
    height: 40vh; 
  }

  #page-wheel-game-desktop { 
    display: flex; 
    height: auto;
  }

  #page-wheel-game-mobile { display: none; }

  .stickers-grid-sticker img { width: 50rem; }

  .stickers-grid { grid-template-columns: 1fr 1fr; }
}