/* ===== Reset CSS ======*/
*,
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
 margin:0;
 padding:0;
 border:0;
 font:inherit;
 vertical-align:baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display:block
}
ol,
ul {
 list-style:none
}
blockquote,
q {
 quotes:none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
 content:none
}
table {
  border-collapse:collapse;
  border-spacing:0
 }


 /* ==== Fonts ==== */
 @font-face {
  font-family:'SpaceGrotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/SpaceGrotesk[wght].woff2) format("woff2"),
  url(../fonts/SpaceGrotesk[wght].woff2) format("woff")
 }

 :root {
  --background-color:#dddddd;
  --primary-text-color:#000;
  --secondary-text-color:rgb(70, 70, 70);
  --link-text-color:rgb(0, 71, 42);
  --face-size:256px;
  --face-offset:calc(var(--face-size)/2);
  --face-offset-reverse:calc(var(--face-size)/2*-1)
 }

 /* ==== Dark Skin ==== */
 @media (prefers-color-scheme:dark) {
  :root {
   --background-color:#0e0e0e;
   --primary-text-color:#fff;
   --secondary-text-color:#aaa;
   --link-text-color:#7cbe76;
  }
 }
 body,
 html {
  width:100%;
  height:100%
 }
 body {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--primary-text-color);
  background-color:var(--background-color);
  perspective:1000px;
  perspective-origin:50% 100px;
  transition:perspective .5s ease
 }
 h1,
 h2 {
  letter-spacing:-.025em;
  font-weight:700
 }
 h1{
   font-size: 3rem;
 }
 h2 {
  margin-bottom:1rem
 }
 a,
 p,
 span,
 ul {
  font-family:'SpaceGrotesk',"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,Times New Roman,serif;
  letter-spacing:-.01em
 }
 p {
  margin-bottom:2rem
 }
 a,
 span,
 ul {
  color:var(--link-text-color);
 }
.link {
  cursor: pointer;
  white-space: nowrap;
  color: var(--link-text-color);
 }
#baustelle {
 color:rgb(223, 119, 0);
}
 p,
 span,
 ul {
  color:var(--secondary-text-color)
 }
 ul {
  list-style-type:disc
 }
 li {
  margin-left:1.5rem
 }
 main {
  position:relative;
  margin:3rem 2rem 2rem;
  height:100%
 }
 canvas {
  display:none
 }
 article,
 header {
  margin-bottom:3rem
 }
 footer {
  font-size:.75rem;
  margin-bottom:4rem;
  border-top: thin solid var(--secondary-text-color);
 }
 #information {
  position:absolute;
  top:180px
 }
 
 @media screen and (min-width:32rem) {
  body {
   font-size:1.5rem
  }
  main {
   margin:6rem 5rem 5rem;
   max-width:32rem
  }
  article,
  footer,
  header {
   margin-bottom:5rem
  }
  #information {
   position:absolute;
   top:200px
  }
  footer {
   font-size:1rem
  }
 }