@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-ExtraLight.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "K2D";
  src: url("/fonts/k2d/K2D-Thin.ttf");
  font-weight: 100;
}

/* css clean up */

* {
  font-family: "K2D", sans-serif;
  font-weight: 300;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;

  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  -webkit-user-drag: none;

  overscroll-behavior: none;

  /*border: 1px solid red;*/
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  cursor: default;
  color: white;
}

.selectable {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;

  cursor: text;
}
.selectable::selection {
  color: #f23317;
}

.hover {
  transition: opacity 0.2s ease;
}
.hover:hover {
  opacity: 0.6;
}

.hover-scale {
  transition:
    scale 0.2s ease,
    opacity 0.2s ease;
}
.hover-scale:hover {
  opacity: 0.6;
  scale: 0.93;
}

.hidden {
  pointer-events: none;
}

textarea {
  min-height: 68px;
  max-height: 300px;
  field-sizing: content;
  resize: vertical;
}

body {
  background-color: #151419;
  overflow: hidden;
}

* {
  --transition-time: 90s ease;
  /* --transition-time: 10s ease; */
  transition:
    background-color var(--transition-time),
    opacity var(--transition-time),
    color var(--transition-time),
    border var(--transition-time),
    -webkit-text-stroke var(--transition-time);
}

.no-phone {
  display: block;
}
.no-desk {
  display: none;
}

/* components */

main span {
  all: inherit;
  display: inline;
  opacity: 1 !important;
}
/* main.night span {
    opacity: 1;
} */

