main {
    margin-bottom: 100px;
}


input[type = checkbox] {
    display: none;
}

input + label {
    font-size: 1.2rem;
    display: inline;
    justify-content: center;
    align-items: center;
    transition: .001s all;
    cursor: pointer;
}

input + label:hover {
    transform: scale(.95);
}

input + label:after {
    content: "🌙";
}

input:checked + label {
    transform: scale(1.1);
}

input:checked + label:hover {
    transform: scale(1.05);
}

input:checked + label:after {
    content: "💡";
}

.dark input:checked + label, .dark input:checked + label:hover, .dark input + label {
}

/* In your CSS file */
p code {
  background-color: #f5f2f0; /* light mode */
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.dark p code {
  background-color: #f5f2f0; /* dark mode */
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: #27272a;
}

.code-toolbar {
    z-index: -100;
}