*                                               { margin:0;padding:0;list-style:none;box-sizing:border-box;user-select:none; }


@keyframes bewegen {
    from    { transform:rotateY(50deg); }
    20%     { transform:rotateY(30deg); }
    40%     { transform:rotateY(70deg); }
    60%     { transform:rotateY(35deg); }
    80%     { transform:rotateY(60deg); }
    to      { transform:rotateY(50deg); }
}

body                                            { min-height:100vh;display:flex;flex-direction:column;gap:50px;justify-content: center;align-items:center;background-color:#f5f5f5;font-family:"Nunito Sans",Arial,Helvetica,sans-serif; } 
h1, h2                                          { font-family:"Rubik",Arial,Helvetica,sans-serif; }

header                                          { width:calc(100% - 200px); }
header h1                                       { text-align:center;margin-bottom:10px; }
header ul                                       { display:flex;gap:10px;justify-content:center;align-items:center; }
header ul li                                    { padding:5px 10px;font-weight:700;color:#fff;border-radius:10px;background-color:lightgray; }
header ul li:nth-child(1)                       { background-color:#c50e0e; }
header ul li:nth-child(2)                       { background-color:#119797; }
header ul li:nth-child(3)                       { background-color:#d35c74; }
header ul li:nth-child(4)                       { background-color:#81bd1d; }
header ul li:nth-child(5)                       { background-color:#dd6718; }

section                                         { max-width:1000px;display:grid;gap:25px;grid-template-columns:repeat(4,1fr); }
section>a                                       { display:flex;flex-direction:column;gap:10px;align-items:center;text-decoration:none !important;color:inherit !important; }
section>a h2                                    { transition:all linear 300ms; }
section>a p                                     { transition:all linear 150ms;text-align:center;opacity:0.75; }
section>a:hover p                               { opacity:1; }
section>a>div                                   { height:100px;position:relative;display:flex;gap:10px;justify-content:center;align-items:center; }
section>a>div svg:nth-of-type(2)                { transform-origin:right center;transform:rotateY(50deg);transform-style:preserve-3d;position:absolute;fill:url(#gradient);filter:drop-shadow(5px 5px 20px rgba(0,0,0,.25));animation:5s ease-in-out 0s infinite alternate both running bewegen; }
section>a.stilzetten>div svg:nth-of-type(2)     { transition:all ease 10ms;transform:rotateY(50deg);animation:none; }
/* animation:0.2s cubic-bezier(.55,0,.1,1) 0s 1 normal both running uitklappen; */
section>a.openklappen>div svg:nth-of-type(2)    { transition:all ease 250ms;transform:rotateY(180deg);animation:none; }
/* animation:0.2s cubic-bezier(.55,0,.1,1) 0s 1 normal both running uitklappen; */
section>a.dichtklappen>div svg:nth-of-type(2)   { transition:all ease 500ms;transform:rotateY(50deg);animation:none; }
/* animation:0.5s ease-in-out 0s 1 normal both running inklappen */

section>a#driehoek>div                          { transform-origin:center center;transform:rotate(-30deg) translateX(-15px) translateY(10px); }
section>a#schuinkruis>div                       { transform-origin:center center;transform:rotate(-45deg) translateX(0px) translateY(0px); }

section>a#driehoek>div svg:nth-of-type(1)       { fill:#c50e0e; }
section>a#driehoek:hover h2                     { color:#c50e0e; }
section>a#schuinkruis>div svg:nth-of-type(1)    { fill:#119797; }
section>a#schuinkruis:hover h2                  { color:#119797; }
section>a#donut>div svg:nth-of-type(1)          { fill:#d35c74; }
section>a#donut:hover h2                        { color:#d35c74; }
section>a#plus>div svg:nth-of-type(1)           { fill:#81bd1d; }
section>a#plus:hover h2                         { color:#81bd1d; }


@media only screen and (max-width: 1100px) {
    section                                     { max-width:500px;grid-template-columns:repeat(2,1fr); }
}

@media only screen and (max-width: 800px) {
    body                                        { padding:50px 0px; }
    header h1                                   { font-size:1.5em; }
    header ul                                   { flex-direction:column; }
}

@media only screen and (max-width: 550px) {
    section                                     { max-width:300px;grid-template-columns:repeat(1,1fr); }
}