@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@700&display=swap');

html {
  scroll-behavior: smooth;
}

:root {
  --main-brand-color: #297AE3;
  --primary-color: #15171C;
  --secondary-color: #232933;
  --light-secondary-color: #2E3744;
  --text-color: white;
  --secondary-text-color: #B3B4B6;
}

* {
  padding: 0;
  margin: 0;
}



body {
  min-height: 100vh;
  background-color: var(--primary-color);
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: var(--text-color);
  overflow-x: hidden;
}

h1 {
  font-size: 100px;
  line-height: 115%;
}

.subheading {
  margin-top: 25px;
  color: var(--secondary-text-color);
}

#button {
  display: none;
}

label[for="button"] {
  display: none;
}

label[for="button"] span {
  font-size: 40px;
}



@media (max-width: 1400px) {
  body {
    width: 100%;
    display: flex;
    flex-direction: column;
  }


  

  nav {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--secondary-color);
    padding: 15px;
    display: flex;
    flex-direction: column;
  }

  nav ul {
    display: none;
    flex-direction: column;
  }

  #button:checked ~ ul {
    display: flex;
  }

  label[for="button"] {
    display: block;
  }
}