html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
}

.left-side, .right-side {
    width: 50%;
    position: relative;
}

.left-side {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.right-side {
    background-color: white;
    overflow: scroll;
}

@font-face {
    font-family: 'erste_hilfe_auf_zackregular';
    src: url('../assets/fonts/ErsteHilfeAufZack-Regular.ttf') format('truetype'),
         url('../assets/fonts/ErsteHilfeAufZack-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'erste_hilfe_spielplatzregular';
    src: url('../assets/fonts/ErsteHilfeSpielplatz-Regular.ttf') format('truetype'),
         url('../assets/fonts/ErsteHilfeSpielplatz-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'erste_hilfe_frechregular';
    src: url('../assets/fonts/ErsteHilfeFrech.ttf') format('truetype'),
         url('../assets/fonts/ErsteHilfeFrech.otf') format('opentype');
}
@font-face {
    font-family: 'karl';
    src: url('../assets/fonts/KarlST_Regular.ttf') format('truetype'),
         url('../assets/fonts/KarlST_Regular.otf') format('opentype');
}

/* Common hover animation */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(var(--rotate-start)); }
  10% { transform: translate(-1px, -2px) rotate(calc(var(--rotate-start) + 1deg)); }
  20% { transform: translate(-3px, 0px) rotate(calc(var(--rotate-start) - 1deg)); }
  30% { transform: translate(3px, 2px) rotate(var(--rotate-start)); }
  40% { transform: translate(1px, -1px) rotate(calc(var(--rotate-start) + 1deg)); }
  50% { transform: translate(-1px, 2px) rotate(calc(var(--rotate-start) - 1deg)); }
  60% { transform: translate(-3px, 1px) rotate(var(--rotate-start)); }
  70% { transform: translate(3px, 1px) rotate(calc(var(--rotate-start) + 1deg)); }
  80% { transform: translate(-1px, -1px) rotate(calc(var(--rotate-start) - 1deg)); }
  90% { transform: translate(1px, 2px) rotate(var(--rotate-start)); }
  100% { transform: translate(1px, -2px) rotate(calc(var(--rotate-start) + 1deg)); }
}

.FAK, .Blog, .Font, .Guestbook, .imprint {
    color: rgb(5, 255, 0, 100%);
    position: absolute;
    font-family: 'erste_hilfe_frechregular';
    transform-origin: center;
}

.FAK {
    top: 25%;
    left: 10%;
    transform: rotate(-15deg);
    --rotate-start: -15deg;
}

.Blog {
    top: 60%;
    left: 50%;
    transform: rotate(-12deg);
    --rotate-start: -12deg;
}

.Font {
    top: 50%;
    left: 20%;
    transform: rotate(-10deg);
    --rotate-start: -10deg;
}

.Guestbook {
    top: 5%;
    left: 30%;
    transform: rotate(10deg);
    --rotate-start: 10deg;
}

.imprint {
    top: 78%;
    left: 10%;
    transform: rotate(5deg);
    --rotate-start: 5deg;
}

.FAK:hover, .Blog:hover, .Font:hover, .Guestbook:hover, .imprint:hover {
    animation: shake 1.5s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: calc(1s + 3s * var(--random));
}

.FAK1, .FAK2, .FAK3, .Blog1, .Blog2, .Blog3, .Font1, .Font2, .Guestbook1, .Guestbook2, .Guestbook3, .imprint1, .imprint2, .imprint3 {
    display: inline-block;
}

.FAK1 {
    font-size: 4vw;
    letter-spacing: -0.05em;
}

.FAK2 {
    font-size: 16vw;
    vertical-align: -0.2em;
    margin-left: 0.05em;
}
.FAK3 {
    font-size: 4vw;
    letter-spacing: -0.05em;
    margin-left: -0.15em;
}
.Blog1 {
    font-size: 6vw;
    margin-right: -0.3em;
}

.Blog2 {
    font-size: 12vw;
    vertical-align: -0.07em;
}

.Blog3 {
    font-size: 6vw;
    letter-spacing: -0.05em;
    margin-left: -0.2em;
}

.Font1 {
    font-size: 14vw;
    margin-right: -0.3em;
    vertical-align: -0.09em;
}

.Font2 {
    font-size: 5vw;
    letter-spacing: -0.05em;
    vertical-align: -0.1em;
}

.Guestbook1 {
    font-size: 4vw;
    margin-right: -0.3em;
    vertical-align: -0.02em;
}

.Guestbook2 {
    font-size: 14vw;
    vertical-align: -0.18em;
}

.Guestbook3 {
    font-size: 4vw;
    letter-spacing: -0.05em;
    margin-left: -1.5em;
}

.imprint1 {
    font-size: 6vw;
    letter-spacing: -0.05em;
}

.imprint2 {
    font-size: 12vw;
    margin-left: -0.2em;
    vertical-align: -0.25em;
}

.imprint3 {
    font-size: 6vw;
    letter-spacing: -0.05em;
    margin-left: -0.3em;
}

.wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    height: 50vh; 
    overflow: hidden;
}

