*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    font-family: 'Playfair Display', serif;
    max-width: 100%;
    overflow-x: hidden;
}

.hero-section{
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #d10a14;
}

.hero-text{
    font-family: 'Dela Gothic One', cursive;
    color: #fff2eb;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-title{
    position: absolute;
    text-align: center;
    z-index: 10;
    text-shadow: 1px 1px 10px black;
}

.hero-title h1{
    font-size: 2.5rem;
}

.hero-subtitle{
    position: absolute;
    color: transparent;
    -webkit-text-stroke: 1px #fff2eb;
}

.hero-subtitle h2{
   font-size: 3.2rem;
}

#hero-3d{
    position: absolute;
    max-width: 130%;
    animation: animateHeroImage 5s ease-in-out infinite;
}

#hero-wolke{
    max-width: 150%;
}

.stars-scene{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

.stars-scene i{
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: animateStars linear infinite;
    opacity: 0;
}

.form-section{
    color: #fff2eb;
    background-color: #191919;
    position: relative;
}

.content-banner-top > div{
    animation: slideLeft 100s linear infinite;
}

.content-banner-bottom > div{
    animation: slideRight 100s linear infinite;
}

.form-section form{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding: 3em 2em;
    z-index: 10;
}

.form-section form > *{
    margin-top: 1.5em;
    outline: none;
}

.form-section form input:first-child{
    margin-top: unset;
}

.form-section input{
    font-family: 'Glacial-Indifference', sans-serif;
    font-size: 1.25rem;
    color: #fff2eb;
    caret-color: #fff2eb;
    border: none;
    border: 1px solid #d10a14;
    border-radius: 2px;
    background-color: transparent;
    padding: .65em 1em;
}

.form-section input:focus{
    background-color: transparent;
}

.form-section textarea{
    font-family: 'Glacial-Indifference', sans-serif;
    font-size: 1.25rem;
    caret-color: #fff2eb;
    border: none;
    border: 1px solid #d10a14;
    border-radius: 2px;
    color: #fff2eb;
    background-color: transparent;
    resize: none;
    padding: .65em 1em;
}

textarea::-webkit-input-placeholder {
    font-family: 'Glacial-Indifference', sans-serif;
}
 
/* Firefox 18- */
textarea:-moz-placeholder {
    font-family: 'Glacial-Indifference', sans-serif;
}
 
/* Firefox 19+ */
textarea::-moz-placeholder {
    font-family: 'Glacial-Indifference', sans-serif;
}

textarea:-ms-input-placeholder {
    font-family: 'Glacial-Indifference', sans-serif;
}

textarea::placeholder {
    font-family: 'Glacial-Indifference', sans-serif;
}

.form-section #datenschutz{
    font-family: 'Glacial-Indifference', sans-serif;
}

.form-section #datenschutz{
    line-height: 1.5;
}

.form-section #datenschutz span:first-of-type{
    padding-left: 10px;
}

.form-section #datenschutz a{
    color: #fff2eb;
}

#datenschutz > input{
    width: 20px;
    height: 20px;
}

.form-section button{
    font-family: 'Dela Gothic One', cursive;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #d10a14;
    border-radius: 2px;
    color: #fff2eb;
    background-color: transparent;
    padding: .5em 1em;
    transition-duration: .2s;
}

.form-section button:hover{
    background-color: #d10a14;
}

.form-section-star-scene{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

.form-section-star-scene i{
    position: absolute;
    background-color: #d10a14;
    border-radius: 50%;
    animation: animateRedStars linear infinite;
    opacity: 0;
}

.kontakt-info{
    font-family: 'Glacial-Indifference', sans-serif;
    font-size: 1.25rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em 0px 3em 0px;
}

.kontakt-info p:first-child{
    font-style: italic;
}

.kontakt-info p:nth-child(2){
    margin-top: 1em;
}

/* Keyframes */

@keyframes animateHeroImage{

    0%{
        /* -webkit-transform: scale(1, 1); */
        transform: scale(1, 1);
    }

    50%{
       /*  -webkit-transform: scale(0.9, 0.9); */
        transform: scale(0.9, 0.9);
    }

    100%{
       /*  -webkit-transform: scale(1, 1); */
        transform: scale(1, 1);
    }

}

@keyframes animateStars{

    0%{
        opacity: 0;
        transform: translateY(0);
    }

    10%,90%{
        opacity: .5;
    }

    100%{
        opacity: 0;
        transform: translateY(-100px);
    }

}

@keyframes slideLeft{

    0%{
        transform: translateX(0%);
    }

    100%{
        transform: translateX(-100%);
    }

}

@keyframes slideRight{

    0%{
        transform: translateX(-100%);
    }

    100%{
        transform: translateX(0%);
    }

}

@keyframes animateRedStars{

    0%{
        opacity: 0;
        transform: translateY(0);
    }

    10%,90%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        transform: translateY(-100px);
    }

}

/* ----- Mediaqueries ----- */

/* Ganz kleine Größen wie z.B. iPhone 4 */
@media (max-width: 320px){

 

}

/* Größer als Standardgröße */

@media (min-width: 380px){

   

}

@media (min-width: 420px){

    .kontakt-info{
        font-size: 1.5rem;
    }

}

@media (min-width: 650px){

    .form-section form {
        padding: 6em 4em;
    }

    .form-section form > * {
        margin-top: 2em;
    }
      
    .form-section input {
        font-size: 1.5rem;
    }

    .form-section textarea {
        font-size: 1.5rem;
    }

    .form-section #datenschutz {
        font-size: 1.25rem;
    }
      
    #datenschutz > input {
        width: 25px;
        height: 25px;
    }

    .form-section button {
        font-size: 1.5rem;
    }

    .kontakt-info {
        width: 100%;
        padding: 0em 0em 3em 0em;
    }
 
}

@media (min-width: 768px){

    .kontakt-info{
        font-size: 1.7rem;
    }
    
}

@media (min-width: 992px){

    .form-section form {
        padding: 6em 9em;
    }


    .form-section button {
        font-size: 2rem;
    }

    .kontakt-info{
        font-size: 1.9rem;
    }

}

@media (min-width: 1200px){

    .form-section input {
        font-size: 1.25rem;
        padding: 1em 1em;
    }

    .form-section textarea{
        font-size: 1.25rem;
    }

    .form-section button{
        font-size: 1.5rem;
    }

    .form-section form > * {
        margin-top: 2em;
    }

    .form-section form {
        padding: 6em 10em;
    }
    
    .kontakt-info{
        font-size: 2.1rem;
        padding: 1em 0em 4em 0em;
    }

}

@media (min-width: 1400px){

    .form-section form {
        padding: 6em 14em;
    }

    .form-section #datenschutz {
        font-size: 1.5rem;
        margin-top: 4em;
    }

    .form-section #datenschutz {
        margin-top: 3em;
    }

    
}

@media (min-width: 1700px){

    .form-section form{
        width: 80%;
    }

    .form-section button {
        width: 50%;
        margin-top: 3em;
    }
    
    .kontakt-info{
        align-items: unset;
        text-align: unset;
    }

}

@media (min-width: 1920px){

    

}