* {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  /* fonts */
  --font-Lato: "Lato";

  --font-NotoSerifTC: "Noto Serif TC";
  --font-NotoSerifSC: "Noto Serif SC";

  --font-NotoSansTC: "Noto Sans TC";
  --font-Flatline: "Flatline";
  /* font sizes */
  --font-size-3xs: 0.75rem;
  --font-size-2xs: 0.875rem;
  --font-size-xs: 1rem;
  --font-size-24: 1.5rem;
  --font-size-sm: 2.25rem;
  --font-size-base: 3rem;
  --font-size-title: 2rem;

  /* Colors */
  --color-white: rgb(255, 255, 255);
  --color-black: #333333;
  /* --color-gray-100: rgb(109, 132, 128); */

  --color-gray-100: rgb(121, 145, 147);
  --color-gray-200: rgb(111, 124, 124);
  --color-gray-300: rgba(33, 33, 33, 0.2);
  --color-gray-400: rgba(0, 0, 0, 0);
  --color-dimgray: rgb(115, 115, 114);

  --color-dimgray2: rgb(148, 148, 148);

  --color-gray: rgb(211, 215, 216);
  --color-main-green: rgb(155, 174, 171);

  --color-bg-green-deep: #717e81;
  --color-bg-green-light: #799193;

  --color-logo: #425553;

  --page-padding: 5rem;
  --menu-padding: 1.25rem;
  --menu-height: min(
    calc(calc(var(--menu-padding) * 2) + max(7.5vw, 2.5rem)),
    7rem
  );
  --content-padding: 3rem;
  --heading-font-size: 2.25rem;
  --subheading-font-size: 1.125rem;
  --gallery-width: 85%;
  --gallery-controls-padding: 3rem;
}

@media screen and (max-width: 1280px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (max-width: 650px) {
  :root {
    font-size: 12px;
  }
}

@font-face {
  font-family: LaFleur;
  src: url(../fonts/LaFleur.otf) format("opentype");
}

@font-face {
  font-family: Flatline;
  src: url(../fonts/FlatlineRegular.otf) format("opentype");
}
@font-face {
  font-family: Flatline;
  font-weight: bold;
  src: url(../fonts/FlatlineBold.otf) format("opentype");
}