*, *::after, *::before {
     box-sizing: border-box;
}
 body {
     margin: 0;
}
 .red-line {
     background-image: url("../images/logo.png");
     background-color: #992A23;
     height: 4rem;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 20rem;
     position: fixed;
     width: 100%;
     z-index: 9999;
     top: 0px;
}
 :root {
     --bar-width: 60px;
     --bar-height: 8px;
     --hamburger-gap: 6px;
     --foreground: #992A23;
     --background: #F1F1F1;
     --hamburger-margin: 8px;
     --animation-timing: 200ms ease-in-out;
     --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}
 .hamburger-menu {
     --x-width: calc(var(--hamburger-height) * 1.41421356237);
     display: flex;
     flex-direction: column;
     gap: var(--hamburger-gap);
     width: max-content;
     position: absolute;
     top: var(--hamburger-margin);
     left: var(--hamburger-margin);
     z-index: 2;
     cursor: pointer;
}
 .hamburger-menu:has(input:checked) {
     --foreground: white;
     --background: #333;
}
 .hamburger-menu:has(input:focus-visible)::before, .hamburger-menu:has(input:focus-visible)::after, .hamburger-menu input:focus-visible {
     border: 1px solid var(--background);
     box-shadow: 0 0 0 1px var(--foreground);
}
 .hamburger-menu::before, .hamburger-menu::after, .hamburger-menu input {
     content: "";
     width: var(--bar-width);
     height: var(--bar-height);
     background-color: #F1F1F1;
     border-radius: 9999px;
     transform-origin: left center;
     transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
}
 .hamburger-menu input {
     appearance: none;
     padding: 0;
     margin: 0;
     outline: none;
     pointer-events: none;
}
 .hamburger-menu:has(input:checked)::before {
     rotate: 45deg;
     width: var(--x-width);
     translate: 0 calc(var(--bar-height) / -2);
}
 .hamburger-menu:has(input:checked)::after {
     rotate: -45deg;
     width: var(--x-width);
     translate: 0 calc(var(--bar-height) / 2);
}
 .hamburger-menu input:checked {
     opacity: 0;
     width: 0;
}
 .sidebar {
     transition: translate var(--animation-timing);
     translate: -100%;
     padding: 0.5rem 1rem;
     padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 2rem);
     background-color: var(--foreground);
     color: var(--background);
     max-width: 17rem;
     min-height: 100vh;
     font-size: 1.5em;
     font-family: Roboto, sans-serif;
}
 .no-bullets {
     list-style-type: none;
     margin: -1rem 0 0 0;
     padding: 0rem;
}
 .no-bullets li {
     height: 1.6rem;
     margin: 1rem;
}
 .hamburger-menu:has(input:checked) + .sidebar {
     translate: 0;
}
 #search-big {
     float:right;
     margin: 0.85em 1em 0px 0px;
     font: 1em;
    padding: 0.1em 0.1em;
}
#search-sidebar {
     margin: -0.2em 0em 0px 0px;
     width: 7.8em;
     font: 1em;
    padding: 0em 0em;
}
 @media ( max-width : 750px) {
     .desktop-only {
         display: none;
    }
    .red-line {
        background-size: 15rem;
    }
}
 @media ( min-width : 750px) {
     .mobile-only {
         display: none;
    }
    .red-line {
        background-size: 20rem;
     }
}