/* irom1's standard.css, theme for webapps v3.1 */

/* Font Awesome Pro */
@import url("https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css");
/* Alternative links
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url("https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css");
@import url("https://pro.fontawesome.com/releases/v6.0.0-beta3/css/all.css");
@import url("font-awesome/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&display=swap');
*/

/* Establish Colors */
:root {
  /* OG colors*/
  --gray: #86888a;
  --orange: #f5793a;
  --blue: #85c0f9;
  /* Septle colors */
  --purple: #21123b;
  --light-pink: #ffe6ea;
  --pink: #e06377;
  --brown: #a95c35;
  --green: #79b851;
  --yellow: #f3c237;
  /* BlockStatus colors */
  --light-yellow: #f3c23766;
  --very-light-yellow: #f3c23744;
  --dark-green: #18b461;
  --red: #f92954;
  --ios-blue: #007AFF;
}
/* Light Colors */
:root, .light {
  --color-tone-1: #1a1a1b;
  --color-tone-2: #787c7e;
  --color-tone-3: #878a8c;
  --color-tone-4: #d3d6da;
  --color-tone-5: #edeff1;
  --color-tone-6: #f6f7f8;
  --color-tone-7: #ffffff;
  --opacity-50: #f3f2f8;
  --transparent: #f3f2f8aa;
  --blob: var(--color-tone-7);
  --blobButton: var(--color-tone-5);
}
/* Dark Colors */
.dark {
  --color-tone-1: #d7dadc;
  --color-tone-2: #818384;
  --color-tone-3: #565758;
  --color-tone-4: #3a3a3c;
  --color-tone-5: #272729;
  --color-tone-6: #1a1a1b;
  --color-tone-7: #121213;
  --opacity-50: #000000;
  --transparent: #000000aa;
  --blob: var(--color-tone-5);
  --blobButton: var(--color-tone-3);
}
/* Other colors */
.contrast {
  --green: var(--orange);
  --yellow: var(--blue);
}

/* Standard stuff */
:root {
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}
* {
  box-sizing: border-box;
  /* Prevent system buttons */
  appearance: none;
  -webkit-appearance: none;
  /* iOS/mobile device scroll fixes */
  touch-action: pan-y;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: auto; /* Safari */
  user-select: auto;
  transition: background 0.1s, color 0.1s, border 0.1s;
}
*:not(input) {
  user-select: none;
  -webkit-user-select: none;
}
body {
  background: var(--opacity-50);
  color: var(--color-tone-1);
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  /* mobile viewport bug fix */
  position: fixed;
  height: -webkit-fill-available;
  /* Prevent font scaling in landscape while allowing user zoom */
  -webkit-text-size-adjust: 100%;
}

/* Links */
a {
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
}

/* Containers */
html, body {
  margin: 0;
}
main {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: var(--purple);
  color: whitesmoke;
  z-index: 3;
  overflow: hidden;
}
header button, header h1 {
  font-size: 30px;
  padding: 6.5px;
  margin: 0;
}

