@import "./catppuccin.css";

*,
::before,
::after {
  transition: all 0.5s ease-out;
}

:root {
  color-scheme: dark light;
}

body {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  font-family: "JetBrainsMono NFM", monospace, sans-serif;
}

header {
  h1 {
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 0;
  }
  p[role="subtitle"] {
    font-size: 1em;
    font-weight: 300;
    margin-top: 0;
  }
}

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  justify-items: stretch;
  gap: 1em;
  #noscript,
  #days,
  #hours,
  #minutes,
  #seconds {
    display: block;
    padding: 1em;
    border-radius: 1em;
    color: var(--ctp-crust);
  }
  #noscript {
    background-color: var(--ctp-red);
    flex: 1 1 100%;
  }
  #days {
    background-color: var(--ctp-blue);
    &::after {
      content: " day(s)";
    }
  }
  #hours {
    background-color: var(--ctp-green);
    &::after {
      content: " hour(s)";
    }
  }
  #minutes {
    background-color: var(--ctp-yellow);
    &::after {
      content: " minute(s)";
    }
  }
  #seconds {
    background-color: var(--ctp-red);
    &::after {
      content: " second(s)";
    }
  }
}

footer {
  font-size: 0.9em;
  font-weight: 200;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light dark;
  }
}