﻿/* ProcretaCSS  */
body {
    margin: 0;
    padding: 0;
    background-color: #6b2db7;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    font-size: 0.7rem;
    line-height: 0.7;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

header {
    font-size: 0.7rem;
    color: #FFFf58;
    font-style: oblique;
}



.procreate a {
    text-decoration: none;
    align-items: center;
    color: #ffff58;
    background-color: #4a484b;
    padding: 5px;
    border-radius: 10px;
    font-size: 0.9em;
}

.procreate a:hover {
    background-color: rgb(156, 125, 164);
    padding: 5px;
    border-radius: 10px;
}

.masonryblocks {
    width: 100%;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.masonryblocks img {
    display: inline-block;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding-left: 1vw;
    padding-right: 1vw;
}

.text {
    font-size: 0.9em;
    color: #FFF;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.textprocreate {
    text-decoration: none;
    color: #ffff58;
    text-align: center;
    background-color:#4a484b;
    padding: 5px;
    border-radius: 10px;
    font-size: 0.8em;
}

.textprocreate a:hover {
    background-color: rgb(156, 125, 164);
    padding: 5px;
    border-radius: 10px;
}

.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 1.2rem;
    background-color: #6b2db7;
    text-align: center;
    color: beige;
}



/* Bildschirm größer als 850px */
@media (min-width: 850px) {
    .masonryblocks img {
        display: inline-block;
        width: 65%;
        height: auto;
        flex-wrap: wrap;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    header img {
        height: 15vh;

    }
}

/* Bildschirm größer als 1200px */
@media (min-width: 1200px) {

    .masonryblocks {
        font-size: 1.1rem;
    }

    header img {
        height: 15vh;
        font-size: 1.3rem;
    }

}