/* Loading Screen */
.loading body {
  overflow: hidden !important;
}
.loading div.loadScreen {
  bottom: 0;
  border-radius: 0;
}
@media screen and (orientation:landscape) and (max-height: 500px) and (min-width: 500px) {
  div.landscape {
    bottom: 0 !important;
    border-radius: 0 !important;
  }
}
div.landscape {
  transition: bottom 0.5s !important;
  z-index: 4;
}
div.loadScreen, div.landscape {
  position: fixed;
  z-index: 3;
  bottom: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--purple);
  color: white;
  text-align: center;
  transition: bottom 0.5s 0.5s;
  border-radius: 15px 15px 0 0;
  font-family: arial;
  overflow: hidden;
}
div.loadScreen.instant {
  transition: bottom 0.5s 0s;
}
div.loadScreen img, div.landscape i {
  width: 150px;
  font-size: 150px;
  margin-top: 150px;
  border-radius: 5px;
  box-shadow: 0 0 50px #99999999;
  animation: spinner 4s linear infinite;
  border-radius: 20%;
}
div.landscape i {
  margin-top: 50px;
  box-shadow: none;
}
div.loadScreen h1, div.landscape h1 {
  margin-top: 30px;
  font-size: 24pt;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(180deg) scale(1.05);
  }
  12% {
    transform: rotate(180deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  60% {
    transform: rotate(360deg) scale(1.05);
  }
  62% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* sections */
aside {
  position: fixed;
  z-index: 2;
  top: 50px;
  left: calc(50% - 250px);
  width: 100%;
  max-width: 500px;
  height: calc(100% - 50px);
  background: var(--opacity-50);
  color: var(--color-tone-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background 0.3s, color 0.3s;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 500px) {
  aside {
    left: 0;
  }
}
aside.show {
  opacity: 1;
  visibility: visible;
}

/* Formatting */
aside h1, section h1, .bundle h1 {
  margin: 0;
  margin-bottom: 20px;
  font-size: 26px;
}
.bundle h1 {
  margin-bottom: 0;
}
aside p, section p, .bundle p {
  margin: 10px 0;
  font-size: 16px;
}
aside p a, section p a, .bundle a {
  color: var(--color-tone-1);
}
aside h2, section h2, .bundle h2 {
  margin: 10px 0;
  font-size: 20px;
}
span.spacing {
  display: block;
  height: 10px;
}

/* buttons */
aside button, section button, button.forward, div.bundle button {
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  color: var(--color-tone-1);
  cursor: pointer;
  background: var(--blob);
}
div.bundle {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--blob);
}
div.bundle h2 {
  margin-top: 0;
}
div.bundle button, div.bundle button.light {
  background: var(--blobButton);
}
span.halfButtons {
  display: flex;
  max-width: 100%;
  border-radius: 10px;
}
span.halfButtons button {
  width: 50%;
  display: inline-block;
  margin: 0 3px;
}
/* IOS Button */
button.ios {
  width: calc(100% - 30px);
  border: none;
  color: white;
  padding: 8px;
  font-size: 20px;
  background-color: var(--ios-blue);
  border-radius: 10px;
  cursor: pointer;
  margin: 5px auto;
}
button.ios.yellow {
  background: var(--yellow);
  color: black;
}
button.ios.bottom {
  position: absolute;
  margin: 0;
  bottom: calc(15px + env(safe-area-inset-bottom) / 2);
  left: 15px;
  width: calc(100% - 30px);
}
button[disabled] {
  cursor: not-allowed;
  background: lightgray !important;
}
/* Forward button */
button.forward {
  text-align: left;
  padding: 10px;
  margin-top: 6px;
}
button.forward::after {
  content: "\f105";
  font-family: "Font Awesome 5 Pro";
  float: right;
}

/* iOS header */
nav {
  background: var(--purple);
  width: 100%;
  height: env(safe-area-inset-top);
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
}

/* Rotating animation */
.rotating {
  animation: rotate 0.5s;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Bottom popup */
.bottomPopup {
  background: var(--color-tone-6);
  position: fixed;
  bottom: 0;
  top: 100%;
  width: 100%;
  border-radius: 30px 30px 0 0;
  transition: top 0.4s;
  overflow: hidden;
  z-index: 3;
  color: var(--color-tone-1);
  display: block;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
}
.bottomPopup.show {
  top: calc(60px + env(safe-area-inset-top));
}
.bottomPopup i.fa-dash {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #888;
  cursor: pointer;
}
.bottomPopup h1 {
  margin: 20px;
  text-align: center;
}
.bottomPopup .thin {
  padding: 0 20px;
}
.bottomPopup p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
.bottomPopup p strong {
  font-size: 20px;
}
.bottomPopup .errorText {
  display: none;
  color: var(--red);
  margin-top: 5px;
  font-size: 14px;
}
.bottomPopup.error .errorText {
  display: block;
}
.bottomPopup input[type=text], .niceInput {
  border: 2px solid transparent;
  width: 100%;
  font-size: 20px;
  color: var(--color-tone-1);
  background: var(--color-tone-5);
  padding: 15px;
  border-radius: 10px;
  outline: 0;
}
.bottomPopup input[type=text]:focus {
  border-color: var(--yellow);
}
.bottomPopup.error input[type=text] {
  border-color: var(--red);
}