@property --gradient-start-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #848584a6;
}

@property --gradient-end-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #7879791e;
}

@font-face {
  font-family: "Milker";
  src: url("fonts/Milker.otf") format("otf");
}

* {
  box-sizing: border-box;
}

:root {
  --tier1: #dddfee;
  --tier2: #d5d3e9;
  --tier3: #d3cbe7;
  --tier4: #d3c3e4;
  --tier5: #d4bbe2;
  --tier6: #d5b0de;
  --tier7: #dba7dc;
  --tier8: #db9fd1;
  --tier9: #d991c1;
  --tier10: #da86b0;
  --tier11: #db7698;
  --tier12: #dc6a7d;
  --tier13: #dd5a5a;
  --tier14: #dc514c;
  --tier15: #da493e;
  --tier16: #da4534;
  --tier17: #d93e26;
  --tier18: #cd3f23;
  --tier19: #c03a1b;
  --tier20: #b23415;
  --tier21: #a23010;
  --tier22: #9b2b0c;
  --tier23: #932b0b;
  --tier24: #892608;
  --tier25: #832607;
  --tier26: #752105;
  --tier27: #6c1e04;
  --tier28: #601a02;
  --tier29: #5A1802;
  --tier30: #521700;
  --tier31: #4F0A01;
  --tier32: #4A0207;
  --tier33: #470313;
  --tier34: #42041E;
  --tier35: #400427;
  --tier36: #3D0630;
  --tier37: #380635;
  --tier38: #360432;
  --tier39: #250630;
  
  --enj0: #E67C73;
  --enj1: #ED9573;
  --enj2: #F3AE72;
  --enj3: #F8C670;
  --enj4: #FCDE6C;
  --enj5: #FFF666;
  --enj6: #E0EB72;
  --enj7: #C1DF7B;
  --enj8: #A1D381;
  --enj9: #7EC786;
  --enj10: #57BB8A;

  --text: #211d27;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/1.45 var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }

  --gradient-midpoint: 50%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  background: url("../images/ffffff.webp") no-repeat center center fixed;
  background-size: cover;

  margin: 0;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

#app {
  width: calc(1920px * 0.7);
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;

  padding: 10px 0px;
  /* background: linear-gradient(to right, var(--gradient-start-color), var(--gradient-end-color) var(--gradient-midpoint)); */
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}

/* */

@keyframes displayAndFadeOut {
  0% {
    display: block;
    opacity: 100%;
  }

  80% {
    display: block;
    opacity: 100%;
  }

  100% {
    display: none;
    opacity: 0%;
  }
}

@keyframes slideRightAndFadeIn {
  0% {
    transform: perspective(300px) translateX(-67px) translateZ(20px);
    opacity: 0%;
  }

  100% {
    transform: translateX(0px) translateZ(0px);
    opacity: 100%;
  }
}

.display-and-fade-out {
    display: block;
    animation: displayAndFadeOut 5s forwards;
}

.slide-right-and-fade-in {
  transform: perspective(367px);
  animation: slideRightAndFadeIn 1.2s ease-out forwards
}

.bolded {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.horizontal-flex {
  display: flex;
  flex-direction: row;
  gap: 10px;

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

.vertical-flex {
  display: flex;
  flex-direction: column;
  gap: 10px;

  align-items: center;
}

.glass {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.strong-glass {
  background-color: rgba(255, 254, 254, 0.349);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.blending-shadow {
  text-shadow: 3px 3px 9px rgba(0, 0, 0, 0.15);
}

.title-text {
  font-size: 82px;
  line-height: 160%;

  font-family: "Milker", var(--sans);
}

.splash-text {
  color: rgb(32, 88, 77);
  font-size: 130%;
  line-height: 140%;
}

#form {
  width: 500px;
  max-width: 80vw;
  height: 150px;
  min-height: min-content;

  /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  grid-template-areas: 
    "min-tier max-tier"
    "username username"
    "submit submit";
  align-content: space-around; */

  display: flex;
  flex-direction: column;
  gap: 10px;

  border-radius: 10px;
  border: 3px solid rgba(0, 0, 0, 0.616);

  padding: 15px 25px 65px 25px;
}

#submit-button {
  position: absolute;
  left: 0%;
  bottom: 0%;
  right: 0%;
  margin: 0 auto;

  height: 50px;

  color: #fbf5ff;
  background-color: #6b6b6b2f;

  font-size: large;
  font-weight: bolder;

  border-radius: 0px 0px 10px 10px;
}

#submit-button:hover {
  text-decoration: underline;
  color: #42ffe6;
  background-color: #5a6e7441;
}

.help-text {
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: help;
}

.text-field {
  height: 30px;
}

.small-text-field {
  width: 50px;

  font-size: large;
  text-align: center;
}

.medium-text-field {
  width: 95px;

  font-size: large;
  text-align: center;
}

.large-text-field {
  width: 167px;

  font-size: large;
  text-align: center;
}

.cursor-pointer:hover {
  cursor: pointer;
}

#recommendations-container {
  width: 1300px;
  max-width: 80vw;
  display: none;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "title title title";
  place-items: center;
}

#recommendations-container > h2 {
  grid-area: title;
}

#recommendations-container > * {
  max-width: calc(100% - 5px);
}

.level-card {
  width: 500px;
  height: 250px;

  gap: 4px;

  border-radius: 30px;
  border: 3px solid rgba(0, 0, 0, 0.25);

  background-image:
    linear-gradient(to bottom, rgba(206, 206, 206, 0.733) 0%, rgba(255, 255, 255, 0.452) 90%),
    url("https://levelthumbs.prevter.me/thumbnail/2/small");

  background-clip: padding-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.level-card-widgets {
  position: absolute;
  right: 0%;
  bottom: 0%;

  margin-right: 15px;
  margin-bottom: 15px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "showcase gddl-link"
    "rec-info trash-rec";
  place-items: center;
  gap: 10px;

}

.trash-rec:hover, .showcase:hover {
  filter: invert(21%) sepia(60%) saturate(7473%) hue-rotate(354deg) brightness(95%) contrast(124%);
}

.rec-info:hover {
  filter: invert(69%) sepia(25%) saturate(0%) hue-rotate(212deg) brightness(95%) contrast(90%);
}

.gddl-link:hover {
  filter: invert(80%) sepia(44%) saturate(1820%) hue-rotate(358deg) brightness(105%) contrast(106%);
  cursor: pointer;
}

.trash-rec {
  grid-area: trash-rec;
}

.rec-info {
  grid-area: rec-info;
}

.showcase {
  grid-area: showcase;
}

.gddl-link {
  grid-area: gddl-link;
}

.level-name {
  margin-bottom: 0px;
}

.tier-enjoyment-display {
  position: absolute;
  top: 3%;
  right: 3%;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-value {
  padding: 6px 12px 6px 12px;
  border-radius: 10px;
}

.skills-display {
  position: absolute;
  left: 0%;
  bottom: 0%;

  margin-left: 15px;
  margin-bottom: 15px;

  border-radius: 10px;
  border: inherit;

  padding: 5px 14px;

  font-size: 90%;
  max-width: calc(100% - 108px);
}

.progress-text {
  color: #295e6d;
}

#time-elapsed {
  color: gray;
}
    
#disclaimer {
  display: none;
}

.error-message-text {
    display: none;
    color: red;
}

#footer {
    background-color: #000000;
    font-size: medium;
    color: #ffffff;

    position: absolute;
    bottom: 0%;

    width: 100%;
    margin: 0 auto;
    padding-top: 7px;
    padding-bottom: 7px;
}

#faq {
  display: none;
}