html, body {
  overflow: hidden;
}

header {
  z-index: 1;
}

main {
  justify-content: center;
  align-items: center;
  height: 90dvh;
  scale: 2;
  z-index: 0;
}

h2, h3 {margin: 0px;}
h3 {margin-bottom: 50px;}

svg {
  fill: #24292F;
  transition: all 0.2s ease;
  background-color: transparent;
}

.circle {
  border: 2px dashed #24292F;
  border-radius: 50%;
}

#outer.circle {
  min-width: 250px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 50dvw;
  max-height: 50dvw;
  animation: rotate-inv 20s linear infinite;
  position: relative;
}

#inner.circle {
  min-width: 150px;
  min-height: 150px;
  position: absolute;
  rotate: 0deg;
  animation: rotate 10s linear infinite;
}

.circle :is(svg, img) {
  position: absolute;
  height: 24px;
  width: 24px;
  max-width: 24px;
  max-height: 24px;
  margin-left: 12px;
  margin-top: 6px;
  background-color: #FFFFFF;
  border-radius: 30%;
  animation: rotate-inv 20s linear infinite;
}

#outer.circle > span > :is(svg, img) {
  margin: 24px;
  animation: rotate 20s linear infinite;
}

#html, #css svg {
  border-radius: 10% 10% 30% 30%;
}

#html {
  top: -18px;
  left: calc(50% - 12px);
  translate: -50%;
}

#css {
  bottom: -12px;
  left: calc(50% - 12px);
  translate: -50%;
}

#js {
  top: calc(50% - 18px);
  left: -12px;
  translate: -50%;
}

span:has(#docker) {
  position: absolute;
  top: 0px;
  left: 0px;
} #docker {
  border-radius: 60% 75% 75% 40%;
}

span:has(:is(svg, img)) {
  background-color: transparent;
}

span:has(#mariadb) {
  position: absolute;
  left: 0px;
  bottom: 0px;
} #mariadb {
  border-radius: 75% 10% 10% 10%;
  position: relative;
}

span:has(#linux) {
  position: absolute;
  top: calc(50% - 24px);
  right: 36px;
  background-color: red;
} #linux {
  border-radius: 50%;
}

#csharp {
  bottom: 6px;
}

#lua {
  right: 6px;
  top: 6px;
  border-radius: 50% 30% 50% 50%;
}

#php {
  bottom: 12px;
  right: 6px;
  height: 15px;
  max-height: 15px;
  border-radius: 40%;
}

.dark1 {
  fill: #1A1F24;
}

.dark2 {
  fill: #1E2328;
}

.white {
  fill: #FFFFFF;
}

@media animations {}

@keyframes rotate {
  0% {
    rotate: 0deg;   /* Starting point */
  }
  100% {
    rotate: 360deg; /* Full rotation */
  }
}

@keyframes rotate-inv {
  0% {
    rotate: 0deg;   /* Starting point */
  }
  100% {
    rotate: -360deg; /* Full rotation */
  }
}

@media dark-mode {}

#menu-toggle-dark-mode:not(:checked) ~ #body main .light-mode {
  display: inline-block;
  visibility: hidden;
}

#menu-toggle-dark-mode:checked ~ #body main .dark-mode {
  display: inline-block;
  visibility: hidden;
}

#menu-toggle-dark-mode:checked ~ #body main :is(svg, img, .cls-1) {
  fill: #FFFFFF;
  background-color: #000000;
}

#menu-toggle-dark-mode:checked ~ #body .dark1 {
  fill: #C9C9C9;
}

#menu-toggle-dark-mode:checked ~ #body .dark2 {
  fill: #DADADA;
}

#menu-toggle-dark-mode:checked ~ #body .white {
  fill: #24292F;
}