.pictures{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin:0 auto;max-width:1000px}img{max-width:100%;height:auto;width:100%;display:block}:root{--body-bg: #3fBDBf;--body-text: #111;--nav-bg: #d87c76;--nav-text: #111;--hover-text:#fff;--hover-links: #72423e;--links: #0066cc;--section-bg: #aadedf;--section-border: #d87c76}@media(prefers-color-scheme:dark){:root{--body-bg: #111;--body-text: #a0c4d9;--nav-bg: #be633f;--nav-text: #111;--hover-text: #fff;--hover-links: #442418;--links: #3f9abe;--section-bg: #222;--section-border: #be633f}}nav{background-color:var(--nav-bg);color:var(--nav-text)}nav .menu{list-style:none;display:flex;justify-content:center;gap:1rem;padding:0;margin:0}.menu a{text-decoration:none;padding:1rem;display:block;font-size:1.4rem;color:var(--nav-text);font-weight:700}.menu a:hover{color:var(--hover-text);text-decoration:underline;background-color:var(--hover-links)}.hamburger{display:none;background:none;border:none;cursor:pointer}.hamburger span{display:inline-block;font-size:3rem;padding:.3rem;color:var(--nav-text)}.hamburger span:hover{background-color:var(--hover-links)}@media(max-width:599px){.hamburger{display:inline-block}.hamburger span{color:var(--nav-bg)}nav{color:var(--nav-text)}nav .menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;padding:1rem 0;margin:0;z-index:10;background-color:var(--nav-bg)}nav .menu.active{display:flex}nav .menu li{text-align:center;border-top:1px solid black}nav .menu li a:hover{color:var(--hover-text);text-decoration:underline}nav ul{border-bottom:1px solid black}}.light-dark,.vivid-muted,.mix-invert{background-color:#4a90e2;border:2px solid black;color:#fff;margin-bottom:1rem;padding:.5rem;font-size:1rem}.light-dark:hover,.vivid-muted:hover,.mix-invert:hover{background-color:#8cb8ed}.light-dark:hover:active,.vivid-muted:hover:active,.mix-invert:hover:active{background-color:#1f69c1}.mix-invert{background-color:#4a90e2;border:2px solid black;color:#fff}.mix-invert:hover{background-color:#b56f1d}.mix-invert:hover:active{background-color:#dbe9f9}.vivid-muted{background-color:#4a90e2;border:2px solid black;color:#fff}.vivid-muted:hover{background-color:#358ef7}.vivid-muted:hover:active{background-color:#7493b8}button{cursor:pointer}.buttons{text-align:center}.btn1{padding:.3rem .5rem;font-size:.8rem;border-radius:5px}.btn2{padding:.6rem .8rem;font-size:1rem;border-radius:15px}.btn3{padding:.9rem 1.2rem;font-size:1.2rem;border-radius:50px}html{font-size:18px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}header{position:relative}footer{background-color:var(--nav-bg);display:flex;gap:2rem;justify-content:center;font-weight:700}body{margin:0;padding:0;background-color:var(--body-bg);color:var(--body-text)}section{display:block;margin:0 auto;max-width:900px;padding:1rem 3rem;line-height:2;border-left:4px solid var(--section-border);border-right:4px solid var(--section-border);background-color:var(--section-bg)}section p{margin-bottom:1.3rem}section li{margin-top:.8rem}h1,h2{text-align:center}@media(max-width:600px){html{font-size:16px}}.animation-center{display:flex;flex-direction:column;align-items:center}.text-move{animation:color 5s infinite alternate}@keyframes color{0%{color:#00f}to{color:red}}.float{animation:float 3s infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(20px)}}.flip{display:inline-block;animation:flip 2s infinite}@keyframes flip{to{transform:rotateY(360deg)}}.shine{width:fit-content;border-radius:20px;animation:shine 5s infinite}@keyframes shine{0%,to{box-shadow:0 0 10px #daa520}50%{box-shadow:0 0 70px #daa520}}.box-peek{width:50px;height:50px;border-radius:50%;background-color:purple;position:relative;animation:peek 1s infinite alternate ease-in-out;margin-bottom:2rem}@keyframes peek{0%{opacity:0;transform:translate(-100%)}to{transform:translate(100%)}}.rainbow{font-size:1.2rem;padding:.5rem;margin-top:2rem;background-color:purple;animation:bounce .4s alternate infinite;border:none;display:block;margin:0 auto;transition:.5s ease-out,background-color .5s ease-in}.rainbow:hover{background-color:plum;transform:scale(1.2)}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.swell{width:50px;height:50px;border-radius:50%;background-color:#db7093;margin-top:2rem;animation:swell 3s infinite}@keyframes swell{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.moving{width:50px;height:50px;background-color:#2e8b57;margin-top:2rem;margin-bottom:2rem;position:relative;animation:moving 5s infinite}@keyframes moving{0%,to{top:0;left:-50px}25%{top:0;left:50px}50%{top:50px;left:50px}75%{top:50px;left:-50px}}#smiley{font-size:2rem;border:none;background:none;transition:transform .2s ease}#smiley:active{transform:scale(1.2)}#smiley.shake{animation:shake .5s}#smiley.wobble{animation:wobble .3s forwards 2}@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}to{transform:rotate(0)}}@keyframes wobble{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.loading{border:20px solid var(--body-text);border-radius:50%;border-top:20px solid var(--nav-bg);width:40px;height:40px;animation:spin 2s ease-in-out infinite;margin-bottom:2rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-click{padding:.4rem;font-size:1rem;margin-bottom:2rem;outline:none;border:none;border-radius:15px;box-shadow:0 9px gray;background-color:#4a90e2}.btn-click:hover{background-color:#1f69c1}.btn-click:hover:active{box-shadow:0 5px #666;transform:translateY(4px)}.dot{display:inline-block;width:1rem;height:1rem;margin:0 .3rem;border-radius:50%;background-color:var(--nav-bg);animation:blink 1.4s infinite ease-in-out}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:0}40%{opacity:1}}.bouncing-text span{display:inline-block;animation:studs 1.5s infinite ease-in-out}.bouncing-text span:nth-child(1){animation-delay:0s}.bouncing-text span:nth-child(2){animation-delay:.1s}.bouncing-text span:nth-child(3){animation-delay:.2s}.bouncing-text span:nth-child(4){animation-delay:.3s}.bouncing-text span:nth-child(5){animation-delay:.4s}@keyframes studs{0%{transform:translateY(0)}25%{transform:translateY(-15px)}50%{transform:translateY(0)}to{transform:translateY(0)}}.seagull{width:300px;display:block;margin:0 auto}.seagull:hover{animation:wobble 2s ease-in-out infinite}@keyframes wobble{0%{transform:rotate(0)}15%{transform:rotate(-3deg)}30%{transform:rotate(3deg)}45%{transform:rotate(-3deg)}60%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}to{transform:rotate(0)}}.seagull2{width:300px;display:block;margin:0 auto}.seagull2:hover{animation:speed-off .5s ease-out forwards}@keyframes speed-off{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(200px) rotate(-5deg);opacity:0}}