.home {
    color: rgba(5, 255, 0, 100%);
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 20em;
    animation: expand-contract 2s infinite ease-in-out;
}

@keyframes expand-contract {
    0%, 100% {
        font-size: 27em;
    }
    50% {
        font-size: 29em;
    }
}



.menu{
    font-family: 'karl';
    background-color: white;
    color: #B282FF;
    font-size: 1.5em;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 1vh;
    padding-top: 1.75vh;
    padding-bottom: 1.75vh;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    z-index: 100;
    top: 0%;
    z-index: 90;

}
.menuLink{
    padding-left: 1em;
    padding-right: 1em;
    background-color: white;
}
.subtitle {
    color: #B282FF;
    font-size: 1.5em;
    padding-top: 1em;
    /* padding-bottom: 1em; */
}

.subtitlefont {
    color: #B282FF;
    font-size: 1.5em;
    padding-top: 1em;
    /* padding-bottom: 1em; */
    text-align: center;
    /* float: right; */}
    .subtitlefont::before{
        content: "CLICK HERE";
        font-family: 'erste_hilfe_spielplatzregular';
        font-size: 2em;
        color: #05ff00;
        margin-right: -5em;
    }
.subtitlefont2 {
     color: #B282FF;
    font-size: 1.5em;
    padding-top: 1em;
     /* padding-bottom: 1em; */
    text-align: center;
    /* float: right; */}
    .subtitlefont2::before{
        content: "CLICK HERE";
        font-family: 'erste_hilfe_spielplatzregular';
        font-size: 2em;
        color: #05ff00;
        margin-right: -4em;
    }

.content{
    font-family: 'karl';
    width: 80%;
    margin: auto;
}

iframe {
    height: 100%;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
  }

.containerfont {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.left-side-font, .right-side-font {
    width: 50%;
    position: relative;
    margin: 0.5em;
}
  
.row::after {
    content: "";
    clear: both;
    display: table; 
}


  .hover-div {
  cursor: none;
  }

  .leitsystemtext {
    position: relative;
    z-index: 90;
  }

  .leitsystemtext7 {
    margin-top: -10%;
    z-index: 90;
  }

  .leit2, .leit3, .leit4, .leit5, .leit6, .leit7 {
    position: relative;
    z-index: 0;
  }

  .leit2 {
    height: 20%;
    width: 20%;
    margin-left: 10%;
    margin-top: -10%;
    /* cursor: none; */
    cursor: help;
  }

  .leit3 {
    margin-left: 80%;
    height: 25%;
    width: 25%;
    cursor: help;
    margin-top: -10%;
  }

  .leit4 {
    margin-left: 40%;
    height: 25%;
    width: 25%;
    cursor: help;
    margin-top: -10%;
  }

  .leit5 {
    width: 50%;
    cursor: help;
    margin-top: -3%;
  }
  
  .leit6 {
    width: 100%;
    cursor: help;
  }

 .fontfrech{
    font-family: 'erste_hilfe_frechregular';
    font-size: 5.6em;
    margin-bottom: -1em;
    margin-top: -0.5em;
 } 

 .fontaufzack{
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 5.5em;
    margin-bottom: -1em;
    margin-top: -0.5em;
 } 

 .fontspielplatz{
    font-family: 'erste_hilfe_spielplatzregular';
    font-size: 5.7em;
    margin-bottom: -1em;
    margin-top: -0.5em;
 } 

  .leit7 {
    width: 30%;
    margin-left: 35%;
  }

  #cursor-text {
    position: absolute;
    pointer-events: none; /* Ensure the cursor text doesn't block interaction
    display: none; /* Hide by default */
    font-size: 2em;
    color: rgba(5, 255, 0, 1);
}

  .teamworkimg {
    width: 80%;
    margin-left: 10%;
  }


  .IprintSub{
text-align: center;
font-family: 'erste_hilfe_auf_zackregular';
font-size: 1.8em;
margin: 0;
padding: 0;

  }
  .IprintCredits{
    font-size: 2em;
    text-align: center;
    margin-block-start: 0;

  }
  .CreditInitial{
    font-family: 'erste_hilfe_auf_zackregular';
  }
  .ImprintFoot{
    width: 100%;
    text-align: center;
  }
  .ImprintTitleI,
  .ImprintTitleM,
  .ImprintTitleP,
  .ImprintTitleR,
  .ImprintTitleI2,
  .ImprintTitleN,
  .ImprintTitleT{
    font-family: 'erste_hilfe_frechregular';
  }
