* {
  margin: 0;
  padding: 0;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --grey: #3f3f48;
  --e_primary: #573d34;
  --e_secondary: #c5b9b2;
  --s_primary: #16202d;
  --s_seconday: #50b2b3;
  --ss_primary: #00a48b;
  --ss_secondary: #febc19;
  --n_primary: #580b0b;
  --n_secondary: #9f0500;
  --ee_primary: #333333;
  --ee_secondary: #222222;
  --ee_accent: #333333;
  --be_primary: #3f66a0;
  --be_secondary: #6590d0;
}

::-webkit-scrollbar {
  width: 2vh;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 1000px;
}

::-webkit-scrollbar-track {
  background-color: var(--grey);
}

::-webkit-scrollbar-thumb {
  height: 10vh;
  border-radius: 100px;
  background-color: var(--white);
}

.outer {
  position: absolute;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--black);
}

.inner {
  display: flex;
  flex-direction: row;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  background-color: var(--black);
}

.modal {
  position: sticky;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  visibility: hidden;
  transition: 0.24s;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-img {
  transform: rotate(90deg) translate(-50%, -50%) scale(1);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 25vh;
  transition: all 0.24s ease-out;
}

.modal-img.open {
  transform: rotate(90deg) translate(-50%, -50%) scale(2);
}

h2.caption {
  transform: rotate(90deg) translate(-50%, -50%) scale(1);
  color: var(--white);
}

/* Text */
h1 {
  position: absolute;
  top: 17%;
  width: 65vh;
  font-weight: 700;
  font-size: 11vh;
  font-family: 'Raleway', sans-serif;
  line-height: 9vh;
}

h2 {
  position: absolute;
  font-size: 1.5vh;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
}

h3 {
  position: absolute;
  font-weight: 700;
  font-size: 2.5vh;
  font-family: 'Raleway', sans-serif;
}

h4 {
  position: absolute;
  font-size: 1.7vh;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
}

h5 {
  position: absolute;
  z-index: 1;
  width: 35vh;
  font-size: 3vh;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
}

h6 {
  z-index: 0;
  width: 35vh;
  padding-top: 3.1vh;
  font-size: 1.3vh;
  font-weight: 500;
  font-family: 'Raleway', sans-serif;
  text-decoration: overline;
  text-decoration-thickness: 0.75vh;
}

p {
  position: absolute;
  margin-left: 1vh;
  width: 50ch;
  font-size: 1.3vh;
  font-weight: 400;
  font-family: 'Nunito', sans-serif;
}

strong {
  text-decoration: underline;
  font-size: 1.5vh;
}

.n_info a {
  z-index: 0;
  width: 35vh;
  padding-top: 3.1vh;
  font-size: 1.5vh;
  font-weight: 400;
  font-family: 'Raleway', sans-serif;
  color: var(--white);
  text-decoration: overline;
  text-decoration-thickness: 0.75vh;
}

/* button {
  width: 15vh;
  height: 3vh;
  margin: 3vh 1vh 0vh 1vh;
  font-size: 1vh;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  color: var(--white);
  border: none;
  border-radius: 5px;
  transition: 0.1s;
} */

button {
  margin: 3vh 1vh 0vh 1vh;
  width: 15vh;
  height: 3vh;
  font-size: 1vh;
  font-weight: bold;
  font-family: 'Nunito', sans-serif;
  letter-spacing: 1px;
  color: white;
  background-color: black;
  border: 2px solid transparent;
  /* border-radius: 5px; */
  transition: 200ms ease-out;
}

/* button:hover {
  cursor: pointer;
  border: 1px solid var(--white);
} */

button:hover {
  letter-spacing: 0px;
  border-color: #fff;
  cursor: pointer;
}

img {
  cursor: pointer;
}

.modal img {
  cursor: default;
}

/* Structure */
.frame {
  box-sizing: border-box;
  min-height: 100vh;
  color: var(--white);
}

.contents {
  display: grid;
  align-items: center;
  height: 82vh;
}

.main {
  display: flex;
}

.main,
.side {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mainbox {
  position: absolute;
  top: 22%;
  height: 56vh;
  width: 35vh;
}

.sidebox {
  position: absolute;
  width: 41vh;
}

.button_left {
  margin-right: 0.5vh;
}

.button_right {
  margin-left: 0.5vh;
}

/* Expenditure */
.e_frame {
  min-width: 400vh;
  background-color: white;
  border: 9vh solid black;
  color: black;
  /* color: var(--black); */
}

.e_contents {
  grid-template-areas: 'e_main e_side e_home e_home e_home e_home e_home a';
    grid-template-columns: 4fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* grid-template-areas: 'e_main e_side a a e_home e_home e_home e_home e_home';
  grid-template-columns: 12fr 6fr 1fr 1fr 2fr 2fr 2fr 2fr 2fr; */
}

.e_main {
  grid-area: e_main;
}

.e_side {
  grid-area: e_side;
}

.e_side p {
  top: 25.5%;
}

.e_side strong {
  text-decoration-color: var(--e_primary);
}

.e_button {
  color: white;
  background-color: black;
}

.e_mainbox {
  background-color: #ccc;
}

.e_sidebox {
  top: 24%;
  height: 40.5vh;
  background-color: #ccc;
}

.e_info {
  margin-top: 2vh;
  color: black;
}

.e_info h6 {
  text-decoration-color: #ccc;
}

.e_mobile {
  /* margin-top: 12vh; */
  align-self: center;
  height: 50vh;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}

/* Splitify */
.s_frame {
  min-width: 450vh;
  background-color: var(--s_seconday);
  border: 9vh solid var(--s_primary);
}

.s_contents {
  grid-template-areas: 's_main s_side s1 s2 a s3 s4 b';
  grid-template-columns: 1.5fr 1.25fr 1fr 1fr 0.5fr 1fr 1fr 0.5fr;
}

.s_main {
  grid-area: s_main;
}

.s_side {
  grid-area: s_side;
}

.s_side p {
  top: 25.5%;
}

.s_side strong {
  text-decoration-color: var(--s_primary);
}

.s_button {
  background-color: var(--s_primary);
}

.s_mainbox {
  background-color: var(--s_primary);
}

.s_sidebox {
  top: 24%;
  height: 40.5vh;
  background-color: var(--s_primary);
}

.s_info {
  align-self: center;
}

.s_info h6 {
  text-decoration-color: var(--s_primary);
}

.s_select,
.s_create,
.s_click,
.s_review {
  display: grid;
  grid-row-gap: 2vh;
  grid-column-gap: 1vh;
  grid-template-columns: 1fr 1fr;
  font-family: 'Raleway', sans-serif;
}

.s_select {
  grid-area: s1;
  text-align: left;
}

.s_create {
  grid-area: s2;
  text-align: right;
}

.s_click {
  grid-area: s3;
  text-align: left;
}

.s_review {
  grid-area: s4;
  text-align: right;
}

.s_mobile {
  justify-self: center;
  height: 38vh;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}

.s_desktop {
  justify-self: center;
  grid-column: 1/3;
  height: 22.5vh;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}

/* Self Streaks */
.ss_frame {
  min-width: 450vh;
  background-color: var(--ss_secondary);
  border: 9vh solid var(--ss_primary);
  color: var(--white);
}

.ss_display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: center;
  text-align: center;
}

.ss_contents {
  grid-template-areas: 'ss_main ss_side ss_display';
  grid-template-columns: 0.4fr 0.25fr 1.15fr 0.05fr;
  text-align: center;
}

.ss_main {
  grid-area: ss_main;
}

.ss_side {
  grid-area: ss_side;
}

.ss_side p {
  top: 26.5%;
}

.ss_button {
  background-color: var(--ss_primary);
}

.ss_side strong {
  text-decoration-color: var(--ss_primary);
}

.ss_mainbox {
  background-color: var(--ss_primary);
}

.ss_sidebox {
  top: 25%;
  height: 38.5vh;
  background-color: var(--ss_primary);
}

.ss_register,
.ss_add,
.ss_complete,
.ss_settings {
  display: grid;
  font-family: 'Raleway', sans-serif;
}

.ss_mobile {
  justify-self: center;
  height: 50vh;
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.5));
}

