body{
    margin: 0;
}

.startpage{
    background-image: url("./images/IMG_9287.jpeg");
    background-size: cover;
    background-position: center;
    height: 100vh;
}


.mainContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mainContainerBirthday{
    width: 100%;
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gifContainer {
    width: 320px;
    text-align: center;
}

.gifContainer img {
    width: 100%;
    height: auto;
}
.textContainer {
    width: 320px;
    text-align: center;
}

.buttonContainer{
    width: 360px;
    text-align: center;
}


#yesButton {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 10px;
}

.numberButtons {
    background-color: lightgray;
    color: black;
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 10px;
}

#noButton {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

.navButton {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}


.mt50{
    margin-top: 50px;
}

.mt20{
    margin-top: 20px;
}


.geburtstagsSection{
    background-color: #f0e68c;
    margin: 0;
}



   /* CSS */
.button-85 {
   padding: 0.7em 2.5em;
   border: none;
   outline: none;
   color: rgb(255, 255, 255);
   background: #111;
   cursor: pointer;
   position: relative;
   z-index: 0;

   border-radius: 10px;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
}

.button-85:before {
    content: "";
    background: linear-gradient(
            45deg,
            #ff0000,
            #ff7300,
            #fffb00,
            #48ff00,
            #00ffd5,
            #002bff,
            #7a00ff,
            #ff00c8,
            #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes glowing-button-85 {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.button-85:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}



 /* CSS */
.button-75 {
     align-items: center;
     background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
     border: 0;
     border-radius: 10px;
     box-sizing: border-box;
     color: #fff;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     font-family: "Codec cold",sans-serif;
     font-size: 16px;
     font-weight: 700;
     height: 54px;
     justify-content: center;
     letter-spacing: .4px;
     line-height: 1;
     max-width: 100%;
     padding-left: 20px;
     padding-right: 20px;
     padding-top: 3px;
     text-decoration: none;
     text-transform: uppercase;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
}

.button-75:active {
    outline: 0;
}

.button-75:hover {
    outline: 0;
}

.button-75 span {
    transition: all 200ms;
}

.button-75:hover span {
    transform: scale(.9);
    opacity: .75;
}

@media screen and (max-width: 991px) {
    .button-75 {
        font-size: 15px;
        height: 50px;
    }

    .button-75 span {
        line-height: 50px;
    }
}