/*****************/
/* Theme Queries */
/*****************/

:root {
  --base: #e1eeef;
  --base-intro: #f8f8f8;
  --base-shadow: #dedede;
  --main-text: #005661;
  --impact: #64607f;
  --impact-rgb: rgb(100, 96, 127);
  --impact-alt: #0095a8;
  --link-text: #009456;
  --link-hover: #00b368;

  --invisible-rgb: rgb(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #0e1920;
    --base-intro: #1b2932;
    --base-shadow: #171722;
    --main-text: #c5cdd3;
    --impact: #d3b692;
    --impact-rgb: rgb(211, 182, 146);
    --impact-alt: #72b7c0;
    --link-text: #70c27f;
    --link-hover: #3f8d6c;
  }
}

/******************/
/* Root Variables */
/******************/

:root {
  --invisible-rgb: rgb(0,0,0,0);
}

/*************/
/* Elements */
/************/

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: calc(.85em + 1vw);
  scroll-behavior: smooth;
}

body {
  background-color: var(--base);
  color: var(--main-text);
  font-family: 'Fira Code', monospace;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 8vw;
}

a {
  text-decoration: none;
}

a,
a:visited {
  color: var(--link-text);
}

a:hover {
  color: var(--link-hover);
}

footer {
  text-align: center;
  font-size: .6em;
  opacity: 60%;
}

footer p {
  font-style: italic;
  margin-bottom: .2rem;
  margin: auto;
}

h1,
h2 {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.66em;
}

li {
  font-size: .9em;
}

main {
  flex: 1;
}

main p {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}

main:first-child {
  padding-top: 5vh;
}

/*******************/
/* Element Queries */
/*******************/

@media (max-width: 450px) {
  h1 {
    font-size: 1.5em;
  }
  body {
    font-size: 1rem;
  }
}

@media (min-width: 600px) {

  body {
    margin: 0 4vw;
  }

  main {
    align-items: center;
    max-width: 70%;
    margin: auto;
  }
}

/***********/
/* Classes */
/***********/

.center {
  text-align: center;
}

.contacts {
  margin: 2rem auto;
  width: fit-content;
}

.contacts div {
  margin: 1em auto;
}

.contacts li {
  display: block;
  width: auto
}

.current {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .3em;
}