body {color: #fff; font-family: Roboto-Regular;}

.connect-div {
    background-color: #1a1a1a;
    height: fit-content;
    margin: 5rem;
    margin-left: 15vw;
    margin-right: 15vw;
    border-radius: 50px;
    box-shadow: 0 0 20px 0 #202020;
    animation: fadeInNormaal 1s ease-out forwards;
}.connect-div h1 {
    background: linear-gradient(130deg, rgb(255, 196, 86) 0%, rgb(141, 110, 57) 50%, rgb(201, 154, 67) 100%);
    -webkit-background-clip: text; /* Chrome, Safari */
    -webkit-text-fill-color: transparent; /* Chrome, Safari */
    background-clip: text; /* Firefox */
    color: transparent; /* fallback */
}.connect-div p {
    padding-left: 1.5rem;
    font-family: Roboto-Regular;
    font-size: 1.2rem;
}

.connect-sizing {
    padding: 5rem;
    width: 50%;
}.connect-sizing button {
    display: flex;
    align-self: center;
    border: 2px solid #f40552;
    box-shadow: 0 0 10px 0 #f4055280;
    background: linear-gradient(130deg, rgb(102, 74, 97) 0%, rgb(88, 48, 88) 100%);
    padding: 20px;
    color: #fff;
    max-height: 80px;
    transition: ease-out 0.1s all;
    font-family: Roboto-Regular;
    font-size: 1.3rem;
}.connect-sizing button:hover {
    background: none;
    background-color: #f40552;
    cursor: pointer;
}

.connect-link {
    text-decoration: none;
    color: #333333;
    transition: ease-in-out 0.1s all;
    padding-bottom: 2.5rem;
}.connect-link:hover {
    color: #575757;
    cursor: pointer;
}





/* ##################### */
/* ##### ANIMATIES ##### */
/* ##################### */
@keyframes fadeInNormaal {
    from {
        opacity: 0;
        transform: translateY(20px); /* Optioneel: een subtiele beweging */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}