:root {
     --large-one-center: calc(-256px / 2);
     --anim-large-one-center: calc(-352px / 2);
     --anim-large-two-center: calc(-416px / 2);
     --background-color: #ffffff;
     --text-color: #4d4d4d;
     --cog-color: #4d4d4d;
     --anim-cog-color: #e2e2e2;
}
 body.dark {
     --background-color: #0f1115;
     --text-color: #f1f1f1;
     --cog-color: #ffffff;
     --anim-cog-color: #3a404a;
}
/* */
/* */
/* */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
}
 html, body {
     overflow: hidden;
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var( --background-color );
}
/* */
/* */
/* */
 body > .content {
     position: relative;
     width: 1px;
     height: 1px;
		margin-bottom: 20%;
}
/* */
/* */
/* */
 .gear g {
     fill: var( --cog-color );
}
 .gear circle {
     stroke: var( --cog-color );
}
 .gear.anim-large-one circle, .gear.anim-large-two circle {
     stroke: var(--anim-cog-color);
}
/* */
/* */
/* */
 body > .content .gear {
     position: absolute;
     pointer-events: none;
     transform-origin: 50% 50%;
}
 .gear.small-one {
     animation: spin-left 5s linear infinite;
     left: 62px;
     top: 32px;
}
 .gear.small-two {
     animation: spin-right 5s linear infinite;
     left: 157px;
     top: -32px;
}
 .gear.small-three {
     animation: spin-left 5s linear infinite;
     left: -211px;
     top: -125px;
}
 .gear.large-one {
     animation: spin-right 10s linear infinite;
     left: var(--large-one-center);
     top: var(--large-one-center);
}
/* */
/* */
/* */
 @keyframes spin-left {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(-360deg);
    }
}
 @keyframes spin-right {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
/* */
/* */
/* */
 .gear.anim-large-one {
     animation: spin-left 4s linear infinite;
     left: var( --anim-large-one-center );
     top: var( --anim-large-one-center );
}
 .gear.anim-large-two {
     animation: spin-right 2.5s linear infinite;
     left: var( --anim-large-two-center );
     top: var( --anim-large-two-center );
}
/* */
/* */
/* */
 img:hover {
     cursor: pointer;
}
 img.developer-avatar {
     position: absolute;
     left: -68px;
     top: -68px;
     width: 136px;
     border-radius: 50%;
}
 img.icon-one {
     position: absolute;
     left: -177px;
     top: -91px;
     width: 60px;
     border-radius: 50%;
}
/* */
/* */
/* */
 footer {
     position: absolute;
     bottom: 32px;
     pointer-events: none;

		 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
 footer a {
     display: block;
     text-align: center;
     color: var( --text-color );
}
 footer a b {
     pointer-events: all;
     cursor: pointer;
}
/* */
/* */
/* */
 .toggle {
     background-color: var( --anim-cog-color );
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     cursor: pointer;
     box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);
     line-height: 1;
     color: var( --cog-color );
}
 .input {
     display: none;
}
 .icon {
     grid-column: 1 / 1;
     grid-row: 1 / 1;
     transition: transform 500ms;
     line-height: 0.1;
}
 .icon--moon {
     transition-delay: 200ms;
}
 .icon--sun {
     transform: scale(0);
}
 #switch:checked + .icon--moon {
     transform: rotate(360deg) scale(0);
}
 #switch:checked ~ .icon--sun {
     transition-delay: 200ms;
     transform: scale(1) rotate(360deg);
}