/*
 * 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.
 */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Serif+JP&display=swap");

/* Layout */
@import url("/assets/layout/layout-2f81aa98.css");
@import url("/assets/layout/nav-7557b3cb.css");
@import url("/assets/layout/footer-1ca7460b.css");
@import url("/assets/layout/site_gate-71873348.css");

:root {
  /* Fonts */
  --standard-font-family: "Noto Serif JP", serif;
  --ld-font-family: "Great Vibes", cursive;

  /* Layout */
  --max-content-width: 1200px;
  --max-post-width: 750px;
  --nav-height: 64px;
  --nav-z-index: 2000;
  --layout-horizontal-padding: 10px;

  /* Breakpoints */
  /* NOTE: This value is hardcoded in a few places. If updating this, update it everywhere */
  --breakpoints-medium: 640px;
  --breakpoints-large: 1024px;

  /* Colors */
  --standard-white: #f5f5f5;
  --standard-white--variant-1: #eeecec;
  --standard-white--variant-2: #fcfcfc;
  --standard-black-font: #000;
  --standard-grey: rgb(230, 228, 228);
  --standard-grey-font: rgb(97, 94, 94);
  --standard-green-font: #9caf88;
  --standard-green-font-variant--1: rgb(110, 138, 80);
  --standard-green-font-variant--2: rgba(156, 175, 136, 0.3);
  --standard-red-font: #cc5656;
}

body {
  margin: 0px;
  font-family: var(--standard-font-family);
  background-color: var(--standard-white--variant-2);
}

* {
  box-sizing: border-box;
  color: var(--standard-black-font);
}

*:focus {
  outline: 1px solid var(--standard-green-font);
}

@media (min-width: 640px) {
  :root {
    --layout-horizontal-padding: 15px;
  }
}