:root{--shiny-glow-bg: #000000;--shiny-glow-bg-subtle: #1a1818;--shiny-glow-fg: #ffffff;--shiny-glow-highlight: #05c0c0;--shiny-glow-highlight-subtle: #8484ff}*{box-sizing:border-box}html{height:100vh}body{height:100%;font-family:Audiowide,sans-serif;background:#0f2027;background:-webkit-linear-gradient(to right,#2c5364,#203a43,#0f2027);background:linear-gradient(109.6deg,#000 11.2%,#0b8491 91.1%);display:flex;justify-content:center;align-items:center;margin:auto}article{display:flex;flex-direction:row;align-items:center;justify-content:center;width:90%;border:5px groove #03f1f1;margin:auto;border-radius:2rem;color:#fff;background-image:url(./patroon_donker.DCdd_Yxb.png);background-repeat:no-repeat;background-size:cover;z-index:1}figure img{height:550px;border:3px solid #30ffff;border-radius:25px}.image2{display:none}figure{border-radius:20px;width:50%;margin:auto}figcaption{margin:2em;font-size:1.5em}.typewriter{color:#fff;font-family:Audiowide,sans-serif;overflow:hidden;border-right:.15em solid #04f7f7;white-space:nowrap;margin:0 auto;letter-spacing:.1em;animation:typing 5.5s steps(40,end),blink-caret 1.5s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#04f7f7}}section{width:50%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;position:relative;margin:2em}nav a{position:relative;display:inline-block;margin:15px 25px;outline:none;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-weight:400;text-shadow:0 0 1px rgba(255,255,255,.3);font-size:.95em;padding:1em}nav a:hover,nav a:focus{outline:none}.effect a{margin:0 10px;padding:10px 20px}.effect a:before{position:absolute;top:0;left:0;width:100%;height:2px;background:#04f7f7;content:"";transition:top .3s}.effect a:after{position:absolute;top:0;left:0;width:2px;height:2px;background:#04f7f7;content:"";transition:height .3s}.effect a:hover:before{top:100%;opacity:1}.effect a:hover:after{height:100%}ul{list-style-type:none;margin:0;padding:0 0 2em;font-size:1.2em;display:block}li{border-bottom:1px solid #ccc;letter-spacing:1px}li:hover{color:#fff;background:transparent;cursor:pointer;font-size:1.15em}li:last-child{border:none}ul li{margin:1em;text-align:left;text-transform:capitalize}h1{font-size:3.5em;letter-spacing:3px;margin:10px}h2{letter-spacing:3px;margin:10px}.glow{color:#fff;-webkit-animation:glow 1s ease-in-out infinite alternate;-moz-animation:glow 1s ease-in-out infinite alternate;animation:glow 1s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #008080,0 0 40px #008080,0 0 50px #04f7f7,0 0 60px #04f7f7,0 0 70px #08ffff}to{text-shadow:0 0 20px #fff,0 0 30px #fff,0 0 40px #008080,0 0 50px #008080,0 0 60px #04f7f7,0 0 70px #04f7f7,0 0 80px #08ffff}}p{margin:10px;line-height:1.6;font-family:Audiowide,sans-serif;letter-spacing:1px}@property --gradient-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --gradient-angle-offset{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --gradient-percent{syntax: "<percentage>"; initial-value: 5%; inherits: false;}@property --gradient-shine{syntax: "<color>"; initial-value: white; inherits: false;}.shiny-glow{--animation: gradient-angle linear infinite;--duration: 3s;--shadow-size: 2px;isolation:isolate;position:relative;overflow:hidden;cursor:pointer;outline-offset:4px;font-family:inherit;font-size:1.125rem;line-height:1.2;border:5px solid transparent;border-radius:280px;color:var(--shiny-glow-fg);background:linear-gradient(var(--shiny-glow-bg),var(--shiny-glow-bg)) padding-box,conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),transparent,var(--shiny-glow-highlight) var(--gradient-percent),var(--gradient-shine) calc(var(--gradient-percent) * 2),var(--shiny-glow-highlight) calc(var(--gradient-percent) * 3),transparent calc(var(--gradient-percent) * 4)) border-box;box-shadow:inset 0 0 0 1px var(--shiny-glow-bg-subtle)}.shiny-glow:before,.shiny-glow:after,.shiny-glow span:before{content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1}.shiny-glow:active{translate:0 1px}.shiny-glow:before{--size: calc(100% - var(--shadow-size) * 3);--position: 2px;--space: calc(var(--position) * 2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--position) var(--position),white calc(var(--position) / 4),transparent 0) padding-box;background-size:var(--space) var(--space);background-repeat:space;-webkit-mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);border-radius:inherit;opacity:.4;z-index:-1}.shiny-glow:after{--animation: shimmer linear infinite;width:100%;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--shiny-glow-highlight),transparent);-webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,black);mask-image:radial-gradient(circle at bottom,transparent 40%,black);opacity:.6}.shiny-cta span{z-index:1}.shiny-cta span:before{--size: calc(100% + 1rem) ;width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--shiny-glow-highlight);opacity:0}.shiny-glow{--transition: .8s cubic-bezier(.25, 1, .5, 1);transition:var(--transition);transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine}.shiny-glow,.shiny-glow:before,.shiny-glow:after{animation:var(--animation) var(--duration),var(--animation) calc(var(--duration) / .4) reverse paused;animation-composition:add}.shiny-glow span:before{transition:opacity var(--transition);animation:calc(var(--duration) * 1.5) breathe linear infinite}.shiny-glow:is(:hover,:focus-visible){--gradient-percent: 20%;--gradient-angle-offset: 95deg;--gradient-shine: var(--shiny-glow-highlight-subtle)}.shiny-glow:is(:hover,:focus-visible),.shiny-glow:is(:hover,:focus-visible):before,.shiny-glow:is(:hover,:focus-visible):after{animation-play-state:running}.shiny-glow:is(:hover,:focus-visible) span:before{opacity:1}@keyframes gradient-angle{to{--gradient-angle: 360deg}}@keyframes shimmer{to{rotate:360deg}}@keyframes breathe{0%,to{scale:1}50%{scale:1.2}}