@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  width: 100%;
  margin: 0;
  background-color: #E3E6F3;
}

/* Responsive headings - scales automatically */
h1{
  font-size: clamp(28px, 8vw, 50px);
  line-height: 1.2;
  color: #222;
}

h2{
  font-size: clamp(24px, 7vw, 46px);
  line-height: 1.2;
  color: #222;
}

h4{
  font-size: clamp(16px, 4vw, 20px);
  color: #222;
}

h6{
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
}

p{
  font-size: clamp(14px, 3vw, 16px);
  color: #465b52;
  margin: 15px 0 20px 0;
  line-height: 1.5;
}

button{
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 600;
  padding: 12px 30px;
  color: #E6C87C;
  background-color: #4b5b74;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  border-radius: 4px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.2s;
}

button.white{
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 600;
  padding: 11px 18px;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
  border: 1px solid #fff;
  outline: none;
  transition: 0.2s;
  box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.03);
}

/* Optional: Media queries for fine-tuning */
@media (max-width: 768px) {
  button, button.white {
    padding: 8px 20px;
  }
}