html, body {
  position: relative;
  background: rgb(var(--main-background));
  margin: 0;
  padding: 0;
  overflow: scroll;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
height: 100vh;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}

#main {
  width: 100vw;
  height: 300px;
  position: static;
  /* z-index: -1; */
  margin: 0px 0px;
  user-select: none;
  object-fit: cover;
  object-position: bottom;
}

.playful {
  font-family: Lobster, Arial;
  font-size: 35px;
  margin-right: 5px;
}

.header {
  font-size: 31px;
  word-spacing: 10px;
  color: var(--sketch);
  font-weight: normal;
  font-family: Itim;
}

#portrait {
  width: 84px;
  border-radius: 150px;
  float: left;
  /* top: 10%;
  left: 40%; */
  shape-outside: circle(80% at 50% 23px) border-box;
  justify-content: center;
  margin-right: 15px;
  margin-bottom: 18px;
  /* display: none; */
  user-select: none;
  /* filter: grayscale(1); */
}

#intro {
  column-gap: 18px;
  align-items: flex-start;
}

footer {
  display: none !important;
}

#intro span.header {
  width: 100%;
  text-align: center;
}

#prompt {
  display: grid;
  gap: calc(22vmin / 10);
  font-size: 18vmin;
  --size: 4vmin;
  font-weight: 800;
  --weight: normal;
  text-align: center;
  margin: 20vmin 0;
  --margin: calc(-88em / 100);
  font-family: "Bebas Neue";
  --font: Rubik;
  letter-spacing: calc(3em / 100);
  --spacing: calc(0em / 100);
  transition: 1s;
  font-weight: 500;
}

#prompt:before {
  position: relative;
  top: 50%;
  right: 0%;
  content: attr(data-before);
  font-size: var(--size);
  font-weight: var(--weight);
  margin: var(--margin);
  font-family: var(--font);
  letter-spacing: var(--spacing);
}

#prompt:after {
  content: attr(data-after);
  font-size: var(--size);
  font-weight: var(--weight);
  margin: var(--margin);
  font-family: var(--font);
  letter-spacing: var(--spacing);
}

#schedule iframe {
  border: none;
  outline: none;
  width: 100%;
  height: 31vmin;
}

#fullscreen {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  display: none;
}

.navbar {
  width: 100%;
  --height: 8vmax;
  height: var(--height) !important;
}

#content {
  /* height: 100%; */
  height: fit-content;
  justify-content: center;
  /* background: var(--background); */
  background: rgb(var(--main-background));
  padding: 0;
}

#text-input {
  visibility: hidden;
  display: none;
}

.container {
  background: #00c3ff;
  background: #00293b;
  display: none;
}

.schedule-container {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  display: flex;
  position: static;
  top: 10%;
  flex-direction: column;
  align-items: center;
  background: rgb(var(--main-background));
}

.card {
  height: fit-content;
  border-radius: var(--border-radius);
  background: rgb(var(--blank));
  font-family: Rubik;
  font-size: 2.2vmax;
  display: flex;
  gap: 0.8em;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  margin: 2vmax;
  padding: 1.1em;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: content-box;
  /* min-width: 20em; */
  /* max-width: fit-content; */
  width: calc(100% - 8vmax);
  padding: 2vmax;
  margin-bottom: 10px;
}

.card .cardIco {
  all: unset;
  font-family: Material Symbols Outlined;
  font-variation-settings: "FILL" 1, "wght" 300;
  font-size: 5vmin;
  padding-top: var(--card-pad);
}

#dLogo {
  height: 3vmax;
}

.card button:active {
  font-variation-settings: "FILL" 0, "wght" 300;
}
.card h3 {
  all: unset;
  width: 100%;
  padding-bottom: var(--active-border-color);
  font-family: Itim;
  text-align: center;
  line-height: 1.1em;
  /* font-weight: bold; */
  font-size: 3vmax;
  padding-bottom: var(--card-pad);
  /* text-decoration-line: underline; */
}

.card p {
  all: unset;
  width: 100%;
  line-height: 1.1em;
  text-align: center;
}

.card:not(.current) {
  opacity: 80%;
}

.fullscreen {
  background-color: #f2f2f2;
  padding: 10px;
}

body div#navbarspace {
  background: linear-gradient(90deg, var(--grad-one), var(--grad-two));
}

body.light #navbarspace {
  /* --grad-one: #c8f3ff; */
  --grad-one: #a385d9;
  /* --grad-two: #67bcd3; */
  --grad-two: #c38fdd;
}

