svg { z-index: -1;}
html { --theme-blue: #b2ebf2; --base-animation-duration: 4s;}
.top-left { position: fixed; top: 20px; left: 20px;}
.top-right { position: fixed; top: 20px; right: 20px;}
.bottom-left { position: fixed; bottom: 0; left: 0;}
.bottom-right { position: fixed; bottom: 0; right: 0;}
.center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
@media (max-width: 1700px) { .center { left: 35%; }}
@media (max-width: 1500px) { .center { top: 20%; left: 50%; }}
.bottom-right .spinning-square { transform-origin: 700px 800px;}
.code-container { position: absolute; top: 35%; right: 30px; height: 300px; z-index: 50;}
@media (max-width: 1500px) { .code-container { left: 0; right: 0; } .prism-code.language-jsx { border-radius: 0; } /* center code when pre is full-screen*/ pre { padding-left: calc(100% - 800px) !important; }}
.code-container-inner { position: relative; height: 100%; width: 100%; z-index: 60;}
.duration-changer { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: 100px; top: -75px; right: 15px; z-index: 50; background: #fff; border: 8px solid var(--theme-blue); border-radius: 3px;}
.button-container { display: flex;}
button.counter { cursor: pointer; background: transparent; border-radius: 0; border: 3px solid #00caff; color: black; font-size: 24px; font-weight: 400; margin: 0; outline: none; padding: 0 10px; transition: background 0.3s;}button.counter + button.counter { margin-left: 4px;}
button.counter:hover,button.counter:active { background: #00caff; color: var(--theme-blue);}button.counter:active { outline: 3px solid #00caff;}button.counter:disabled { cursor: not-allowed; background: lightgray; color: #111;}
.get-started.large-screen { position: absolute; display: grid;}
.get-started.small-screen { display: none;}
@media (max-width: 1500px) { .get-started.large-screen { display: none; } .get-started.small-screen { display: grid; }}