.overlay {
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-image: url(/images/Infoscreen_v4_Light.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.align-end {
  text-align: end;
}

body.night {
  background-color: #080809;
}

.background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/images/background-gradient.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.background-gradient.night {
  opacity: 0.5;
}

main * {
  opacity: 0.7;
}

.stocks *,
.stocks {
  opacity: 1;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(75vw - env(safe-area-inset-top));
  display: grid;
  grid-template-areas:
    "clock calendar"
    "weather calendar"
    "stocks calendar";
  grid-template-columns: 1fr 1.431fr;
  grid-template-rows: 0.9fr 0.9fr 1.1fr;
  padding: calc(env(safe-area-inset-top) + 1vw) 4vw 4vw 4vw;
  gap: 0 4vw;
  /* border: 1px solid red; */
}
.clock {
  position: relative;
  grid-area: clock;
  display: grid;
  grid-template-areas:
    "clock clock clock"
    "sec-bar sec-bar sec-bar"
    "date degree weather-icon";
  grid-template-columns: auto 6vw 5.8vw;
  grid-template-rows: 1.6fr 0.3fr 0.7fr;
}

h1 {
  grid-area: clock;
  text-align: center;
  font-size: 13.4vw;
  line-height: 11.2vw;
  -webkit-text-stroke: 0.2vw transparent;
  display: grid;
  grid-template-columns: 23% 23% 8% 23% 23%;
}
h1 span {
  grid-area: unset;
  overflow: visible;
}
h1.night {
  -webkit-text-stroke: 0.2vw white;
  color: transparent;
}

.bar {
  position: relative;
  width: 100%;
  height: 1vw;
  border-radius: 0.6vw;
  margin-top: 0.6vw;
  background-color: white;
  overflow: hidden;
  padding: 0.2vw;
}
.bar.night {
  padding: 0.2vw;
  background-color: #ffffff33;
  background-color: #ffffff;
  background-color: transparent;
}

.bar-inner {
  max-width: 100%;
  width: 0%;
  height: 100%;
  border-radius: 0.6vw;
  opacity: 1 !important;
}

.Animate {
  -webkit-transition: width 57s linear;
  -moz-transition: width 57s linear;
  -o-transition: width 57s linear;
  transition: width 57s linear;
  width: 100%;
}

.seconds.bar {
  grid-area: sec-bar;
}
.seconds.bar-inner,
.seconds .marker {
  background-color: #181419;
}
.seconds.bar.night > div {
  background-color: #080809;
  background-color: white;
  opacity: 0.8 !important;
}

.bar.night .marker {
  display: none;
}

.marker {
  position: absolute;
  top: 0.2vw;
  border-radius: 0.2vw;
  height: calc(100% - 0.4vw);
  width: 0.2vw;
  transform: translateX(-50%);
  opacity: 1 !important;
}
.marker.one {
  left: 25%;
}
.marker.two {
  left: 50%;
}
.marker.three {
  left: 75%;
}

h2 {
  width: max-content;
  font-weight: 100;
  line-height: 4.3vw;
  font-size: 3.8vw;
}
.date {
  grid-area: date;
}
.degree {
  width: 100%;
  grid-area: degree;
}

.icon {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.night .icon {
  opacity: 0.7;
}

.weather-icon {
  position: absolute;
  bottom: 0.01vw;
  right: -0.8vw;
  float: right;
  background-position: center center;
  background-size: contain;
  grid-area: weather-icon;
  height: 6.5vw;
  width: 6.5vw;
}

.weather {
  grid-area: weather;
  display: grid;
  grid-template-areas:
    "title title title"
    "rain-date rain-date rain-amount"
    "icon-wind type-wind data-wind"
    "icon-humid type-humid data-humid"
    "icon-uv type-uv data-uv"
    ". . ."
    "pressure pressure pressure"
    "pressure-bar pressure-bar pressure-bar";
  grid-template-columns: 0.5fr 4fr 2fr;
  grid-template-rows: 0.8fr 1.2fr repeat(3, 0.9fr) 0.4fr 0.5fr 0.5fr;
}

h4 {
  font-weight: 100;
  line-height: 2vw;
  font-size: 1.4vw;
  align-self: center;
}

h3 {
  font-weight: 200;
  line-height: 2.5vw;
  font-size: 2.1vw;
}

.title {
  grid-area: title;
  align-self: end;
}
.rain-date {
  grid-area: rain-date;
  align-self: start;
}
.rain-date span {
  margin-left: 0.5vw;
  font-size: 1.4vw;
}
.rain-amount {
  grid-area: rain-amount;
  justify-self: end;
  display: grid;
  width: 7vw;
  height: 2.5vw;
  grid-template-columns: repeat(3, 1fr);
}

.rain-amount div.icon {
  background-image: url(/images/icons/weather-data/humidity-cut.svg);
  background-position: 100% center;
}
.rain-amount div.icon.deactivated {
  opacity: 0.3;
}

.weather .icon {
  background-position: end center !important;
  background-size: 62%;
}

.icon-wind {
  grid-area: icon-wind;
}
.icon-humid {
  grid-area: icon-humid;
}
.icon-uv {
  grid-area: icon-uv;
}

.type-wind {
  grid-area: type-wind;
}
.type-humid {
  grid-area: type-humid;
}
.type-uv {
  grid-area: type-uv;
}

.data-wind {
  grid-area: data-wind;
}
.data-humid {
  grid-area: data-humid;
}
.data-uv {
  grid-area: data-uv;
}

.pressure {
  grid-area: pressure;
  text-align: center;
}
.pressure.bar {
  grid-area: pressure-bar;
  /* 
    border-left: .2vw solid white;
    border-right: .2vw solid white;
 */
}
.pressure.bar-inner {
  margin-left: 5%;
  /* transform: translateX(-50%); */
}

.pressure.bar-inner,
.pressure .marker {
  background-color: #331521;
}
.pressure.bar.night > div {
  background-color: #18090e;
  background-color: white;
  opacity: 0.8 !important;
}
#hektopascal {
  font-size: 1.3vw;
}
#uvindex-text {
  font-size: 1vw;
  margin-left: 1vw;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}

.type-uv:active #uvindex-text,
.type-uv:hover #uvindex-text {
  opacity: 1 !important;
}

