@import url('./fonts.css');

:root {
  --font-pacifico: "Pacifico", cursive;
  --font-ubuntu-mono: "Ubuntu Mono", monospace;
  --font-space-mono: "Space Mono", monospace;

  --rose-pine--base-main: #191724;
  --rose-pine--base-moon: #232136;
  --rose-pine--base-dawn: #faf4ed;

  --rose-pine--overlay-moon: #393552;

  --rose-pine--muted-moon: #6e6a86;

  --rose-pine--subtle-moon: #908caa;

  --rose-pine--text-main: #e0def4;
  --rose-pine--text-moon: #e0def4;
  --rose-pine--text-dawn: #575279;

  --rose-pine--love-main: #eb6f92;
  --rose-pine--love-moon: #eb6f92;
  --rose-pine--love-dawn: #b4637a;

  --rose-pine--pine-moon: #3e8fb0;

  --rose-pine--gold-main: #f6c177;
  --rose-pine--gold-moon: #f6c177;
  --rose-pine--gold-dawn: #ea9d34;

  --rose-pine--foam-main: #9ccfd8;
  --rose-pine--foam-moon: #9ccfd8;
  --rose-pine--foam-dawn: #56949f;

  --rose-pine--iris-moon: #c4a7e7;
  --rose-pine--iris-dawn: #907aa9;
}

* {
  box-sizing: border-box;
}

::selection {
  color: var(--rose-pine--text-dawn);
  background: var(--rose-pine--pine-moon);
}

body {
  height: 100vh;

  display: flex;
  flex-direction: column;

  background: var(--rose-pine--base-main);

  position: relative;
}

li {
  list-style: none;
}

nav ul {
  padding: 0 40px;
}

nav ul li {
  padding: 0 4px;
}

nav ul li:hover {
  background: linear-gradient(
    to right, 
    var(--rose-pine--love-dawn),
    var(--rose-pine--love-moon),
    var(--rose-pine--gold-moon)
  );
}

nav ul li:hover a,
nav ul li:hover svg {
  color: var(--rose-pine--base-main);
}

nav ul li:hover .active {
  fill: var(--rose-pine--base-main);
}

nav ul li a {
  padding: 4px;
}

nav ul li svg {
  color: var(--rose-pine--love-main);
}

a {
  color: var(--rose-pine--love-moon);
  font-family: var(--font-ubuntu-mono);
  text-underline-offset: 4px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--rose-pine--gold-moon);
  font-family: var(--font-pacifico);
}

hr {
  color: var(--rose-pine--iris-moon);
  box-shadow: 0 0 10px 3px var(--rose-pine--iris-dawn);
}

p {
  color: var(--rose-pine--gold-dawn);
  font-family: var(--font-space-mono);
}

nav,
main,
footer,
hr {
  width: 920px;
  margin-inline: auto;
}

nav ul li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.active {
  fill: var(--rose-pine--love-main);
  transform: rotate(-90deg);
}

.footer-divider {
  margin-top: auto;
}

footer h4 {
  text-align: center;
}

.page-stats {
  padding: 4px 12px;
  
  border-radius: 6px;
  background: var(--rose-pine--foam-moon);
  box-shadow: 0 0 15px 5px var(--rose-pine--foam-dawn);
  
  position: fixed;
  right: 10px;
  top: 10px;
  
  transition: all 200ms ease;
}

.page-stats:hover {
  background: var(--rose-pine--foam-dawn);
}

.page-stats p {
  color: var(--rose-pine--base-main);
  font-size: 13px;
}

.page-stats p span,
.page-last-updated p span {
  font-weight: 700;
}

.page-last-updated {
  position: fixed;
  right: 10px;
  bottom: 10px;
}

.page-last-updated p {
  color: var(--rose-pine--foam-main);
  font-size: 12px;
}

.page-stats p,
.page-last-updated p {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 920px) {
  nav ul {
    padding: 0 16px;
  }

  h1 {
    font-size: 24px;
  }
  
  nav,
  main,
  footer,
  hr {
    padding: 0 12px;
    width: 100%;
  }

  p {
    font-size: 14px;
    text-align: justify;
  }

  .page-last-updated {
    display: none;
  }
}