body.dark #navbarspace {
  /* --grad-one: #4f9eb4; */
  --grad-one: #724fb4;
  /* --grad-two: #2b545f; */
  --grad-two: #724fb4;
}

#navbarspace {
  height: var(--height) !important;
  /* padding-top: 0.1%; */
  /* position: static; */
  z-index: 8;
}

#navbar {
  z-index: 9;
  position: sticky;
  top: 0;
  left: 0;
  /* display: none; */
  backdrop-filter: var(--filter);
  -webkit-backdrop-filter: var(--filter);
}

body.light #navbar {
  --filter: blur(4px) brightness(102%);
}

body.dark #navbar {
  --filter: blur(4px) brightness(90%);
}



.card {
  padding: 2vmax;
  margin-bottom: 10px;
}

.card.current {
  filter: drop-shadow(0px 0px 0.7vmax var(--font-color));
}

.card:not(.current) {
  opacity: 75%;
  /*     filter: blur(calc(0.8vmax/10)); */
}

.fullscreen {
  background-color: #f2f2f2;
  padding: 10px;
}

#navbar .icon {
  font-size: 5vmax;
  font-family: "Material Symbols Rounded";
  padding: 1vmax;
  font-variation-settings: "FILL" 1, "wght" 500;
  height: 5vmax;
}

#ad {
  opacity: 0%;
  pointer-events: none;
  transition: opacity 500ms;
  position: fixed;
  top: var(--pad);
  left: var(--pad);
  --pad: 0vmax;
  width: calc(100vw - 2 * var(--pad));
  height: calc(100% - 2 * var(--pad));
  padding: 3vmax;
  box-sizing: border-box;
  /* background: var(--background); */
  backdrop-filter: blur(130px);
  -webkit-backdrop-filter: blur(130px);
  z-index: 9999;
  font-family: "Rubik";
  color: var(--color);
  overflow: scroll;
  /* display: flex; */
  justify-content: center;
  flex-direction: column;
}

#ad.icon {
  width: 100%;
}

.slogan {
  font-family: Graduate;
  font-size: 2.6vmax;
  text-align: center;
  line-height: 3.8vmax;
}

#ad.gogov {
  opacity: 100%;
  pointer-events: all;
}

#ad .icon {
  display: block;
  text-align: center;
  font-size: 5vmax;
  font-variation-settings: "FILL" 0, "wght" 400;
  margin: 2vmax 0em;
}
#ad {
  font-size: 2vmax;
  line-height: 3.4vh;
}

.drop {
  font-family: Lobster Two;
  font-size: 3vmax;
}

#govhenry {
  object-fit: contain;
  width: -webkit-fill-available;
  height: 40vmax;
}

img#govhenry {
}

.attention {
  background: var(--border-color);
  padding: 1vmax;
  border-radius: var(--border-radius);
  box-shadow: var(--background) 0 0 20px 0px;
  line-height: 3.8vmax;
}

.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0vmax;
  user-select: none;
}

.icon.close {
  width: 100%;
}

.toolbar div.icon {
  padding-right: 0.4em;
  font-size: 1.3em !important;
  user-select: none;
}

.attention p {
  line-height: 3vmax !important;
}

div.toolbar:active div.icon {
  font-variation-settings: "FILL" 1, "wght" 300 !important;
}

body.light #dLogo {
  filter: invert(1) contrast(70%);
}

@media (min-width: 961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .card {
    max-width: 20em !important;
  }
}



#overscroll {
  position: absolute;
  font-family: inherit;
  word-wrap: break-word;
  width: 100vw;
  margin: 0;
  /* margin-bottom: 1vh; */
  padding: 2em;
  height: 60vh;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  left: 0;
  top: 0;
  transform: translate(0, -100%);
  z-index: 99999;
  text-align: center;
  /* background: rgb(var(--main-background)); */
  /* background-color: lime; */
}

#overscroll span {
  all: initial;
  color: rgb(var(--main-color));
  flex: 1;
  width: 100%;
  opacity: 100%;
  height: 1em;
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#overscroll span.seen {
  opacity: 0%;
}

#overlay {
  /* display: block !important; */
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 99999;
  /* background: red; */
  --bfilter: blur(1.5px) brightness(102%) saturate(0%);
  backdrop-filter: var(--bfilter);
  -webkit-backdrop-filter: var(--bfilter);
}

#location {
  font-size: 1.7vmax;
  text-align: center;
  opacity: 70%;
  font-style: italic;
}

#timeDiff {
  font-size: 2vmax;
}