<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --spacing: 2rem;
  --color-white: #FFFFFF;
  --color-black: #202020;
  --color-black2: #353535;
  --color-accent: #E5E5E5;
  --color-accent2: #C4C4C4;
  --color-co2: #00C7A5;
  --color-ch4: #8D75F3;
  --color-n2o: #6CBAFA;
  --color-fgas: #FBC800;
}

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
}

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  src: local('RobotoMono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v7/L0x7DF4xlVMF-BfR8bXMIjhOm36WWpCBC10HFw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@media screen and (min-width: 1200px) {
  .warning {
    display: none;
    overflow: hidden;
  }
}

.warning{
  background-color: #ffffff;
  width:100vw;
  height:100vh;
  z-index: 300;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position:fixed;
  overflow-y: hidden;
  text-align: center;
}


#app {
  font-family:'Roboto''Roboto Mono';
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


header, main, footer {
  width: 100%;
}

.stickyheader{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width: 100vw;
  background: var(--color-white);
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.04);
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 2vh;
}

.sticky-scroll{
  position:-webkit-sticky;
  position:sticky;
  top:90vh;
  bottom:0;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: flex;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40%);
}

.header {
  position: absolute;
  width: 100vw;
  height: 40vh;
  left: 0px;
  top: 0px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing);
  margin: 0 0 0 0;
}

.backtotop{
  font-family: 'Roboto Mono';
  font-size: 1em;
  font-weight: 500;
  font-style:normal;
  color: var(--color-accent2);
  text-decoration: none;
}


h-1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align:left;
  width: auto;
  height: auto;
  left: auto;
  top: 5vh;
  font-family: 'Roboto Mono';
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  color: var(--color-black);
  padding-bottom: 5vh;
}

h-2 {
  color: var(--color-accent2);
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align:left;
  width: auto;
  height: auto;
  left: auto;
  top: 13vh;
  font-family: 'Roboto Mono';
  font-size: 1em;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

h1 {
  font-size: 1.5em;
  margin: 0;
}

strong {
  color: black;
  font-weight: bold;
}

p {
  font-family: 'Roboto';
  width: 50vw;
  margin: 0;
  font-size: 1em;
  line-height: 150%;
}

p-2 {
  font-family: 'Roboto Mono';
  font-weight: 500;
  font-style: normal;
  color: var(--color-black);
  padding-top: 2vh;
  line-height: 150%;
}

p-titel {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: bold;
  font-size: 25px;
  line-height: auto;
  text-align: center;
  margin-bottom: 1vh;
  line-height: 150%;
}

p-titel2 {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-size:20px;
  line-height: 150%;
}

p-titel3 {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-size:17px;
  line-height: 150%;
}
p-typewriter {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-ch4);
}

