/* Fonts */

/* <weight>: Use a value from 400 to 900
 * <uniquifier>: Use a unique and descriptive class name
 * .playfair-display-<uniquifier> {
 *   font-family: "Playfair Display", serif;
 *   font-optical-sizing: auto;
 *   font-weight: <weight>;
 *   font-style: normal;
 * }
 */

/* <weight>: Use a value from 200 to 900
 * <uniquifier>: Use a unique and descriptive class name
 * .noto-serif-sc-<uniquifier> {
 *   font-family: "Noto Serif SC", serif;
 *   font-optical-sizing: auto;
 *   font-weight: <weight>;
 *   font-style: normal;
 * }
 */

.playfair-display-black {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.noto-serif-sc-black {
  font-family: "Noto Serif SC", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.nothing-you-could-do-regular {
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;
}

.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-mono-light {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.noto-serif-sc-light {
  font-family: "Noto Serif SC", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* End of fonts */

html, body {
  margin       : 0;
  padding      : 0;
  border-width : 0;
}

body {
  width           : 100vw;
  min-height      : 100vh;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
}

#main {
  box-sizing: border-box;
  padding: 2rem;
}

#main header {
  box-sizing    : border-box;
  font-size     : large;
  text-align    : center;
}

#header_logo img {
  width          : 4em;
  border-radius  : 50%;
  vertical-align : middle;
  margin         : 1em;
}

#header_name {
  display        : inline;
  vertical-align : middle;
}

#main footer {
  box-sizing    : border-box;
  margin-top    : 4em;
  margin-bottom : 4em;
  text-align    : center;
}

#main section, #main aside {
  box-sizing    : border-box;
  margin-top    : 4em;
  margin-bottom : 4em;
}

#profile_photo {
  width          : 8em;
  border-radius  : 2em;
  vertical-align : middle;
  margin         : 2em;
}

#section_basic {
  border-radius: 1rem;
}

#section_basic ul {
  display         : inline-block;
  list-style-type : none;
  padding-left    : 0;
  text-align      : left;
  vertical-align  : middle;
}

#section_basic li {
  margin-bottom   : 1em;
}

#aside_credo {
  font-size: x-large;
  text-align: center;
}

#section_links {
  text-align: center;
  border-radius: 1rem;
}

#section_links ul {
  list-style-type : none;
  padding-left    : 0;
}

#section_links li {
  display : inline-block;
  margin  : 1em;
}

#main a:link, #main a:visited {
  text-decoration: none;
}

@media screen and (prefers-color-scheme: light) {

  body {
    background-color : white;
  }

  #main {
    background-color: hsl(0 0% 90%);
    color: black;
  }

  #main a:link, #main a:visited {
    color: hsl(23 100% 50%);
  }

  #section_basic {
    background-color: hsl(0, 0%, 80%);
  }

  #section_links {
    background-color: hsl(0, 0%, 80%);
  }

}

@media screen and (prefers-color-scheme: dark) {

  body {
    background-color : black;
  }

  #main {
    background-color: hsl(0 0% 10%);
    color: white;
  }

  #main a:link, #main a:visited {
    color: darkorange;
  }

  #section_basic {
    background-color: hsl(0, 0%, 20%);
  }

  #section_links {
    background-color: hsl(0, 0%, 20%);
  }

}