*, *::after,*::before {
	box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 40px;
}

.mobile-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  height: 25px;
  width: auto;
  padding: 0;
  margin: 0;
}

.hamburger-menu {
  margin: 0;
  padding: 0;
}



.mobile-header {
  background-color: black;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:root {
 --bar-width: 35px; 
 --bar-height: 5px;
 --hamburger-gap:4px;
 --foreground:#f4c100;
 --background:white;
 --hamburger-margin: 6px;
 --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); 
  list-style: none;
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  z-index: 2;
  cursor: pointer;
  right: var(--hamburger-margin);
  left: auto;
}

.hamburger-menu:has(input:checked) {
  --foreground: #f4c100;
  --background: #000;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color:var(--foreground);
  border-radius:9999px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width 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 {
 position: absolute;
 transition: translate var(--animation-timing);
 translate: 100%;
 padding: 2rem 2rem 0 1rem;
 margin-top: calc(var(--hamburger-height)+ var(--hamburger-margin) +1rem);
 background-color: #000;
 color: var(--background);
 max-width: 10rem;
 min-height: 100vh;
 right: 0;
 top: 0; 
 left: auto;
 text-align: left;
}

.sidebar ul {
  padding: 0;
  font-family: "RocknRoll One", sans-serif;
  margin: 0;
  margin-left: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar li {
  list-style: none;
}

.sidebar a,
.dropdown summary {
  display: block;
  padding: 0.5rem 0;
  font-weight: bold;
  color: var(--background);
  text-decoration: none;
}

.hamburger-menu:has(input:checked) ~ .sidebar{
  translate:0;
}

.dropdown details {
  margin:0;
}

.dropdown summary {
  list-style: none;
  cursor: pointer;
  color: var(--background);
  font-weight: bold;
  padding: 0;
}

.dropdown-content {
  padding-left: 0.5rem;
  margin-top: 0.3rem;
}

.dropdown-content a {
  font-size: 0.95rem;
  padding: 0.4rem 0;
  color: var(--background);
  text-decoration: none;
}