:root {
  --spiegel-orange: #e64416;
  --spiegel-sans: 'SpiegelSans4';
  --spiegel-slab: 'SpiegelSlab4Cd';
  --spiegel-serif: 'SpiegelSerifUI';
  --darkmode-background: #1F1E1C;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: auto;
  font-family:var(--spiegel-sans);
  font-weight: 600;
  font-size: 32px;
}

/* Wrapper to Center the Typewriter */
.wrapper {
  margin: 0 auto;
  padding: 2rem 0;
  max-width: 996px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.centeredBox {
  margin: 0 auto;
	width: 100%;
	text-align: center;
}

.text {
  background: #1F1E1C;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The Typewriter */


.cursor {
	border-left: 3px solid  #F7BE1E;
}



/* DARK MODE */
@media(prefers-color-scheme: dark){
  body {
    background: var(--darkmode-background, #1F1E1C);
  }

  .text {
    background: #F1EFED;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

/* RESPONSIVENESS */
@media screen and (max-width: 488px) {
  .body {
    max-width: 488px;
  }
  .wrapper {
    padding: 2rem 1rem;
  }
  .text {font-size: 28px;
  }
}

@media screen and (max-width: 310px) {
  .body {
    max-width: 310px;
  }
}
