/*font boven en voor onder --------------------------------------------------------------------------*/

.font1 {
    width: fit-content;
    text-align: center;
    font-size: 100px;
    position: relative;
    top: -8px;
    color: rgb(0, 132, 255);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.font2 {
    width: fit-content;
    text-align: center;
    font-size: 100px;
    position: relative;
    top: -58px;
    color: rgb(174, 0, 255);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/*eersrte rij letters Michael ------------------------------------------------------------------------*/

#blok1 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(221, 238, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok1 10s infinite ease-in-out;
}

#blok2 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(241, 221, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok2 10s infinite ease-in-out;
}

@keyframes blok1 {
    0% {right: 0px;}
    25% {right: -50px;}
    50% {right: 0px;}
    75% {right: 50px;}
    100% {right: 0px;}
}

@keyframes blok2 {
    0% {right: 0px;}
    25% {right: 50px;}
    50% {right: 0px;}
    75% {right: -50px;}
    100% {right: 0px;}
}

#lijn1 {
    height: 1px;
    width: 500px;
    background-color: rgb(105, 159, 230);
    margin: 0 auto;
    position: relative;
    top: 150px;
}

/*tweede rij letters van ------------------------------------------------------------------------*/

#blok3 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(221, 238, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok1 10s infinite ease-in-out;
}

#blok4 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(241, 221, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok2 10s infinite ease-in-out;
}

@keyframes blok3 {
    0% {right: 0px;}
    25% {right: -50px;}
    50% {right: 0px;}
    75% {right: 50px;}
    100% {right: 0px;}
}

@keyframes blok4 {
    0% {right: 0px;}
    25% {right: 50px;}
    50% {right: 0px;}
    75% {right: -50px;}
    100% {right: 0px;}
}

#lijn2 {
    height: 1px;
    width: 500px;
    background-color: rgb(105, 159, 230);
    margin: 0 auto;
    position: relative;
    top: 150px;
}

/*derde rij letters Deijl ---------------------------------------------------------------------------*/

#blok5 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(221, 238, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok1 10s infinite ease-in-out;
}

#blok6 {
    height: 50px;
    width: fit-content;
    /*background-color: rgb(241, 221, 255);*/
    margin: 0 auto;
    position: relative;
    top: 150px;
    overflow: hidden; 
    animation: blok2 10s infinite ease-in-out;
}

@keyframes blok5 {
    0% {right: 0px;}
    25% {right: -50px;}
    50% {right: 0px;}
    75% {right: 50px;}
    100% {right: 0px;}
}

@keyframes blok6 {
    0% {right: 0px;}
    25% {right: 50px;}
    50% {right: 0px;}
    75% {right: -50px;}
    100% {right: 0px;}
}

#lijn3 {
    height: 1px;
    width: 500px;
    background-color: rgb(105, 159, 230);
    margin: 0 auto;
    position: relative;
    top: 150px;
}

/*e --------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1000px) {

    .test {
        transform: scale(0.5); /* Scales up slightly when hovered */
        transition: transform 0.5s ease; /* Smooth transition */
    }

}

@media only screen and (min-width: 1000px) {

    .test {
        transform: scale(1); /* Scales up slightly when hovered */
        transition: transform 0.5s ease; /* Smooth transition */
    }

}









