@font-face {
    font-family: 'KeepCalm';
    src: url(../font/KeepCalm-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'KeepCalm';
}

a {
    color: #4a3b7a;
}

article {
    background: linear-gradient(
            to top,
            #2a2260 15%,
            #3a2e6d 100%
        );
    position: relative;
    height: auto;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-top: 5%;
    padding: 20px;
    border-radius: 25px;
}

.headerBar {
    background: linear-gradient(
            to bottom,
            #2a2260 15%,
            #3a2e6d 100%
        );
    height: 100px;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    align-items: center; 
    justify-content: center; 
    display: flex;
    border-radius: 25px;
}


.pageFooter {
    background: linear-gradient(
            to top,
            #2a2260 var(--p1, 15%),
            #3a2e6d var(--p2, 100%)
        );
    position: relative;
    height: 50px;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    align-items: center;  
    justify-content: center;  
    display: flex;
    border-radius: 25px;
}

.buttonFooter {
    bottom: 10px; /* Abstand vom unteren Rand des Footers */
    left: 50%;
    padding: 10px 15px;
    background: linear-gradient(
            to top,
            #4a3b7a var(--p1, 15%),
            #3d306f var(--p2, 100%)
        );
    color: black;
    border: none;
    border-radius: 5px;
    transition: 1s, background-position 0s;
}

.buttonFooter:hover {
    --p1: 20%;
    --p2: 80%;
}

body {
    background-image: url("../imgs/Weltall.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}