:root {
  --primary-color: #2980B9;
  --secondary-color: #1F618D;
  --accent-color: #F7B733;
  --light-color: #F9FBFC;
  --dark-color: #0D6B5C;
  --gradient-primary: linear-gradient(135deg, #3F8BCB 0%, #2980B9 100%);
  --hover-color: #1F618D;
  --background-color: #F9FBFC;
  --text-color: #4B5563;
  --border-color: rgba(41, 128, 185, 0.2);
  --divider-color: rgba(41, 128, 185, 0.1);
  --shadow-color: rgba(41, 128, 185, 0.1);
  --highlight-color: #E67E22;
  --main-font: 'Roboto Condensed', sans-serif;
  --alt-font: 'Inter', sans-serif;
}

/* Neumorphic styles */
.neumorphic {
  background: var(--background-color);
  box-shadow: 8px 8px 16px var(--shadow-color), -8px -8px 16px #ffffff;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.neumorphic:hover {
  box-shadow: 4px 4px 8px var(--shadow-color), -4px -4px 8px #ffffff;
}

/* Background pattern */
body {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ECF0F1' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3Crect x='15' y='15' width='10' height='10' rx='2'/%3E%3Crect x='35' y='35' width='10' height='10' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hamburger menu */
#menu-toggle {
  display: none;
}

#menu-toggle:checked~.navigation ul {
  display: flex;
}

.navigation ul {
  display: none;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--background-color);
  padding: 1rem;
  box-shadow: 0 4px 8px var(--shadow-color);
}

@media (min-width: 768px) {
  .navigation ul {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    box-shadow: none;
  }

  .hamburger {
    display: none;
  }
}

.hamburger {
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--text-color);
  margin: 5px 0;
  transition: all 0.3s ease;
}