@import "reset.css";

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Jost&family=Major+Mono+Display&family=Nova+Mono&display=swap');


@media (orientation: portrait) {
  :root {
    --height-content: 85vh;
    --width-content: 90vw;
  }
}

@media (orientation: landscape) {
  :root {
    --height-content: 90vh;
    --width-content: 85vw;
  }
}

:root {
  /* pivot animation */
  --time: 0.250s;

  /* google fonts */
  --font-prop: 'Cinzel', serif;
  --font-val: 'Jost', sans-serif;
  --font-button: 'Major Mono Display', monospace;

  /* fixed dimensions */
  --border-content: 1px;
  --padding-content: 6px;
  --edge-content: calc(var(--border-content) * 2);
  --cardHeight: calc(var(--height-content) - var(--edge-content));
  --cardWidth: calc(var(--width-content) - var(--edge-content));

  /* rgb values */
  --jet-292929: 41, 41, 41;
  --platinum-e3e3e3: 227, 227, 227;
  --silver-c2c2c2: 194, 194, 194;
  --lightGray-cccccc: 204, 204, 204;
  --spanishGray-8e8e8e: 142, 142, 142;
  --bleuDeFrance-0c85e9: 12, 133, 233;

  --eerieBlack-222222: 34, 34, 34;
  --jet-373737: 55, 55, 55;
  --richBlack-0a0a0a: 10, 10, 10;
  --jet-2c2c2c: 44, 44, 44;
  --davysGrey-474747: 71, 71, 71;
  --dimGray-666666: 102, 102, 102;

}

* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  font-family: sans-serif;
}

  /* color assignments */
body {
  /* overflow: hidden; */

  --clr-btnActive: 12, 133, 233; /* bleuDeFrance-0c85e9 */
  --clr-bgMain: 204, 204, 204; /* lightGray-cccccc */
  --clr-cardBorder: 194, 194, 194; /* silver-c2c2c2 */
  --clr-bgFront: 227, 227, 227; /* platinum-e3e3e3 */
  --clr-bgBack: 227, 227, 227; /* platinum-e3e3e3 */
  --clr-btn: 142, 142, 142; /* spanishGray-8e8e8e */
  --clr-text: 41, 41, 41; /* jet-292929 */
  --clr-imgShadow: 142, 142, 142; /* spanishGray-8e8e8e */

  background-color: rgb(var(--clr-bgMain));
}

body.dark {
  --clr-bgMain: 34, 34, 34; /* eerieBlack-222222 */
  --clr-cardBorder: 44, 44, 44; /* jet-2c2c2c */
  --clr-bgFront: 10, 10, 10; /* richBlack-0a0a0a */
  --clr-bgBack: 10, 10, 10; /* richBlack-0a0a0a */
  --clr-btn: 71, 71, 71; /* davysGrey-474747 */
  --clr-text: 194, 194, 194; /* silver-c2c2c2 */
  --clr-imgShadow: 102, 102, 102; /* dimGray-666666 */

  background-color: rgb(var(--clr-bgMain));
}

.darkMode {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
}

main {
  background-color: rgb(var(--clr-bgMain));
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (orientation: portrait) {
  main {
    flex-direction: column;
    gap: 2vh;
  }
}

@media (orientation: landscape) {
  main {
    flex-direction: row;
    gap: 2vw;
  }
}

section {
  opacity: 0;
}

.content, .content > .outerWrap, .content .innerWrap, .side {
  height: var(--height-content);
  width: var(--width-content);
}

.content > .outerWrap {
  perspective: 500rem;
}

.content .innerWrap {
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform var(--time);
  -moz-transition: transform var(--time);
  transition: transform var(--time);
}

@media (orientation: portrait) {
  .content > .outerWrap.pivot > .innerWrap {
    transform: rotateY(180deg);
  }
}

@media (orientation: landscape) {
  .content > .outerWrap.pivot > .innerWrap {
    transform: rotateX(180deg);
  }
}

.side {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: var(--border-content) solid rgb(var(--clr-cardBorder));
  border-radius: 0.8rem;
}

.front {
  background-color: rgb(var(--clr-bgFront));
}

.back {
  background-color: rgb(var(--clr-bgBack));
}

@media (orientation: portrait) {
  .back {
    transform: rotateY(180deg);
  }
}

@media (orientation: landscape) {
  .back {
    transform: rotateX(180deg);
  }
}



.panelFrame {
  width: var(--cardWidth);
  height: var(--cardHeight);
  max-width: var(--cardWidth);
  max-height: var(--cardHeight);
}

/*
.panelFrame::-webkit-scrollbar {
  display: none;
}
*/

.panelWrap {
  display: flex;
  gap: calc(var(--padding-content) * 2);
}

@media (orientation: portrait) {
  .panelFrame {
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .panelWrap {
    flex-direction: row;
  }
}

@media (orientation: landscape) {
  .panelFrame {
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
  .panelWrap {
    flex-direction: column;
  }
}

.panel {
  min-width: var(--cardWidth);
  min-height: var(--cardHeight);
  max-width: var(--cardWidth);
  max-height: var(--cardHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: center;
}

.panel * {
  max-width: var(--cardWidth);
  max-height: var(--cardHeight);
}

.pane {
  max-width: calc(var(--cardWidth) * .92);
  max-height: calc(var(--cardHeight) * .92);
  user-select: none;
}

.pane * { user-select: none; }

.imgSingle {
  box-shadow: 0 0 10px 4px rgb(var(--clr-imgShadow));
}

.txtProps {
  color: rgb(var(--clr-text));
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 3vw;
  align-content: center;
  align-items: center;
  height: var(--height-content);
  width: var(--width-content);
  padding: 2.5rem;
}

.txtProp {
  text-align: right;
  font-family: var(--font-prop);
  font-size: 1.6rem;
  text-transform: uppercase;
}

.txtVal {
  font-family: var(--font-val);
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.5;
}

.noteProp {
  font-size: 1.4rem;
}

.noteVal {
  font-size: 2rem;
  font-style: italic;
  font-weight: normal;
  line-height: 1.2;
}

@media (max-width: 500px) {
  .txtVal {
    font-size: 2.2rem;
  }
  .noteVal {
    font-size: 1.6rem;
  }
}

@media (max-height: 500px) {
  .txtVal {
    font-size: 2.2rem;
  }
  .noteVal {
    font-size: 1.6rem;
  }
}

.controls .innerWrap {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (orientation: portrait) {
  .controls .innerWrap {
    flex-direction: row;
    width: calc(var(--cardWidth) * 0.8);
    height: auto;
  }
}

@media (orientation: landscape) {
  .controls .innerWrap {
    flex-direction: column;
    width: auto;
    height: calc(var(--cardHeight) * 0.8);
  }
}

.iterate {
  background-color: rgb(var(--clr-bgMain));
  border: 4px solid rgb(var(--clr-bgMain));
  border-radius: 1rem;
  color: rgb(var(--clr-btn));
  padding: 0.2rem;
  height: 6rem;
  aspect-ratio: 1;
}

.iterate > svg {
  height: 100%;
  width: 100%;
}

.iterate:active {
  border-color: rgb(var(--clr-btnActive));
  color: rgb(var(--clr-btnActive));
}

.showMe {
  opacity: 1;
  transition: opacity calc(var(--time) / 2) ease-in;
}

.hideMe {
  opacity: 0;
}