@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

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

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #001730;
}

body a:link,
body a:visited {
  color: #001730;
}

h1 {
  margin-top: 1em;
  font-weight: 700;
  font-size: 22px;
}

p {
  margin: 1em 0 1em 0;
}
input {
  margin: 3px;
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.clickable:hover {
  color: #fe4a49;
}


.hamburger {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  gap: 5px;
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.hamburger span {
  width: 20px;
  height: 2px;
  background-color: #333;
  transition: 0.3s;
}

.word-finder {
  display: flex;
  gap: 0;
}

.main-panel {
  width: 768px;
  padding: 2rem;
  background-color: #ffffff;
}

.create-panel {
  width: 250px;
  padding: 2rem;
  background-color: #f4f4f4;
}

/* Mobile - hide nav panel, show hamburger */
@media (max-width: 767px) {
  .hamburger {
    display: flex;
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
    top: 10px;
    left: 10px;
  }

  .hamburger:hover {
    background-color: #e0e0e0;
  }

  .create-panel {
    display: none;
    padding-top: 4rem; /* make room for the hamburger button */
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background-color: #fff; /* or whatever color you want */
    z-index: 999; /* Make sure it's above other content */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
  }
  .create-panel.open {
    display: block; /* or flex/grid, depending on your layout */
  }

  .main-panel {
    width: 100%;
    padding-top: 4rem; /* Make room for hamburger button */
  }
}