@import '/css-config.css';

header {
  block-size: var(--sm-header-block-size);
  max-block-size: var(--sm-header-block-size);
}
header section {
  max-inline-size: var(--max-inline-size);
  padding-inline: var(--sm-header-padding-inline);
  padding-block: var(--sm-header-padding-block);
}
main section {
  max-inline-size: var(--max-main-inline-size);
  padding-inline: var(--sm-main-padding-inline);
  padding-block: var(--sm-main-padding-block);
}
footer section {
  max-inline-size: var(--max-inline-size);
  padding-inline: var(--sm-footer-padding-inline);
  padding-block: var(--sm-footer-padding-block);
}

header,
main,
footer,
_ {
  box-sizing: border-box;
}
header section,
main section,
footer section,
_ {
  box-sizing: border-box;
  block-size: 100%;
  inline-size: 100%;
  margin-inline: auto;
}

:root {
  --header-block-size: var(--sm-header-block-size);
}

/* hide large layout */
@media (max-width: 699px) or (max-height: 699px) {
  .lg-nav {
    display: none;
  }
}
/* show large layout */
@media (min-width: 700px) and (min-height: 700px) {
  :root {
    --header-block-size: var(--lg-header-block-size);
  }
  header {
    block-size: var(--lg-header-block-size);
    max-block-size: var(--lg-header-block-size);
  }
  header section {
    padding-inline: var(--lg-header-padding-inline);
    padding-block: var(--lg-header-padding-block);
  }
  main section {
    padding-inline: var(--lg-main-padding-inline);
    padding-block: var(--lg-main-padding-block);
  }
  footer section {
    padding-inline: var(--lg-footer-padding-inline);
    padding-block: var(--lg-footer-padding-block);
  }
  .sm-nav {
    display: none;
  }
}

.accent-a {
  background-color: var(--accent-a);
}
.accent-b {
  background-color: var(--accent-b);
}
.accent-c {
  background-color: var(--accent-c);
}
.accent-c1 {
  background-color: var(--accent-c1);
}
.bg-color-a {
  background-color: var(--bg-color-a);
}
.bg-color-b {
  background-color: var(--bg-color-b);
}
.bg-color-c {
  background-color: var(--bg-color-c);
}
.bg-color-c1 {
  background-color: var(--bg-color-c1);
}