/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bg-color: #faeee7;
  --pink-1: #ff8ba7;
  --pink-2: #ffc6c7;
  --black-1: #33272a;
  --black-2: #594a4e;
  --green-1: #c3f0ca;
  --white: #fffffe;
}

* {
  box-sizing: border-box;
}

body {
  --wrapper-width: 720px;
  --navbar-height: 50px;

  background-color: var(--bg-color);
  line-height: normal;
  font-family: "Noto Sans", sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a {
  color: var(--pink-1);
  text-decoration: none;
  font-weight: 500;

  &:hover {
    text-decoration: underline;
  }
}

.wrapper {
  max-width: var(--wrapper-width);
  margin: 0 auto;
}

main {
  padding-top: var(--navbar-height);
  padding-left: 16px;
  padding-right: 16px;
}

p {
  color: var(--black-2);
}

.hidden {
  display: none;
}