abbr[title], acronym[title] {
    border-bottom: solid 1px;
    border-color: lightgrey;
    text-decoration: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section {
  width: 100vw;
  //padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section.intro {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Roboto';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.boxtext {
  height: auto;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5vh 0 5vh 0;
}

.boxshadowtext{
  height: auto;
  width: 75vw;
  display: flex;
  flex-direction: column;
  text-align:left;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-top: 4vh;
  margin-bottom: 4vh;
  align-items:center;
}

.blacktext{
  background-color: var(--color-black2);
  color: white;
  text-align: center;
  width: 1126px;
  height: auto;
  margin-top: 5vh;
  margin-bottom: 10vh;
}

.divlist{
  display: flex;
  flex-direction: column;
  align-items:center;
  position: absolute;
}

.square {
  height: auto;
  width: 4px;
  margin: 0 1vw 0 0;
  background-color: var(--color-black);
}

.list-row {
  height: auto;
  width: 88vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-part {
  height: auto;
  width: 22vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2vh 2vw 0 2vw;
}

.text-list {
  height: auto;
  width: 50vw;
  display: flex;
  flex-direction: column;
  text-align:left;
}

.text-data{
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  margin-top: 5vh;
  text-align:left;
  align-items: center;
}

.color-box {
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  background-color: #F6F6F6;
  padding: 2vh 2vw 2vh 2vw;
  margin-bottom: 5vh;
  border-radius: 3px;
}

.borderbox {
  height: auto;
  width: 20vw;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  border: 2px solid #F6F6F6;;
  border-radius: 3px;
  padding: 2vh 2vw 2vh 2vw;
}

section.scrolly {
  //padding: 0 0 0 0;
  width: auto;
  max-width: 50vw;
}

.scrolly{
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.outro {
  background: #F7F7F7;
  width:90vw;
  border-radius: 5px;
  padding: 3vh 3vw 3vh 3vw;
  margin: 15vh 5vw 5vh 5vw;
  display: flex;
  flex-direction: row;
}
.outro-left{
  display: flex;
  flex-direction: column;
}

a{
  font-family: 'Roboto';
  font-style: italic;
  color: var(--color-black);
}

.dot {
  height: 15px;
  width: 15px;
  //background-color: var(--color-co2);
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 2vh;
}


.typewriter {
  color: var(--color-ch4);
  background-color: #EDE9FD;
  padding: 1vh 2vw 1vh 2vw;
  font-family: 'Roboto Mono';
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid var(--color-ch4); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 5vh auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 30s steps(30) infinite forwards;
    blink-caret 1s step-end infinite;
  display: inline-block;

}

/* The typing effect */
@keyframes typing {
  0% { width: 0 }
  20% { width: 380px }
  100% { width: 380px }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--color-ch4) }
}


.img-row{
  height: auto;
  width: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.imgback{
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  align-items: center;
}

.img-right{
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.textonimg{
  position: absolute;
  right: 10vw;
  padding: 1vh 2vw 1vh 2vw;
  width: 50vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.twoboxes{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 5vh 5vw 5vh 5vw;
}

.dot1 {
  animation: xAxis 7s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}

.dot1::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background-color: var(--color-co2);
  animation: yAxis 4s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxis {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(20px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(30px);
  }
}

.dot2 {
  animation: xAxis 7s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  animation-delay: 2s;
}

.dot2::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background-color: var(--color-ch4);
  animation: yAxis 5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation-delay: 2s;
}

@keyframes yAxis {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-40px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(30px);
  }
}

.dot3 {
  animation: xAxis 7s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}

.dot3::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background-color: var(--color-n2o);
  animation: yAxis 5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxis {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-30px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-20px);
  }
}

.dot4 {
  animation: xAxis 7s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  animation-delay: 2s;
}

.dot4::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  background-color: var(--color-fgas);

  animation: yAxis 7s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
  animation-delay: 2s;
}

@keyframes yAxis {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-10px);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-10px);
  }
}

article {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.step {
  margin: 0 0 var(--spacing) 0;
  font-weight: normal;
  background: rgba(255, 255, 255, 0.9);
  padding: var(--spacing);
  margin: 5vh 0 5vh 0;
}

.step:nth-child(1) {
  margin: 5vh 0 5vh 0;
  align-self: center;
}
.step:nth-child(2) {
  margin: 5vh 0 5vh 0;
  position: relative;
  left:17vw;
}
.step:nth-child(3) {
  margin: 5vh 0 5vh 0;
  position: relative;
  right:15vw;
}
.step:nth-child(4) {
  margin: 5vh 0 5vh 0;
  align-self: center;
}

figure {
  //background-color: var(--color-white);
  position: -webkit-sticky;
  position: sticky;
  width: auto;
  height: 100vh;
  margin: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure svg {
  /* position: absolute; */
  top: 0;
}


.scrollama__debug-offset {
  border-color: var(--color-accent) !important;
}
.scrollama__debug-offset p {
  color: var(--color-accent) !important;
}

rect.bg {
  fill: var(--color-black);
}

rect.square {
  fill: var(--color-white);
  transition: transform 2s;
}

line {
  stroke-width: 25px;
  transition: stroke-width 0.5s;
}
line.thick {
  stroke-width: 100px;
}

text {
  text-anchor: middle;
  fill: var(--color-white);
  font-size: 4em;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
  transition-timing-function: linear;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.transition-wrapper {
  position: relative;
  width: 100%;
}

.transition-wrapper .list-row {
  position: absolute;
}
</pre></body></html>