/* DIN Condensed Variable */
@font-face {
  font-family: 'din-condensed-variable', sans-serif;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'din-condensed-variable', sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'din-condensed-variable', sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* Neue Haas Grotesk Display */
@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  font-weight: 700;
  font-style: italic;
}

:root {
  --background-color: #000;
  --heading-color: #fcfafa;

  --font-din-vf: 'din-condensed-variable', sans-serif;
  --font-haas: 'neue-haas-grotesk-display', sans-serif;
  --font-noto-sans-jp: 'Noto Sans JP', sans-serif;
  --font-roboto-condensed: 'Roboto Condensed', sans-serif;
  --font-dm-sans: 'DM Sans', sans-serif;
  --font-urbanist: 'Urbanist', sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'neue-haas-grotesk-display', 'din-condensed-variable', 'Noto Sans JP';
  /* overflow-x: hidden; */
  background-color: var(--background-color);
  color: #fcfafa;
  font-weight: 500;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 160px 0;

  @media screen and (max-width: 768px) {
    max-width: 100%;
    padding: 0;
  }
}