body {
    font-family: Arial;
    text-align: center;
    margin: 0;
    background: linear-gradient(#b8deee, #B2A4FF, #FFB4B4, #FFDEB4, #FDF7C3);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/crayon-letter.PNG') repeat;
    opacity: 0.6;
    z-index: -4;
}

header {
    background: #fb918f;
    color: white;
    padding: 10px;
}

nav {
    padding: 20px;
}

nav a {
    color: white;
    margin: 10px;
    text-decoration: none;
}

main {
    padding: 40px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

footer {
    background: #ffd497;
    padding: 15px;
    margin-top: 2000px;
}



.titel {
    font-family: 'Fredoka One', cursive;
    font-size: 70px;
    color: rgb(0, 124, 249);
    margin-top: -10px;
}

.titel2 {
    font-family: 'Pacifico';
    font-size: 35px;
    color: #333;
    text-align: center;
    margin-top: -60px;
}

.titel3 {
    font-family: 'Fredoka One';
    font-size: 20px;
    color: #333;
    text-align: center;
    margin-top: -15px;
    
}

.cloud{
    width:700px;
    height:700px;

    background-image:url("../static/assets/cloud.png");
    background-size:contain;
    background-repeat:no-repeat;

    position:absolute;

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

    text-align:center;
    padding:90px;
    padding-top: 60px;
    box-sizing:border-box;
}

.cloud h2{
    margin-bottom:0px;
}

.rainbow{
    position:absolute;

    background-image:url("../static/assets/rainbow.png");
    background-size:contain;
    background-repeat:no-repeat;
    z-index: -1;
}

.rainbow1{
    top:1060px;
    left:-800px;
    width:2100px;
    height:800px;

    transform: scaleX(-1);
}

.rainbow2{
    top:770px;
    left:-170px;
    width:2200px;
    height:800px;

    
    transform: scaleX(-1) rotate(-100deg);
}