:root {
  --purple: #7238BD;
  --purple-low-opacity: #44235B;
  --yellow: #FFCB3C;
  --black: #2B2D42;
  --black-low-opacity: #555871d4;
  --blue: #97EFE9;
  --red: #CC3F0C;
  --red-low-opacity: #cc3f0c35;
  --white: #ffffff;
  --white-low-opacity: #ffffffd4;
  --light-gray: #e4e4e4;

  --background-color: #341C3A;

  --modal-background-color: #fff2d5;
  --modal-backdrop-background-color: #0000004e;

  --border-radius: 1.225rem;
  --default-scale: scale(1.05);
  --default-transform-transition: transform 150ms ease-in-out;
}

@font-face {
  font-family: "Berkshire Swash";
  src: url(../assets/fonts/BerkshireSwash-Regular.ttf) format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Mystery Quest";
  src: url(../assets/fonts/MysteryQuest-Regular.ttf) format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(../assets/fonts/Roboto-Regular.ttf) format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url(../assets/fonts/Roboto-Bold.ttf) format("truetype");
  font-weight: bold;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

.no-vis {
  visibility: hidden;
}

body {
  font-display: swap;
  font-family: "Roboto", sans-serif;
  color: var(--white);
  background-color: var(--background-color);
}

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
}

canvas.star-bg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Berkshire Swash", cursive, serif;
  font-weight: normal;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

:modal {
  display: flex;
  flex-direction: column;
  max-width: 70vw;
  max-height: 80vh;
  margin: auto;
  border-radius: var(--border-radius);
  border: 3px solid var(--yellow);
  padding: 1rem;
  overflow: visible;
  background-color: var(--modal-background-color);
}

:modal::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -12rem;
  width: 13rem;
  aspect-ratio: 1 / 1;
  background-image: url(../assets/images/oracle.png);
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleX(-1);
  filter: drop-shadow(0px 0px 2px var(--black-low-opacity));
}

:modal form.default-dialog-form {
  display: flex;
  justify-content: space-evenly;
  margin-top: 2rem;
}

::backdrop {
  background-color: var(--modal-backdrop-background-color);
}

button:enabled {
  cursor: pointer;
}

input[type="text"],
input[type="number"] {
  background-color: var(--light-gray);
  border: 3px solid var(--yellow);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-size: 1rem;
  box-shadow: inset 0 0 4px var(--black-low-opacity);
}

.primary-button,
.secondary-button,
.tertiary-button,
.destructive-button {
  font-family: "Mystery Quest", cursive, serif;
  border: none;
  text-decoration: none;
  color: var(--black);
  background: none;
  font-size: 1rem;
  border-radius: var(--border-radius);
  padding: 0.75rem 1.75rem;
  display: inline-block;
  transition: var(--default-transform-transition), opacity 350ms ease-in-out;
}

.primary-button:not(:disabled):hover,
.secondary-button:not(:disabled):hover,
.tertiary-button:not(:disabled):hover,
.destructive-button:not(:disabled):hover {
  transform: var(--default-scale);
}

.primary-button:disabled,
.secondary-button:disabled,
.tertiary-button:disabled,
.destructive-button:disabled {
  opacity: 0.4;
}

.primary-button,
.secondary-button,
.destructive-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.primary-button::before,
.secondary-button::before,
.destructive-button::before {
  content: '';
  position: absolute;
  z-index: -2;
  border-radius: var(--border-radius);
  display: block;
  width: 100%;
  height: 100%;
}

.primary-button::after,
.secondary-button::after,
.destructive-button::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: var(--border-radius);
  display: block;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
}

.primary-button {
  color: #3E2605;
}

.primary-button::before {
  box-shadow: 0px 0px 5px 3px rgba(111, 84, 0, 0.16);
  border: 0.1px solid #E6A121;
  background: radial-gradient(60.71% 50% at 50% 50%, #D27D08 71.13%, rgba(255, 203, 60, 0.85) 100%);
}

.primary-button::after {
  border: 1.5px solid rgba(242, 213, 107, 0.59);
  background: linear-gradient(95deg, #DA8207 -0.22%, #DD9318 10.66%, #FFCB3C 26.65%, #FFCB3C 78.95%, #E39C1E 93%, #FBC63A 97.24%);
}

.secondary-button {
  color: #3E2605;
}

.secondary-button::before {
  box-shadow: 0px 0px 5px 3px rgba(108, 108, 108, 0.16);
  border: 0.1px solid #838383;
  background: radial-gradient(60.71% 50% at 50% 50%, #E1E1E1 71.13%, rgba(157, 157, 157, 0.85) 100%);
}

.secondary-button::after {
  border: 1.5px solid rgba(174, 174, 174, 0.59);
  background: linear-gradient(95deg, #717171 -0.22%, #9E9898 10.66%, #D6D6D6 26.65%, #D6D6D6 78.95%, #9E9E9E 93%, #9A9A9A 97.24%);
}

.destructive-button {
  color: var(--white);
}

.destructive-button::before {
  box-shadow: 0px 0px 5px 3px rgba(111, 0, 0, 0.16);
  border: 0.1px solid #e64f21;
  background: radial-gradient(60.71% 50% at 50% 50%, #d20808 71.13%, rgba(255, 86, 60, 0.85) 100%);
}

.destructive-button::after {
  border: 1.5px solid rgba(242, 132, 107, 0.59);
  background: linear-gradient(95deg, #da1207 -0.22%, #dd4318 10.66%, #ff3c3c 26.65%, #ff423c 78.95%, #e32e1e 93%, #fb673a 97.24%);
}

.tertiary-button {
  text-decoration: underline;
}

.general-link {
  color: var(--yellow);
  text-decoration: none;
}

.general-link:hover {
  text-decoration: underline;
}

.card {
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 1rem;
  z-index: 0;
}

.white-card {
  background-color: var(--white-low-opacity); 
  border: 2px solid var(--white);
  color: var(--black);
}

.purple-card {
  background-color: var(--purple-low-opacity);
  border: 2px solid var(--purple);
}

.icon-button {
  display: inline-block;
  width: 4rem;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  transition: var(--default-transform-transition);
}

.icon-button:hover,
.info-button:hover {
  transform: var(--default-scale);
}

.info-button {
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-image: url(../assets/images/icons/info_icon.svg);
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  transition: var(--default-transform-transition);
}

#short_settings_icon_list {
  list-style-type: none;
  display: flex;
}

#home_button {
  background-image: url(../assets/images/icons/house.webp)
}

versus-mute-button[data-muted="true"] button {
  background-image: url(../assets/images/icons/sound_muted.webp);
}

versus-mute-button[data-muted="false"] button {
  background-image: url(../assets/images/icons/sound.webp);
}

#settings_button {
  background-image: url(../assets/images/icons/gear.webp);
}

input[type="range"] {
  appearance: none;
  cursor: pointer;
  background: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--yellow);
  height: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 3px 5px var(--red-low-opacity);
}

input[type="range"]::-moz-range-track {
  background-color: var(--yellow);
  height: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 3px 5px var(--red-low-opacity);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background-image: url(../assets/images/icons/gemstone.svg);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: contain;
  height: 2.5rem;
  aspect-ratio: 1 / 1;
  margin-top: -0.825rem;
}

input[type="range"]::-moz-range-thumb {
  border: none;
  appearance: none;
  background-image: url(../assets/images/icons/gemstone.svg);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: contain;
  height: 2.5rem;
  aspect-ratio: 1 / 1;
  margin-top: -0.825rem;
}

versus-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}