.ImprintTitleI{
    font-size: 25vw;
    color: rgba(5, 255, 0, 1);
    display: inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
    z-index: 80;
    position: relative;
}
.ImprintTitleM{
    font-size: 30vw;
    color: #B282FF;
    margin-left: -0.5em;
    display: inline-block;
    -webkit-transform:scale(0.4,1); /* Safari and Chrome */
    -moz-transform:scale(0.4,1); /* Firefox */
    -ms-transform:scale(0.4,1); /* IE 9 */
    -o-transform:scale(0.4,1); /* Opera */
    transform:scale(0.4,1); /* W3C */
    z-index: 60;
    position: relative;
}
.ImprintTitleP{
    font-size: 30vw;
    color: #B282FF;
    z-index: 70;
    position: relative;
    vertical-align: -0.3em;
    margin-left: -0.45em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}
.ImprintTitleR{
    font-size: 20vw;
    color: #B282FF;
    z-index: 60;
    position: relative;
    vertical-align: 0.4em;
    margin-left: -0.45em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}
.ImprintTitleI2{
    font-size: 35vw;
    color: rgba(5, 255, 0, 1);
    display: inline-block;
    -webkit-transform: scale(0.3, 1);
    -moz-transform: scale(0.3, 1);
    -ms-transform: scale(0.3, 1);
    -o-transform: scale(0.3, 1);
    transform: scale(0.3, 1);
    z-index: 80;
    position: relative;
    vertical-align: -0.25em;
    margin-left: -0.45em;

}
.ImprintTitleN{
    font-size: 25vw;
    color: #B282FF;
    z-index: 60;
    position: relative;
    margin-left: -0.65em;
    display: inline-block;
    -webkit-transform: scale(0.6, 1);
    -moz-transform: scale(0.6, 1);
    -ms-transform: scale(0.6, 1);
    -o-transform: scale(0.6, 1);
    transform: scale(0.6, 1);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  #05ff00;
}
.ImprintTitleT{
    font-size: 23vw;
    color: #b282ff;
    z-index: 50;
    position: relative;
    margin-left: -0.55em;
    vertical-align: -0.2em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}

.BlogTitleB,
.BlogTitleL,
.BlogTitleO,
.BlogTitleG{
  font-family: 'erste_hilfe_frechregular';
}

.BlogTitleB{
    font-size: 45vw;
    color: #B282FF;
    vertical-align: -0.1em;
    display: inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
    z-index: 80;
    position: relative;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}

.BlogTitleL{
    font-size: 50vw;
    color: #B282FF;
    vertical-align: -0.3em;
    margin-left: -0.45em;
    display: inline-block;
    -webkit-transform:scale(0.4,1); /* Safari and Chrome */
    -moz-transform:scale(0.4,1); /* Firefox */
    -ms-transform:scale(0.4,1); /* IE 9 */
    -o-transform:scale(0.4,1); /* Opera */
    transform:scale(0.4,1); /* W3C */
    z-index: 60;
    position: relative;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
    
}

