html {
  width: 100vw;
}

body {
  width: inherit;
  background: rgb(0,16,100);
  color: #e9f2ff;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive, sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.intro {
  margin: 0;
  padding: 2rem 2rem;
  background-color: #202e3e;
  background-image: url("tso_header.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-bottom: 2px whitesmoke solid;
  box-shadow: 2px 8px 50px #000038;
  text-align: justify;
}

span.title {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

h1 {
  margin: 0;
}

.intro-nest {
  background: linear-gradient(0deg, rgba(0, 0, 56, 0.0001) 0%, rgba(0, 0, 56,.25) 8%, rgba(0, 0, 56,.25) 85%, rgba(0, 0, 56, 0.0001) 100%);
  border-radius: 8px;
  padding: 5px 25px;
  margin: 0 20%;
}

h2 {
  font-size: xx-large;
  letter-spacing: 1.5px;
  font-weight: lighter;
  margin: 0;
}

a {
  color: #00ffff;
}

a:hover { 
  color: #e9f2ff;
}

.center {
  text-align: center;
}

/* For anything with the dark blue background */
.bg-dark {
  background-color: #000038;
  border-top: #2a2965f2 4px outset;
  border-left: #000138e6 3px solid;
  border-bottom: #121a5b 4px solid;
  border-right: #0c1546 3px solid;
  border-radius: 8px;
}

/* Create a shrine bits */
.shrine {
  background-image: url(largeback.jpg);
  background-size: cover;
  max-width: 100vw;
  min-height: 100vh;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 45% 55%;
}

.heading {
  grid-column: 1 / 3;
}

.heading h2 {
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 2.5px;
}

.name-wrapper {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.name-label {
  width: 40%;
  text-align: right;
  margin-right: 10px;
  font-size: 1.35rem;
}

input.name-input {
  width: 60%;
  margin: 0 30vw 0 0;
  color: #e9f2ff;
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  border-radius: 12px;
  padding: 5px 10px;
  box-shadow: -4px -3px 8px #02012f;
}

.personality-wrapper {
  grid-column: 1 / 2;
  display: grid;
  grid-template-rows: 10% 65% 25%;
  align-self: center;
  margin-top: -1.25rem;
}

.personality-title {
  text-align: center;
  font-size: 1.5rem;
  line-height: 0;
  letter-spacing: 2.5px;
  font-weight: lighter;
}

/* Personality trait stat container */
.stat-container {
  width: inherit;
  max-width: 25vw;
  margin: 0 auto;
  padding: 15px 0;
  border-left: #08096ad8 4px solid;
  box-shadow: -4px -4px 10px #02012f;
  align-content: center;
  text-align: center;
}

.stat {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 1.25rem;
  justify-content: right;
  align-items: center;
  line-height: 1.65;
  gap: 15px;
}

.stat-label {
  font-size: 1.75rem;
  letter-spacing: 3.5px;
  margin: 0;
  font-weight: lighter;
}

.stat-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 3.5px;
}

.pill {
  width: 5px;
  height: 38px;
  border-radius: 4px;
  background-color: #2a2257;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.pill:hover {
  background-color: #3a326b;
}

.pill.filled {
  background-color: #00ffff;
}

.horoscope {
  font-size: 1.5rem;
  line-height: 0;
  margin: 0;
  letter-spacing: 3px;
}

.bank-wrapper {
  margin: 0 auto;
  max-width: inherit;
} 

.bank {
  margin-top: 10px;
  display: flex;
  padding: 5px .5em;
  flex-wrap: nowrap;
  gap: 3.5px;
  border-radius: 10px;
  box-shadow: -4px -3px 8px #02012f;
}

/* sim box on the right side */
.btn-sim-wrapper {
  grid-column: 2;
  height: 55vh;
  max-width: 90%;
  display: grid;
  grid-template-columns: 40% 60%;
}

.btn-container {
  height: inherit;
  display: grid;
  grid-template-rows: 37.5% 22.5% 40%;
  gap: 6px;
  overflow: visible;
}

.btn-morph {
  border-color: #538dae;
  /* The following code was generated using xmorphic.dev */
  /*===== Configurable Variables =====*/
  /*======= Only these change! =======*/
  --color: #0865a2;
  --radius: 20%;
  --elevation: 5px;
  --bevel: 2px;
  --angle: 244deg;
  --intensity: 59;
  --diffusion: 2;

  /*======= Computed Variables =======*/
  --sin: calc(sin(var(--angle)));
  --cos: calc(cos(var(--angle)));
  --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
  --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
  --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
  --edge-blur: calc(var(--bevel) * 1.5);
  --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);

  /*======= Computed Properties =======*/
  border-radius: var(--radius);
  box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
    0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
    inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
    inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
  background: linear-gradient(
    calc(var(--angle) + 90deg),
    rgba(0, 0, 0, var(--surface-contrast)),
    rgba(255, 255, 255, var(--surface-contrast))
    ),
    var(--color);
  /*======== Static Properties ========*/
  background-blend-mode: soft-light;
}

button.btn-morph img {
  max-height: 100%;
  max-width: 100%;
}

button.btn-morph p {
  color: transparent;
  display: none;
}

button.btn-morph:hover img {
  transform: scale(0);
  height: 0;
}

button.btn-morph:hover {
  border-color: cyan;
}

button.btn-morph:hover p {
  color: whitesmoke;
  text-shadow: -1px -1px 4px grey;
  font-size: 1.25rem;
  display: inline;
  height: inherit;
}

button.btn-morph:active {
  border-color: whitesmoke;
  transform: scale(0.98);
  transition: 125ms;
}

button.btn-morph:active p {
  color: cyan;
}

.btn-morph a {
  color: #e9f2ff;
  text-decoration: none;
}

.btn-morph a:hover { 
  color: #00ffff;
}

/* ROWS */

.btn-top-row {
  display: flex;
  align-self: end;
  height: 80%;
  gap: 6px;
}
.btn-middle-row {
  height: 100%;
  display: flex;
  gap: 6px;
}
.btn-bottom-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-self: flex-start;
  height: 80%;
  gap: 6px;
}