.calendar {
  grid-area: calendar;
  height: calc(100% + 6vw);
  max-height: 100vh;
  margin-top: -1vw;
  padding-top: calc(1.3vw + 1vw);
  padding-bottom: 7vw;
  mask-image: linear-gradient(#00000018, #000000 3.6%, #000000 80%, #00000000);
  overscroll-behavior: auto;
  overflow: auto;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.calendar::-webkit-scrollbar {
  display: none;
}
.calendar > div {
  margin-bottom: 2vw;
  width: 100%;
  height: 6.2vw;
  background-color: #ffffff99;
  border: 0.09vw solid white;
  border-radius: 1vw;
  opacity: 1 !important;
  display: grid;
  grid-template-columns: 7.2vw 1.2fr 1fr;
  grid-template-rows: 1.1fr 0.9fr;
  grid-template-areas:
    "calendar-icon title title"
    "calendar-icon date rooms";
}
.calendar.night > div {
  background-color: transparent;
  border: 0.1vw solid transparent;
}

.calendar-fade-out {
  margin-right: 0.5vw;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000000 calc(100% - 2vw), #00000000);
}
.calendar-fade-out * {
  text-wrap: nowrap;
}
.calendar-fade-out.large {
  margin-right: 2.5vw;
  mask-image: linear-gradient(90deg, #000000 calc(100% - 4vw), #00000000);
}
.calendar-fade-out.reverse {
  overflow: visible;
  margin-right: 0;
  mask-image: none;
  padding-right: "none";
}
.calendar-fade-out.reverse p {
  overflow: hidden;
  width: 100%;
  text-align: end;
  max-width: 24vw;
  padding-right: 1.8vw;
  margin-right: -1.8vw;
  mask-image: linear-gradient(
    90deg,
    #000000 calc(100% - 2.5vw),
    #00000000 calc(100% - 1vw)
  );
}

.calendar * {
  opacity: 1;
}

.calendar-title {
  grid-area: title;
}
.calendar-date {
  grid-area: date;
}
.calendar-rooms {
  grid-area: rooms;
  display: flex;
  height: 1.8vw;
  width: auto;
  justify-content: end;
  align-content: center;
  padding-right: 1.3vw;
  gap: 1vw;
}

.calendar-title > h2 {
  font-size: 2.07vw;
  font-weight: 400;
}
.calendar-date > p,
.calendar-rooms > p {
  font-size: 1.3vw;
  font-weight: 200;
}

.calendar div * {
  color: #151419;
}
.calendar.night div * {
  color: #ffffff;
}

.rooms-container {
  margin-top: -0.1vw;
  position: relative;
  display: flex;
}
.rooms-container > div {
  height: 100%;
  aspect-ratio: 1;
  border: 0.1vw solid #ffffff;
  border-radius: 100%;
}
.rooms-container > div:not(:last-child) {
  margin-right: -0.75vw;
}

.calendar-icon {
  grid-area: calendar-icon;
  background-position: center center;
  background-size: 50%;
  opacity: 1;
  display: grid;
}

.rooms-container > div.mixa {
  background-color: #e200a2;
}
.rooms-container > div.mixb {
  background-color: #e23a00;
}
.rooms-container > div.live {
  background-color: #8b00e2;
}
.rooms-container > div.dj {
  background-color: #01c4e2;
}
.rooms-container > div.foyer {
  background-color: #0062e2;
}
.rooms-container > div.cafeteria {
  background-color: #aae201;
}
.rooms-container > div.info {
  background-color: #e19e00;
}

.calendar-icon.dark {
  grid-area: none;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  opacity: 0;
}
.calendar.night > div > div > div.dark {
  opacity: 1;
}

main.night * {
  opacity: 0.8;
}

.calendar.night > div > div > .rooms-container > div {
  opacity: 1;
}

.icon-b-day {
  background-image: url(/images/icons/calendar/b-day.svg);
}
.legend-overlay.night .icon-b-day,
.icon-b-day.dark {
  background-image: url(/images/icons/calendar/light-b-day.svg);
}
.icon-allebeide {
  background-image: url(/images/icons/calendar/allebeide.svg);
}
.legend-overlay.night .icon-allebeide,
.icon-allebeide.dark {
  background-image: url(/images/icons/calendar/light-allebeide.svg);
}
.icon-apple {
  background-image: url(/images/icons/calendar/apple.svg);
}
.legend-overlay.night .icon-apple,
.icon-apple.dark {
  background-image: url(/images/icons/calendar/light-apple.svg);
}
.icon-bike {
  background-image: url(/images/icons/calendar/bike.svg);
}
.legend-overlay.night .icon-bike,
.icon-bike.dark {
  background-image: url(/images/icons/calendar/light-bike.svg);
}
.icon-calendar {
  background-image: url(/images/icons/calendar/calendar.svg);
}
.legend-overlay.night .icon-calendar,
.icon-calendar.dark {
  background-image: url(/images/icons/calendar/light-calendar.svg);
}
.icon-camp {
  background-image: url(/images/icons/calendar/camp.svg);
}
.legend-overlay.night .icon-camp,
.icon-camp.dark {
  background-image: url(/images/icons/calendar/light-camp.svg);
}
.icon-cm {
  background-image: url(/images/icons/calendar/cm.svg);
}
.legend-overlay.night .icon-cm,
.icon-cm.dark {
  background-image: url(/images/icons/calendar/light-cm.svg);
}
.icon-concert {
  background-image: url(/images/icons/calendar/concert.svg);
}
.legend-overlay.night .icon-concert,
.icon-concert.dark {
  background-image: url(/images/icons/calendar/light-concert.svg);
}
.icon-convention {
  background-image: url(/images/icons/calendar/convention.svg);
}
.legend-overlay.night .icon-convention,
.icon-convention.dark {
  background-image: url(/images/icons/calendar/light-convention.svg);
}
.icon-demo {
  background-image: url(/images/icons/calendar/demo.svg);
}
.legend-overlay.night .icon-demo,
.icon-demo.dark {
  background-image: url(/images/icons/calendar/light-demo.svg);
}
.icon-event {
  background-image: url(/images/icons/calendar/event.svg);
}
.legend-overlay.night .icon-event,
.icon-event.dark {
  background-image: url(/images/icons/calendar/light-event.svg);
}
.icon-f1 {
  background-image: url(/images/icons/calendar/f1.svg);
  background-size: 57%;
}
.legend-overlay.night .icon-f1,
.icon-f1.dark {
  background-image: url(/images/icons/calendar/light-f1.svg);
  background-size: 57%;
}
.icon-family {
  background-image: url(/images/icons/calendar/family.svg);
}
.legend-overlay.night .icon-family,
.icon-family.dark {
  background-image: url(/images/icons/calendar/light-family.svg);
}
.icon-fight {
  background-image: url(/images/icons/calendar/fight.svg);
}
.legend-overlay.night .icon-fight,
.icon-fight.dark {
  background-image: url(/images/icons/calendar/light-fight.svg);
}
.icon-gallery {
  background-image: url(/images/icons/calendar/gallery.svg);
}
.legend-overlay.night .icon-gallery,
.icon-gallery.dark {
  background-image: url(/images/icons/calendar/light-gallery.svg);
}
.icon-garlands {
  background-image: url(/images/icons/calendar/garlands.svg);
}
.legend-overlay.night .icon-garlands,
.icon-garlands.dark {
  background-image: url(/images/icons/calendar/light-garlands.svg);
}
.icon-holiday {
  background-image: url(/images/icons/calendar/holiday.svg);
}
.legend-overlay.night .icon-holiday,
.icon-holiday.dark {
  background-image: url(/images/icons/calendar/light-holiday.svg);
}
.icon-movie {
  background-image: url(/images/icons/calendar/movie.svg);
}
.legend-overlay.night .icon-movie,
.icon-movie.dark {
  background-image: url(/images/icons/calendar/light-movie.svg);
}
.icon-nsbrec {
  background-image: url(/images/icons/calendar/nsbrec.svg);
}
.legend-overlay.night .icon-nsbrec,
.icon-nsbrec.dark {
  background-image: url(/images/icons/calendar/light-nsbrec.svg);
}
.icon-random {
  background-image: url(/images/icons/calendar/random.svg);
}
.legend-overlay.night .icon-random,
.icon-random.dark {
  background-image: url(/images/icons/calendar/light-random.svg);
}
.icon-spcaex {
  background-image: url(/images/icons/calendar/spcaex.svg);
}
.legend-overlay.night .icon-spcaex,
.icon-spcaex.dark {
  background-image: url(/images/icons/calendar/light-spcaex.svg);
}
.icon-calendar {
  background-image: url(/images/icons/calendar/calendar.svg);
}
.legend-overlay.night .icon-calendar,
.icon-calendar.dark {
  background-image: url(/images/icons/calendar/light-calendar.svg);
}
.icon-info {
  background-image: url(/images/icons/calendar/info.svg);
}
.legend-overlay.night .icon-info,
.icon-info.dark {
  background-image: url(/images/icons/calendar/light-info.svg);
}
.icon-sammelgut {
  background-image: url(/images/icons/calendar/sammelgut.svg);
}
.legend-overlay.night .icon-sammelgut,
.icon-sammelgut.dark {
  background-image: url(/images/icons/calendar/light-sammelgut.svg);
}
.icon-theater {
  background-image: url(/images/icons/calendar/theater.svg);
}
.legend-overlay.night .icon-theater,
.icon-theater.dark {
  background-image: url(/images/icons/calendar/light-theater.svg);
}
.icon-ruhe-in-frieden {
  background-image: url(/images/icons/calendar/ruhe-in-frieden.svg);
}
.legend-overlay.night .ruhe-in-frieden,
.ruhe-in-frieden.dark {
  background-image: url(/images/icons/calendar/light-ruhe-in-frieden.svg);
}

.stocks {
  grid-area: stocks;
  padding-top: 4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.legend-overlay {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1vw 4vw 4vw 4vw;
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
  align-content: start;
  overflow: scroll;
  overscroll-behavior: auto;
}
.legend-overlay > div:not(.ignore) {
  height: 10vw;
  flex-grow: 1;
  min-width: 10vw;
  background-color: #ffffff63;
  border: 0.09vw solid white;
  padding: 1vw;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.3vw;
}

.legend-overlay > div > h2 {
  font-size: 1.4vw;
  line-height: 1.4vw;
  text-align: center;
  width: 100%;
  font-weight: 600;
  color: #151419;
}
.night-toggle.night > div > h2 {
  color: #fff;
}

.legend-overlay > div > div {
  width: 100%;
  height: 4vw;
  background-size: contain;
}

.legend-overlay.closed {
  display: none;
}

#close-overlay {
  position: fixed;
  border-radius: 1vw;
  top: 2vw;
  right: 2vw;
  width: 4vw;
  height: 4vw;
  background-color: #ffffff8e;
  border: 0.09vw solid white;
  display: grid;
  place-content: center;
  font-size: 2.5vw;
  font-weight: 600;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: scale 0.2s ease;
}

#close-overlay:hover {
  scale: 1.1;
}

.legend-overlay > #overlay-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
  backdrop-filter: blur(20px);
}

.open-overlay {
  cursor: pointer;
}

.trash {
  display: none;
  position: fixed;
  z-index: 10;
  right: 4vw;
  bottom: 4vw;
  width: 16vw;
  height: 16vw;
  filter: drop-shadow(0 0.5vw 1.75vw #360000);
  background-image: url(/images/icons/calendar/trash.webp);
}
.trash-day {
  display: none;
}

/* stonks */

.stonksWrapper {
  overflow: hidden;
  margin-bottom: 10px;
  filter: contrast(0.3) brightness(1.5);
}
.night .stonksWrapper {
  filter: contrast(0.1) brightness(2);
  opacity: 1;
}
.stonksInner {
  position: relative;
  margin-top: -55px;
  margin-bottom: -55px;
}
.stonksDamper {
  position: absolute;
  z-index: 22;
  margin-top: 55px;
  width: 100%;
  height: 32px;
}
.stonksTitle {
  position: absolute;
  z-index: 22;
  margin-top: 55px;
  text-align: right;
  width: 100%;
  color: #ffffff;
  filter: contrast(0.5) brightness(1);
  opacity: 0.7;
}
.tradingview-widget-container {
  opacity: 1;
}

@media screen and (max-width: 800px) {
  main {
    height: 100%;
    grid-template-areas:
      "clock"
      "weather"
      "stocks"
      "calendar";
    grid-template-columns: 1fr;
    grid-template-rows: 4rem 13rem calc(10vw + 15rem) calc(
        100dvh - 2.5rem - 13rem - 10vw + 15rem - 60vw + 20rem
      );
    padding: 1vw 4vw 4vw 4vw;
    overflow: scroll;
  }
  .calendar {
    padding-top: 1.5rem;
    margin-top: 1vw;
  }
  h4,
  h3,
  .stonksTitle {
    font-size: 0.9rem;
    line-height: 1rem;
  }
  .clock {
    padding-top: 1rem;
    grid-template-rows: 0.5fr 1fr;
    grid-template-areas:
      "seconds-bar"
      "date degree weather-icon";
    grid-template-columns: auto 6vw 2.3rem;
  }
  h1 {
    display: none;
  }
  h2 {
    font-size: 1.1rem !important;
    line-height: 1.7rem !important;
  }
  #Weather {
    height: 2rem;
    width: 2rem;
    bottom: -0.3rem;
    right: -4.152px;
  }
  .weather {
    grid-area: weather;
    display: grid;
    grid-template-areas:
      "title title title"
      "rain-date rain-date rain-amount"
      "icon-wind type-wind data-wind"
      "icon-humid type-humid data-humid"
      "icon-uv type-uv data-uv"
      ". . ."
      "pressure pressure pressure"
      "pressure-bar pressure-bar pressure-bar";
    grid-template-columns: 1.5rem 4fr 2fr;
    grid-template-rows: 1.5rem 2rem repeat(3, 2rem) 0.4fr 0.5fr 0.5fr;
  }
  .weather h3 {
    line-height: 2rem;
  }
  .weather h3 span {
    font-size: 0.7rem;
  }
  #hektopascal {
    font-size: 0.7rem;
  }

  .rain-amount {
    width: 2.5rem;
    height: 1.5rem;
  }
  .bar {
    height: 0.4rem;
    border-radius: 0.4rem;
  }
  .calendar > div {
    height: 2.8rem;
    border-radius: 0.7rem;
    border: 1px solid #ffffff;
    grid-template-columns: 2.5rem 1.2fr 1fr;
    margin-bottom: 0.5rem;
    border: none;
  }

  .calendar-date > p,
  .calendar-rooms > p {
    font-size: 0.7rem;
  }
  .calendar-rooms {
    height: 1rem;
  }
  .rooms-container > div {
    border: 1px solid #ffffff;
  }
  .calendar-fade-out.reverse {
    margin-right: 0.2rem;
  }
  .calendar-fade-out.reverse p {
    margin-right: 0.2rem;
  }

  .marker {
    position: absolute;
    top: 0.05rem;
    border-radius: 0.1rem;
    width: 0.2rem;
  }

  .legend-overlay {
    padding-top: 4rem;
    gap: 0.7rem;
  }
  .legend-overlay > div:not(.ignore) {
    height: 6rem;
    min-width: 6rem;
    border-radius: 1rem;
    border: 1px solid #ffffff;
  }
  .legend-overlay > div > div {
    height: 2.5rem;
  }

  #close-overlay {
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
}