@import "/assets/css/svg.css";
@import "/assets/css/theme.css";
@import "/assets/css/note.css";
@import "/assets/css/gallery.css";
@import "/assets/css/nav.css";

:root {
  --paper: #ffffff;
  --paper-transparent: #ffffff80;
  --ink: #3a1537;
  --ink-transparent: #3a1537c8;
  --title: #ff6d91;
  --bg: #fed7e1;
  --accent: #ff1979;
  --comp: #007efc;
  --font-sans: system-ui, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Times, Times New Roman, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
  --paper: #15151b;
  --paper-transparent: #15151b80;
  --ink: #f4f7ff;
  --ink-transparent: #f4f7ffc8;
  --title: #9097af;
  --bg: #545971;
  --accent: #252a3b;
  --comp: #c1e1cd;
  --font-sans: system-ui, Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Times, Times New Roman, serif;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* root font size*/
/*
1rem = root font size
1em = parent element font size

use rem units to keep measurements consistent across the site
*/


html {
  font-size: 14px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--bg);
  overflow-x: hidden;
}

/* header */
header {
  background-color: var(--bg);
}

.banner {
  position: absolute;
  top: 0;
  left: 4rem;
  font-family: "Courier New", Courier, monospace;
  color: var(--paper);
  margin: 0;
  text-shadow: 2px 2px var(--bg);
  font-size: 3vw;
}

.welcome {
  padding: 0 2rem;
  font-size: 1.1rem;
  border-bottom: 0;
  text-indent: 1rem;
  position: relative;
}

.flourish {
  text-align: center;
  word-spacing: 1rem;
  font-size: 2rem;
  margin: 1rem;
}

.phicon, .icon {
  height: 2rem;
  width: auto;
  fill: var(--title); 
}  

main {
  background-color: var(--paper);
  min-height: 50vmin;
}

article { 
  padding: 0.5rem 2rem;
}

h2, h3 {
    color: var(--title);
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
    text-decoration: none;
}

h2, h3 {
    color: var(--title);
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
    text-decoration: none;
}

h2 {
  border-bottom: 1px solid var(--comp);
  color: var(--title);
  text-indent: 2rem;
}

h3 {
  border-top: 1px solid var(--accent);
  margin: 0;
}

.page-title {
  text-indent: 2rem;
}

h3.updates {
  display: none;
}

.post-date {
  font-weight: bold;
  margin: 0;
}

.homepage {
  position: relative;
}

footer {
  padding-block: 2rem;
  text-align: center;
  color: var(--ink);
  border-top: 1px solid var(--comp);
}

a {
  color: var(--title);
}

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

figure img {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
  main {
  border-top: 1rem solid var(--bg);
  margin: 2rem;
  margin-top: 0;
  padding: 2rem;
}

header {
  padding: 1rem;
  margin: 0 1rem 0 1rem;
}
}

/* mobile layout */
@media screen and (max-width: 768px) {
  main {
    margin: 0 0.5rem 0 0.5rem;
    padding: 0.2rem;
    border: 0;
  }

  header {
    padding: 0;
    margin: 1rem 0 0 0;
  }
}

/* mobile layouts - phone */
@media screen and (max-width: 400px) {
  html {
    font-size: 10px;
  }
}