@import url('./reset.css');
@import url('./audio-player.css');

/* Loading color variables and fonts */

:root {
    --color-box: #f4f0e5;
    --color-box-hover: #e0dcd2;
    --color-text: #201107;
    --color-text-muted: #504945;
    --color-background01: #22162d;
    --color-wrapper01: #422c55;
    --color-background02: #12304c;
    --color-wrapper02: #1a4c7a;
    --color-background03: #631321;
    --color-wrapper03: #821126;
    --color-background04: #0a322f;
    --color-wrapper04: #0A544F;
    --color-background05: #bb7218;
    --color-wrapper05: #D4821E;
    --color-background06: #4d1232;
    --color-wrapper06: #ad2f45;
    --color-accent01: #0A544F;
    --color-accent02: #1a4c7a;
    --color-accent03: #B60E2D;
    --color-accent04: #D4821E;
    --color-accent05: #e64539;
    --color-accent01-muted: #0a3e3a;
    --color-accent02-muted: #153756;
    --color-accent03-muted: #8d1228;
    --color-accent04-muted: #bb7218;
}

@font-face {
  font-family: 'Panas Chill';
  src: url('/assets/fonts/PanasChill.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Grape Soda';
  src: url('/assets/fonts/GrapeSoda.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Smalle';
  src: url('/assets/fonts/smalle.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* Headings and body text */

body {
    font-family: "Panas Chill", sans-serif;
    font-size: 0.9rem;
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6, p, img, a, li, ul, blockquote {
   margin: 1.5rem;
}

h1 {
    font-family: "Grape Soda", sans-serif;
    font-size: 2.1rem;
    color: var(--color-text);
    margin: 2.2rem 1.5rem;
}

h2 {
    font-family: "Grape Soda", sans-serif;
    font-size: 1.8rem;
    color: var(--color-text);
    margin: 0.8rem 1.5rem;
}

h3 {
    font-family: "Panas Chill", sans-serif;
    font-size: 1.3rem;
    color: var(--color-text);
    margin: 0.8rem 1.5rem;
}

h4 {
    font-family: "Panas Chill", sans-serif;
    font-size: 1rem;
    color: var(--color-text);
    margin: 0.5rem 1.5rem;
}

h5 {
    font-family: "Panas Chill", sans-serif;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0.5rem;
}

h6 {
    font-family: "Smalle", sans-serif;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.5rem 1.5rem;
}

a {
    display: block;
}

blockquote {
    margin: 1.5rem 2.5rem;
}