@import "./normalize.css";
@import "./font.css";
@import "./grid.css";
@import "./modal.css";
@import "./nav.css";
@import "./variables.css";
@import "./section/00-reserve.css";
@import "./section/01-brand.css";
@import "./section/02-whoisbrave.css";
@import "./section/03-milestone.css?version=1.2";
@import "./section/04-accompany.css";
@import "./section/05-partner.css?version=1.1";
@import "./section/06-road.css?version=1.1";
@import "./section/07-contact.css?version=1.1";
@import "./section/08-ad.css?version=1.1";
@import "./footer.css";

html, body {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-size-sm);
  background-color: var(--color-6);
  scroll-behavior: smooth; /* Not support Safari */
  line-height: 1.5;
}

body.disableScroll {
  touch-action: none; /* for iOS Safari */
}

* {
  -webkit-overflow-scrolling: touch;
}

section {
  background-repeat: no-repeat;
  background-size: 1024px 100%;
  background-position: center top;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

h2, h3, h4 {
  font-weight: 500;
  margin: 0;
  letter-spacing: 2px;
  font-family: var(--serif-medium);
}

h2 {
  color: var(--color-6);
  font-size: var(--text-size-xl);
}

h3 {
  color: var(--color-4);
  font-size: var(--text-size-xs);
}

h4 {
  color: var(--color-2);
  font-size: var(--text-size-lg);
}

p, ul {
  font-size: var(--text-size-xxs);
  margin: 0;
  color: var(--color-4);
}

mark {
  background-color: transparent;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.circle {
  border-radius: 50%;
}

.d-none {
  display: none;
}

@media screen and (min-width: 1024px) {
  h2 {
    font-size: var(--text-size-xxl);
  }

  h3 {
    font-size: var(--text-size-xl);
  }

  p {
    font-size: var(--text-size-lg);
  }

  section {
    background-size: cover;
  }
}

@media screen and (min-width: 1920px) {
  /* 背景圖被延展會導致弧度消失 */
  section {
    background-size: 100% 100%;
  }
}