@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Merriweather&family=Pacifico&family=Public+Sans:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Sarala:wght@400;700&display=swap');

:root {
  --background-color: #FFFFFC;
  --text-color: #001011;
  --site-header-color: #FF4365;
  --body-heading-color: #731DD8;

  --unvisited-link-color: #068D9D;
  --visited-link-color: #EA526F;

  --code-text-color: #FFFFFC;
  --code-background-color: #001011;
}

@media prefers-color-scheme: dark {
  :root {
    --background-color: #001011;
    --text-color: #FFFFFC;
    --h1-color: #FF4365;

    --site-header-color: #FF4365;
    --body-heading-color: #731DD8;
    
    --unvisited-link-color: #068D9D;
    --visited-link-color: #EA526F;

    --code-text-color: #FFFFFC;
    --code-background-color: #001011;
  }
}

body {
  font-family: "Sarala", serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

header {
  font-size: 2em;
  font-family: "Pacifico", cursive;
  color: var(--site-header-color);
  text-shadow: 0.1em 0.1em #231123;
  text-align: center;
  margin-bottom: 1em;
}

main {
  margin: 0 20%;
  text-align: left;
}

header img {
  float: right;
  max-height: 20%;
  max-width: 20%;
}

body h2 {
  font-family: "Merriweather", sans-serif;
  color: var(--body-heading-color);
  text-decoration: underline;
}

body p {
  font-size: large;
}

pre {
  color: var(--code-text-color);
  background-color: var(--code-background-color);
  
  outline: thick inset #6C698D;
  padding-left: 2em;
  padding-right: 2em;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: large;
}

footer {  
  margin: 5em 0;
  text-align: center;
}

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

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