#text{
    text-align: center;
    width: 200px;
    margin-left: 200px;
}

.laadanimatie{
    display: block;
    width: 300px;
    margin-left: 200px;
    margin-top: 250px;
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 0px;
}

.laadanimatie div{
    width: 100px;
    height: 100px;
    border-radius: 2px;
    display:block;
    margin-right: auto;
    margin-left: auto;
    margin-top: -10px;
}

.geel{
    background-color: #f1c232ff;
    animation-name: animation-yellow;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.rood{
    background-color: #cc0000ff;
    animation-name: animation-red;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.blauw{
    background-color: #1c4587ff;
    animation-name: animation-blue;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.wit{
    background-color: white;
    animation-name: animation-white;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes animation-yellow{
    0% {width: 100px; height: 100px; margin-left: 0px; border: 10px solid black;}
    15% {width: 0px; height: 100px; margin-left: 100px; border: 10px solid black;}
    16% {width: 0px; height: 0px; margin-top: -10px; margin-left: 100px; border: 10px solid black;}
    17% {width: 0px; height: 0px; margin-top: -10px; margin-left: 100px; border: 0px solid black;}
    28% {width: 0px; height: 0px; margin-top: -10px; margin-left: 100px; border: 0px solid black;}
    29% {width: 0px; height: 0px; margin-top: 90px; margin-left: 0px; border: 10px solid black;}
    30% {width: 100px; height: 0px; margin-top: 90px; margin-left: 0px; border: 10px solid black;}
    45% {width: 100px; height: 100px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
    100%{border: 10px solid black;}
}

@keyframes animation-white{
    0% {width: 100px; height: 100px; margin-left: 0px; border: 10px solid black;}
    15% {width: 0px; height: 100px; margin-left: 0px; border: 10px solid black;}
    16% {width: 0px; height: 0px; margin-left: 0px; border: 10px solid black;}
    17% {width: 0px; height: 0px; margin-left: 0px; border: 0px solid black;}
    28% {width: 0px; height: 0px; margin-left: 0px; border: 0px solid black;}
    29% {width: 0px; height: 0px; margin-left: 0px; border: 10px solid black;}
    30% {width: 100px; height: 0px; margin-left: 0px; border: 10px solid black;}
    45% {width: 100px; height: 100px; margin-left: 0px; border: 10px solid black;}          
    100% {width: 100px; height: 100px; margin-left: 0px; border: 10px solid black;}          
}

@keyframes animation-red{
    0% {height: 100px; width: 100px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
    50% {height: 100px; width: 100px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
    65% {height: 0px; width: 100px; margin-top: 90px; margin-left: 0px; border: 10px solid black;}
    66% {height: 0px; width: 0px; margin-top: 90px; margin-left: 0px; border: 10px solid black;}
    67% {height: 0px; width: 0px; margin-top: 90px; margin-left: 0px; border: 0px solid black;}
    78% {height: 0px; width: 0px; margin-top: 90px; margin-left: 0px; border: 0px solid black;}
    79% {height: 0px; width: 0px; margin-top: 90px; margin-left: 0px; border: 10px solid black;}
    80% {height: 100px; width: 0px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
    95% {height: 100px; width: 100px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
    100% {height: 100px; width: 100px; margin-top: -10px; margin-left: 0px; border: 10px solid black;}
}

@keyframes animation-blue{
    0% {height: 100px; width: 100px; margin-left: 0px; border: 10px solid black;}          
    50% {height: 100px; width: 100px;margin-left: 0px; border: 10px solid black;}
    65% {height: 0px; width: 100px; margin-left: 0px; border: 10px solid black;}
    66% {height: 0px; width: 0px; margin-left: 0px; border: 10px solid black;}
    67% {height: 0px; width: 0px; margin-left: 0px; border: 0px solid black;}
    78% {height: 0px; width: 0px; margin-left: 100px; border: 0px solid black;}
    79% {height: 0px; width: 0px; margin-left: 100px; border: 10px solid black;}
    80% {height: 100px; width: 0px; margin-left: 100px; border: 10px solid black;}
    95% {height: 100px; width: 100px; margin-left: 0px; border: 10px solid black;}
    100% {height: 100px; width: 100px; margin-left: 0px; border: 10px solid black;}          
}