/* INDIVIDUAL BUTTONS */

.btn-top-left {
  width: 65%;
  border-radius: 750px 50px 50px 35px;
}

.btn-top-right {
  width: 35%; 
  border-radius: 15px 15px 10px 3px;
}

.btn-middle-left {
  width: 32.5%;
  border-top-left-radius: 16px; border-top-right-radius: 3px; border-bottom-left-radius: 8px; border-bottom-right-radius: 5px;
}

.btn-middle-middle {
  width: 32.5%;
  border-radius: 8px;
}

.btn-middle-right {
  width: 35%;
  border-radius: 8px;
}

.btn-bottom-left {
  width: 65%;
  border-radius: 25px 35px 25px 750px;
}

.btn-bottom-right {
  width: 35%;
  border-top-left-radius: 10px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 20px;
}

/* BIO BOX AT BOTTOM */

.bio-wrapper {
  grid-column: 1 / 3;
  padding: 0 4rem;
}

.bio-box-label {
  margin-left: 10px;
  line-height: 0;
  letter-spacing: 1.25px;
}

.bio-box {
  min-height: 125px;
  box-shadow: 2px 1px 22px #02012f;
  border-radius: 10px;
  padding: 5px 10px;
}

.btn-wrap-home {
  grid-column: 1/3;
  width: 100%;
  margin: 0 auto;
  padding: 1em 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

a.btn-home {
  align-content: center;
  color: whitesmoke;
  padding: 1.25rem 0.75rem;
  line-height: 0;
  text-decoration: none;
  border-radius: 36px 10px;
}

a.btn-home:hover {
  color: cyan;
}

a.btn-home:active {
  transform: scale(.98);
  transition: 125ms;
}

/* SIM BOX CONTENT */
.sim-box {
  height: 100%;
  width: inherit;
  padding: 1rem 1rem;
  margin: 0 1.25rem 0 15px;
  overflow-y: scroll;
  border-radius: 15px;
}

.box-content {
  font-size: 1.25rem;
  overflow-y: scroll;
  width: inherit;
  height: inherit;
  color: whitesmoke;
  padding: 5px 1.5rem;
  border-radius: 5px;
  background-image: url(PanelBack.jpg);
  background-repeat: repeat-x;
  box-shadow: -8px -2px 12px #050529;
}

div.hide {
  display: none;
}