:root {
    --bg-color: white;
    --dark-text-color: black;
    --light-text-color: white;
    --edit-code-bg: hsl(44, 87%, 94%);
    --view-code-bg: hsl(44, 50%, 97%);
    --border-color: rgba(0, 0, 0, 0.5);
    --border-radius: 4px;
}

body {
    color: var(--dark-text-color);
    background: var(--bg-color);
}

h1, h2 {
  margin-top: 1em;
  margin-bottom: 0.1em;
}

h3 {
  margin-top: 0.5em;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ==== Styles for toggle buttons ====*/

.toggle {
    background: var(--bg-color);
    color: var(--dark-text-color);
    border: 0.5px solid #452981;
    border-radius: 6px;
    padding: 0.2em 0.4em;
    /* margin: 0.4em; */
}

.toggle:focus {
    border-radius: 6px;
}

.toggle.on {
    background: hsl(331, 63%, 70%);
    color: var(--light-text-color);
}

.toggle:hover {
    box-shadow: 0 0 1px 1px hsl(331, 63%, 65%);
}
