:root {

    --white: #ffffff;
    --black: #000000;
    --greyform: #eaecf0;
    --grey5: #f2f2f2;
    --grey10: #e6e6e6;
    --grey15: #d9d9d9;
    --grey20: #cccccc;
    --grey25: #bfbfbf;
    --grey50: #818181;
    --greyfooter: #545c5e;
    --grey75: #505050;
    --gold: rgb(224, 190, 91);
    --darkgold: #99823f;

    --pink: #db1a78;
    --lightblue: #47a5d1;

}

main {
    margin-top: 50px;
    padding-top: 50px;
    margin-bottom: 100px;
    min-height: calc(100vh - 150px);
}


.msg-wrapper p {
    margin-bottom: 20px;
}

.msg-wrapper {
    margin: 0px 50px 50px 50px;
}

.back-wrapper{
    display:flex;
    flex-direction: row;
    justify-content: end;
    padding-bottom: 100px;
}

.backbutton {
    margin-top: 10px;
    box-shadow: 0px 0px 0px 2px var(--darkgold);
    background: linear-gradient(to bottom, var(--gold) 5%, var(--darkgold) 100%);
    background-color: var(--darkgold);
    border-radius: 10px;
    border: 1px solid var(--gold);
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    padding: 8px 30px;
    text-decoration: none;
    text-shadow: 0px 1px 0px var(--grey75);
}

.backbutton:hover {
    background: linear-gradient(to bottom, var(--darkgold) 5%, var(--gold) 100%);
    background-color: #476e9e;
}

.backbutton:active {
    position: relative;
    top: 1px;
}

footer {
    margin-top: 0;
    position: absolute;
    bottom: 0;
}

a.recht {
    text-decoration: underline;
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: clamp(0.9rem, 5vw, 1.2rem);
    }
}

@media only screen and (min-width: 1150px) {
    .msg-wrapper {
        max-width: 50vw;
    }
}