.BlogTitleO{
    font-size: 60vw;
    color: rgba(5, 255, 0, 1);
    margin-left: -0.6em;
    z-index: 50;
    position: relative;
    display: inline-block;
    -webkit-transform:scale(0.8,1); /* Safari and Chrome */
    -moz-transform:scale(0.8,1); /* Firefox */
    -ms-transform:scale(0.8,1); /* IE 9 */
    -o-transform:scale(0.8,1); /* Opera */
    transform:scale(0.8,1); /* W3C */
    vertical-align: -0.3em;
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  #B282FF; */
}

.BlogTitleG{
    font-size: 20vw;
    color: #B282FF;
    z-index: 60;
    position: relative;
    vertical-align: 0.4em;
    margin-left: -0.7em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}

.FontTitleF,
  .FontTitleO,
  .FontTitleN,
  .FontTitleT{
    font-family: 'erste_hilfe_frechregular';
  }

.FontTitleF{
    font-size: 37vw;
    color: #B282FF;
    z-index: 30;
    position: relative;
    vertical-align: -0.3em;
    margin-left: -0.05em;
    display: inline-block;
    -webkit-transform: scale(0.8, 1);
    -moz-transform: scale(0.8, 1);
    -ms-transform: scale(0.8, 1);
    -o-transform: scale(0.8, 1);
    transform: scale(0.8, 1);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}
.FontTitleO{
    font-size: 35vw;
    color: #B282FF;
    z-index: 20;
    position: relative;
    vertical-align: -0.42em;
    margin-left: -0.40em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}
.FontTitleN{
    font-size: 39vw;
    color: rgba(5, 255, 0, 1);
    z-index: 20;
    position: relative;
    vertical-align: -0.33em;
    margin-left: -0.36em;
    display: inline-block;
    -webkit-transform: scale(0.6, 1);
    -moz-transform: scale(0.6, 1);
    -ms-transform: scale(0.6, 1);
    -o-transform: scale(0.6, 1);
    transform: scale(0.7, 1);
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1); */
}
.FontTitleT{
    font-size: 26vw;
    color: #B282FF;
    z-index: 20;
    position: relative;
    vertical-align: -0.40em;
    margin-left: -0.5em;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
}
.FirstAidTitleF,
.FirstAidTitleI,
.FirstAidTitleR,
.FirstAidTitleS,
.FirstAidTitleT,
.FirstAidTitleA,
.FirstAidTitleI2,
.FirstAidTitleD{
  font-family: 'erste_hilfe_frechregular';
}
.FirstAidTitleF{
    font-size: 25vw;
    color: #b282ff;
    z-index: 50;
    position: relative;
    margin-left: 0.01em;
    vertical-align: 0em;
    display: inline-block;
    rotate: 5deg;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color:  rgba(5, 255, 0, 1);;
}
.FirstAidTitleI{
    font-size: 25vw;
    color: #05ff00;
    z-index: 40;
    position: relative;
    margin-left: -0.5em;
    vertical-align: -0.2em;
    display: inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
}
.FirstAidTitleR{
    font-size: 25vw;
    color: #05ff00;
    z-index: 30;
    position: relative;
    margin-left: -0.4em;
    vertical-align: 0.15em;
    display: inline-block;
    -webkit-transform:scale(0.7,1.2); /* Safari and Chrome */
    -moz-transform:scale(0.7,1.2); /* Firefox */
    -ms-transform:scale(0.7,1.2); /* IE 9 */
    -o-transform:scale(0.7,1.2); /* Opera */
    transform:scale(0.7,1.2); /* W3C */
}
.FirstAidTitleS{
    font-size: 30vw;
    color: #05ff00;
    z-index: 50;
    position: relative;
    margin-left: -0.5em;
    vertical-align: -0.4em;
    display: inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
}
.FirstAidTitleT{
    font-size: 25vw;
    color: #05ff00;
    z-index: 30;
    position: relative;
    margin-left: -0.6em;
    vertical-align: -0.05em;
    display: inline-block;
    -webkit-transform:scale(0.5,1.5); /* Safari and Chrome */
    -moz-transform:scale(0.5,1.5); /* Firefox */
    -ms-transform:scale(0.5,1.5); /* IE 9 */
    -o-transform:scale(0.5,1.5); /* Opera */
    transform:scale(0.5,1.5); /* W3C */
}
.FirstAidTitleA{
    font-size: 25vw;
    color: #b282ff;
    z-index: 50;
    position: relative;
    margin-left: -0.38em;
    vertical-align: -0.1em;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color:  rgba(5, 255, 0, 1);
    display: inline-block;
        -webkit-transform:scale(1,1.5); /* Safari and Chrome */
        -moz-transform:scale(1,1.5); /* Firefox */
        -ms-transform:scale(1,1.5); /* IE 9 */
        -o-transform:scale(1,1.5); /* Opera */
        transform:scale(1,1.5); /* W3C */
}
.FirstAidTitleI2{
    font-size: 25vw;
    color: #05ff00;
    z-index: 40;
    position: relative;
    margin-left: -0.35em;
    vertical-align: -0.35em;
    display: inline-block;
    -webkit-transform:scale(0.5,1); /* Safari and Chrome */
    -moz-transform:scale(0.5,1); /* Firefox */
    -ms-transform:scale(0.5,1); /* IE 9 */
    -o-transform:scale(0.5,1); /* Opera */
    transform:scale(0.5,1); /* W3C */
}
.FirstAidTitleD{
    font-size: 25vw;
    color: #05ff00;
    z-index: 40;
    position: relative;
    margin-left: -0.51em;
    margin-right: -1em;
    vertical-align: 0.05em;
    rotate: -20deg;
    display: inline-block;
    -webkit-transform:scale(0.5,1.25); /* Safari and Chrome */
    -moz-transform:scale(0.5,1.25); /* Firefox */
    -ms-transform:scale(0.5,1.25); /* IE 9 */
    -o-transform:scale(0.5,1.25); /* Opera */
    transform:scale(0.5,.1.25); /* W3C */
}