.ss_display h5 {
  position: relative;
  justify-self: center;
  margin-top: 3vh;
}

.ss_display h6 {
  justify-self: center;
  padding-top: 0;
  margin-top: -0.4vh;
  text-decoration-color: var(--ss_primary);
}

/* Neptune */
.n_frame {
  min-width: 600vh;
  background-color: var(--n_secondary);
  border: 9vh solid var(--n_primary);
}

.n_contents {
  grid-template-areas: 'n_main n_side n_display n_display n_displayd';
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr 1.5fr 0.5fr;
}

.n_main {
  grid-area: n_main;
}

.n_side {
  grid-area: n_side;
}

.n_side p {
  top: 30.5%;
}

.n_side strong {
  text-decoration-color: var(--n_primary);
}

.n_button {
  background-color: var(--n_primary);
}

.n_mainbox {
  background-color: var(--n_primary);
}

.n_sidebox {
  top: 29%;
  height: 31.5vh;
  background-color: var(--n_primary);
}

.n_display {
  display: grid;
  grid-template-columns: 0.75fr 0.25fr;
}

.n_info {
  justify-self: center;
  align-self: center;
  margin-left: 5vh;
}

.n_info h6,
.n_info a {
  text-decoration-color: var(--n_primary);
}

.n_desktop {
  height: 65vh;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 2));
}

