:root
{
    --background: #EDE9E4;
    --black: #000000;
    --white: #FFFFFF;
    --red: #821722;
    --blue: #004A99;
}

body
{
    padding: 0px;
    margin: 0.25rem;
    font-family: sans-serif;
    background-color: var(--background);
    color: var(--black); 
}

table
{
    border: 2px solid, var(--black);
    border-collapse: collapse;
}

.Element
{
    color: var(--black);
}

@media screen and (min-width: 300px) 
{
    .gallery
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0px;
        margin-top: 2rem;
    }

    .gallery-item
    {
        width: 350px;
        height: 350px;
        overflow: hidden;
        border-radius: 4px;
    }

    #Reiseblog
    {
        max-width: 100%; 
    }

    .Paragraf
    {
        margin-left: 1rem;
        text-align: justify;
    }

    td, th
    {
        border: 2px solid, var(--black);
        text-align: center;
        padding: 12.5px 25px;
    }

}

@media screen and (min-width: 400px) 
{
    .gallery
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0px;
        margin-top: 2rem;
    }

    .gallery-item
    {
        width: 350px;
        height: 350px;
        overflow: hidden;
    }

    #Reiseblog
    {
     max-width: 100%; 
    }

    .Paragraf
    {
        margin-left: 1rem;
        text-align: justify;
    }

    td, th
    {
        border: 2px solid, var(--black);
        text-align: center;
        padding: 13px 26px;
    }
}

@media screen and (min-width: 600px) 
{
    .gallery
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0px;
        margin-top: 2rem;
    }

    .gallery-item
    {
        width: 350px;
        height: 350px;
        overflow: hidden;
        border-radius: 4px;
    }

    #Reiseblog
    {
    max-width: 95%; 
    margin-left: 0px;
    }

    .Paragraf
    {
        margin-left: 1rem;
        text-align: justify;
    }

    td, th
    {
        border: 2px solid, var(--black);
        text-align: center;
        padding: 25px 50px;
    }
}

@media screen and (min-width: 800px) 
{
    .gallery
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0px;
        margin-top: 2rem;
    }

    .gallery-item
    {
        width: 350px;
        height: 350px;
        overflow: hidden;
        border-radius: 4px;
    }

    #Reiseblog
    {
    max-width: 99%; 
    margin-left: 0px;
    }

    .Paragraf
    {
        margin-left: 1rem;
        text-align: justify;
    }

    td, th
    {
        border: 2px solid, var(--black);
        text-align: center;
        padding: 25px 50px;
    }
}

@media screen and (min-width: 1079px) 
{
    .gallery
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 10px;
        margin-top: 2rem;
    }

    .gallery-item
    {
        width: 350px;
        height: 350px;
        overflow: hidden;
        border-radius: 4px;
    }

    #Reiseblog
    {
    max-width: 90%; 
    margin-left: 1rem;
    }

    .Paragraf
    {
        margin-left: 1rem;
        text-align: justify;
    }

    td, th
    {
        border: 2px solid, var(--black);
        text-align: center;
        padding: 25px 50px;
    }
}