@charset "UTF-8";
/*------------------------>>> Oswald (Variable) <*/
@font-face {
  font-family: "Devtrix-Heading";
  src: url("../assets/fonts/Oswald-Variable.woff2") format("woff2-variations");
  font-weight: 200 700; /* Supports weights from 200 to 700 */
  font-display: swap;
}
/*------------------------>>> Poppins (Variable) <*/
@font-face {
  font-family: "Devtrix-Text";
  src: url("../assets/fonts/Poppins-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; /* Supports all weights */
  font-stretch: 75% 125%;
  font-display: swap;
}
/* Document
 * ========================================================================== */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  -o-tab-size: 4;
     tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* 6 */
}

/* Sections
   * ========================================================================== */
:where(body) {
  margin: 0;
}

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   * ========================================================================== */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

:where(nav li)::before {
  content: "​";
  float: left;
}

:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
   * ========================================================================== */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

:where(b, strong) {
  font-weight: bolder;
}

:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

:where(small) {
  font-size: 80%;
}

/* Embedded content
   * ========================================================================== */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

:where(iframe) {
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
   * ========================================================================== */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
   * ========================================================================== */
:where(button, input, select) {
  margin: 0;
}

:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -moz-appearance: button;
       appearance: button;
  -webkit-appearance: button;
}

:where(fieldset) {
  border: 1px solid #a0a0a0;
}

:where(progress) {
  vertical-align: baseline;
}

:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

:where([type=search i]) {
  -moz-appearance: textfield;
       appearance: textfield;
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   * ========================================================================== */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
   * Add the correct display in Safari.
   */
:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
   * ========================================================================== */
:where([aria-busy=true i]) {
  cursor: progress;
}

:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

:root {
  --primary-color: hsl(226, 78%, 68%);
  --secondary-color: hsl(118, 66%, 50%);
  --accent-color: hsl(0, 0%, 25%);
  --text-color: #333;
  --body-bg: hsl(214, 18%, 92%);
  --link-color: #333;
  --transition-1: 0.5s ease-in-out;
  --icon-boxshadow-color: hsl(48, 92%, 53%);
  --card-boxshadow-color: hsl(0, 0%, 85%);
  --border-top: hsl(0, 0%, 86%);
  --text-shadow: hsla(0, 0%, 100%, 0.52);
  --moon-before: linear-gradient(var(--rotate), hsl(226, 78%, 68%), hsl(225, 75%, 56%) 43%, hsl(265, 80%, 39%));
  --moon-after: linear-gradient(to top, hsl(48, 86%, 51%) 0%, hsla(48, 86%, 51%, 0.1) 25%, hsla(48, 86%, 51%, 0.1) 75%, hsl(48, 86%, 51%) 100%);
  --nav-background: hsla(0, 0%, 96%, 0.129);
  --sphere-bg: linear-gradient(to top, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.2) 25%, hsla(0, 0%, 100%, 0.2) 75%, hsla(0, 0%, 100%, 0) 100%);
}

.dark-mode {
  --primary-color: hsl(226, 78%, 68%);
  --secondary-color: hsl(86, 94%, 57%);
  --accent-color: hsl(0, 0%, 25%);
  --text-color: #eee;
  --body-bg: hsl(0, 0%, 6%);
  --link-color: #eee;
  --icon-boxshadow-color: #fff;
  --card-boxshadow-color: hsla(0, 0%, 100%, 0.149);
  --border-top: hsl(0, 0%, 15%);
  --text-shadow: hsla(0, 0%, 0%, 0.67);
  --moon-before: linear-gradient(var(--rotate), hsl(0, 0%, 0%), hsl(0, 0%, 0%) 43%, hsl(0, 0%, 0%));
  --moon-after: linear-gradient(to top, hsl(265, 80%, 39%) 0%, hsla(224, 43%, 45%, 0.35) 25%, hsla(225, 43%, 45%, 0.35) 75%, hsl(226, 78%, 68%) 100%);
  --nav-background: hsla(0, 0%, 0%, 0.129);
  --sphere-bg: hsl(0, 0%, 6%);
}

.city_info {
  position: relative;
  margin: 2rem auto;
  padding: 2.75rem 3rem;
  max-width: 70rem;
  border: 1px solid var(--border-top);
  border-radius: 16px;
  background: var(--body-bg);
  overflow: hidden;
  transition: border-color var(--transition-1);
}
.city_info:hover {
  border-color: hsla(226, 78%, 68%, 0.2);
}
.city_info::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(ellipse at center, hsla(226, 78%, 68%, 0.08) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.city_info::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 0;
  width: 2px;
  height: 76%;
  background: linear-gradient(180deg, transparent 0%, var(--primary-color) 35%, var(--primary-color) 65%, transparent 100%);
  opacity: 0.35;
  border-radius: 0 2px 2px 0;
}
.city_info__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.city_info__label {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  padding: 0.3rem 0.875rem;
  border: 1px solid hsla(226, 78%, 68%, 0.3);
  border-radius: 100px;
}
.city_info p {
  font-size: clamp(0.875rem, 1.5vw, 0.975rem);
  line-height: 1.85;
  color: var(--text-color);
  opacity: 0.6;
  max-width: 80ch;
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.01em;
}
@media only screen and (min-width: 768px) {
  .city_info {
    padding: 3rem 3.5rem;
    margin: 4rem auto;
  }
}/*# sourceMappingURL=stadt.css.map */