/*------------*/
/* Background */
/*------------*/

html {
  background-color: #300060; /* fallback background */
  margin: 0;
  padding: 0;
  overflow-x:hidden;
}

body::before {
  content: ""; /* required to make this element exist */
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  background-image: url("/Resources/Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2; /* behind constellations */
  pointer-events: none; /* just in case */
}
  
body {
  overflow-x:hidden;
  min-height: 100%;
  background: transparent;
  margin: 0;
  padding: 0 0 2dvmin 0;
  text-align: center;
  font-family: 'New Rocker';
  color: #bdbdbd;
  font-size: 5dvmin;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#constellations {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

main {
  padding-bottom:2dvmin;
}

/*---------*/
/* Content */
/*---------*/

h2 {
  font-size: 2dvmin;
  margin-top:-7dvmin;
}

hr {
  width:50dvw;
  border: none;
  height: 3px;
  background-color: #bdbdbd;
}

/* small hr */
.divider {
  width:25dvw;
}

/* homepage icons */
.imgButton {
  width: 20dvmin;
  height: 20dvmin;
  padding:2dvmin;
  font: 1dvmin Arial;
  border-radius: 50%;
  border: 3px solid #bdbdbd;
  object-fit: cover;
}

.imgButton:active, .imgButton:hover {
  border: 3px solid #880000;
}

a {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: #EE0000;
  padding-bottom: 1dvmin;
}

a:hover, a:active, button:hover, button:active {
  color: #880000;
}

.dead, .dead:hover, .dead:active {
  color: #880000;
}

button {
  background:none;
  border:3px solid #EE0000;
  font-family: 'New Rocker';
  color: #EE0000;
  font-size: 5dvmin;
  border-radius: 20%;
  padding:3dvmin;
  display: block;
  margin:1dvmin auto;
}
  
p {
  margin:0;
  font-size:4dvmin;
}

.premium {
  text-shadow: 3px 3px 3px purple;
}

/*------------*/
/* Characters */
/*------------*/

.roman, .sage{
margin-top:1em;
color:red;
font-weight: bold;
}

.elena {
margin-top:1em;
color:yellow;
font-weight: bold;
}

.iris, .darian {
margin-top:1em;
color:blue;
font-weight: bold;
}

.walter {
margin-top:1em;
color:brown;
font-weight: bold;
}

.trent {
margin-top:1em;
color:orange;
font-weight: bold;
}

.dave {
margin-top:1em;
color:pink;
font-weight: bold;
}

.fireRider {
margin-top:1em;
color:firebrick;
font-weight: bold;
}

.sidecharacter {
margin-top:1em;
color:inherit;
font-weight: bold;
}

/*--------------*/
/* Slide Screen */
/*--------------*/

/* start homepage hidden */
.homeJs #transitionContainer {
  min-height: 100dvh;
  width: 100%;
  transform: translateY(-300%);
  transition: transform 0.6s ease-in-out;
}

/* when homepage is "ready", slide it down into view */
.homeJs #transitionContainer.ready {
  transform: translateY(0);
}

/* when leaving, slide homepage back up */
.homeJs #transitionContainer.slide-out {
  transform: translateY(-300%);
}

/* same stuff, but down for all other pages */
.otherJs #transitionContainer {
  min-height: 100dvh;
  width: 100%;
  transform: translateY(300%);
  transition: transform 0.6s ease-in-out;
}

.otherJs #transitionContainer.ready {
  transform: translateY(0);
}

.otherJs #transitionContainer.slide-out {
  transform: translateY(300%);
}

/* JavaScript failsafe */
.noJs #transitionContainer {
  transform: none !important;
  transition: none !important;
}

/*-------------------------*/
/* For Low Motion Settings */
/*-------------------------*/
@media (prefers-reduced-motion: reduce) {
  #constellations {
    display: none;
  }

  #transitionContainer {
    transition: none;
    transform: translateY(0);
  }
}