/* Essential Employee */
.ee_frame {
  min-width: 495vh;
  background-color: var(--ee_secondary);
  border: 9vh solid var(--ee_primary);
  color: var(--white);
}

.ee_contents {
  grid-template-areas: 'ee_main ee_side ee_menu ee_info ee_game';
  grid-template-columns: 1fr 1fr 1fr 0.5fr 2fr;
}

.ee_main {
  grid-area: ee_main;
}

.ee_side {
  grid-area: ee_side;
}

.ee_side p {
  top: 26%;
}

.ee_side strong {
  text-decoration-color: var(--ee_accent);
}

.ee_button {
  background-color: var(--ee_primary);
}

.ee_mainbox {
  background-color: var(--ee_accent);
}

.ee_sidebox {
  top: 24.5%;
  height: 38.5vh;
  background-color: var(--ee_accent);
}

.ee_info {
  display: grid;
  justify-content: start;
  grid-row-gap: 25vh;
  font-family: 'Raleway', sans-serif;
}

.ee_info h6,
.ee_game h6 {
  text-decoration-color: var(--ee_accent);
}

.ee_menu {
  margin: 2vh 0;
  height: 28vh;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}

.ee_game {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  align-items: center;
  justify-content: end;
}

.ee_screen {
  height: 33vh;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}

.ee_info2 {
  justify-self: end;
}

/*Billbored Explorer */
.be_frame {
  min-width: 450vh;
  background-color: var(--be_secondary);
  border: 9vh solid var(--be_primary);
}

.be_contents {
  grid-template-areas: 'be_main be_side home artist storage search x';
  grid-template-columns: 1.5fr 1.25fr 1fr 1fr 1fr 1fr 1fr;
}

.be_main {
  grid-area: be_main;
}

.be_side {
  grid-area: be_side;
}

.be_side p {
  top: 33%;
}

.be_side strong {
  text-decoration-color: var(--be_primary);
}

.be_button {
  background-color: var(--be_primary);
}

.be_mainbox {
  background-color: var(--be_primary);
}

.be_sidebox {
  top: 31.5%;
  height: 28vh;
  background-color: var(--be_primary);
}

.be_info {
  justify-self: center;
}

.be_info h6,
a {
  text-decoration-color: var(--be_primary);
}

.be_home,
.be_artist,
.be_storage,
.be_search {
  display: grid;
  grid-row-gap: 4.5vh;
  font-family: 'Raleway', sans-serif;
  justify-content: center;
  text-align: center;
}

.be_home {
  grid-area: home;
}

.be_artist {
  grid-area: artist;
}

.be_storage {
  grid-area: storage;
}

.be_search {
  grid-area: search;
}

.be_contents img {
  height: 18vh;
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.65));
}