#parentContainerDrag{
    background-color: whitesmoke;
height: 80vh;
width: 102%;
}
.disclaimerUnlearning{
    text-align: right;
    font-size: 0.8em;
    padding: 0;
    margin: 0;
}

.opensourcefontdownload_frech{
    font-family: 'erste_hilfe_frechregular';
    font-size: 2.5em;
    color: #b282ff;
    text-align: center;
    margin-top: 1em; 
 } 

 .opensourcefontdownload_aufzack{
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 2.5em;
    color: #b282ff;
    text-align: center;
 } 

 .opensourcefontdownload_spielplatz{
    font-family: 'erste_hilfe_spielplatzregular';
    font-size: 2.5em;
    color: #b282ff;
    text-align: center;
    margin-bottom: 1em;
 } 
.teamTitle{
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 4em;
    margin-bottom: -0.2em;
    text-align: right;
    width: 100%;
    color: #05ff00;
}
.teamTitleTief{
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 4em;
    margin-bottom: -0.6em;
    text-align: right;
    width: 100%;
    color: #05ff00;
}


.SeitenueberschriftImprint{
    width: 100%;
    height: 65vh;
}

.SeitenueberschriftBlog{
    height: 92vh;
    width: 100%;
}
.SeitenueberschriftFAK{
    height: 65vh;
    width: 100%;
}
.SeitenueberschriftFont{
    width: 100%;
    height: 65vh;

}
.contentContainer{
    padding-top: 10vh;
}
.PlotmachineOutput{
    color: #05ff00;
    font-size: 2em;
    text-align: center;
    padding: 0.3em;
}
.PlotmachineInitial{
    font-family: 'erste_hilfe_auf_zackregular';
    font-size: 3em;
    vertical-align: -0.21em;

}
.Plotmachinebutton{
    border-radius: 2em;
    width: 20vh;
    border-color: #05ff00;
    background-color: white;
}