/* basic */

:root {
  --font-family: 'Geist', 'Noto Sans TC', 'Noto Sans KR', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'Fira Mono', monospace;
  --ink: 44 41 37;
  --ink-warm: 88 72 46;
  --surface: 249 246 240;
  --surface-alt: 239 234 224;
  --white: 255 255 255;
  --black: 0 0 0;
  --accent: 138 133 12;
  --shadow: 15 23 42;
  --element-primary-color: rgb(var(--ink) / var(--tw-text-opacity, 1)) !important;
  --element-secondary-color: #444444;
  --background-primary-color: rgb(var(--surface));
  --background-secondary-color: rgb(var(--white) / 0.6);
  --border-color: #999999;
  --separator-color: #d6d6d6;
  --column-width: 42rem;
  --column-margin-top: 4rem;
}
/*
@media (prefers-color-scheme: dark) {
  :root {
    --element-primary-color: #d7d3ce;
    --element-secondary-color: #c3c6d6;
    --background-primary-color: #101218;
    --background-secondary-color: #2e3139;
    --border-color: #4d5356;
  }
  .invert-on-dark {
    filter: invert(1) !important;
  }
}
*/

html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgb(var(--surface-alt)) !important
}

img, a {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

body {
  font-size: 1rem;
  line-height: 1.7;
  font-family: var(--font-family) !important;
  font-weight: 300;
  background-color: var(--background-primary-color) !important;
  color: var(--element-primary-color) !important;
}


footer {
  padding: 1rem 18rem 4rem 18rem !important;
}

p {
  font-size: .85rem;
  font-weight: 250;
  margin-bottom: .75rem !important;
  color: var(--element-primary-color) !important;
}

p:last-child {
  margin-bottom: 0 !important;
}

a {
  text-decoration: none !important;
  font-weight: inherit;
  color: var(--element-secondary-color) !important;
  transition: font-weight 0.18s ease, color 0.18s ease;
}

a:hover {
  font-weight: 450 !important;
}

span {
  color: var(--element-secondary-color) !important;
}

h4 {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* container */

.main {
  padding: 1rem .5rem;
}

.container {
  margin-bottom: 2rem;
  max-width: none !important;
}

.container:last-of-type {
  margin-bottom: 0 !important;
}

.section-title {
  font-size: .8rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: rgb(var(--ink) / 0.56) !important;
  border-bottom-width: 1px;
  border-color: rgb(var(--ink) / 0.3);
  padding-bottom: 5px;
  letter-spacing: .1em;

}
.subsection-title {
  font-weight: 350 !important;
}

.page-title {
  font-family: 'Newsreader';
  font-size: 1.5rem !important;
  font-weight: 400;

}

@media screen and (min-width: 1601px) {
  main, header {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
  }

  footer {
    padding: 2rem 0 3rem 0 !important;
  }
  .footer-container {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
    
  }
}


@media screen and (max-width: 1600px) {
  main, header {
    padding: 0 15rem !important;
  }

  footer {
    padding: 2rem 15rem !important;
  }
}

@media screen and (max-width: 1440px) {
  main, header {
    padding: 0 10rem !important;
  }

  footer {
    padding: 1rem 10rem !important;
  }
}

@media screen and (max-width: 1200px) {
  main, header {
    padding: 0 4rem !important;
  }

  footer {
    padding: 1rem 4rem !important;
  }
}

@media screen and (max-width: 991px) {
  main, header {
    padding: 0 1rem !important;
  }

  footer {
    padding: 1rem 1rem !important;
  }
}

@media screen and (max-width: 575px) {
  main, header {
    padding: 0 .3rem !important;
  }

  footer {
    padding: 1rem .3rem !important;
  }
}

/* nav bar */

.nav-link {
  text-transform: lowercase;
  letter-spacing: .75px;
  font-size: .9rem !important;
  font-weight: 350 !important;
}

.nav-link:hover {
  font-weight: 500 !important;
}

.navbar-nav>li {
  padding-left: 1.1rem;
}

.nav-item {
  padding-left: 0 !important;
}

.navbar-toggler {
  border: none !important;
  outline: none !important;
  padding: 0 !important
}

.active {
  text-decoration: none !important;
}

/* footer */
footer {
    background-color: rgb(var(--surface-alt)) !important;
}

.footer-text {
  font-size: .85rem !important;
  font-weight: 200 !important;
}
.footer-link {
  display: inline-flex;
  align-items: center;
}

.footer-weather-icon {
  width: auto;
  height: 23px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.footer-weather-line {
  display: inline-flex;
  align-items: center;
  gap: 0rem;
  flex-wrap: wrap;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--separator-color) !important;
  color: var(--separator-color) !important;
  background-color: var(--separator-color) !important; 
}