/* STYLING SETTINGS FOR ALL PAGES - ACCENT COLOURS, ETC */

:root {
    --accent-colour: #ff55ff;
    --subtle-accent-colour: rgba(255, 221, 255, 0.5);
    --not-so-subtle-accent-colour: rgba(255, 211, 255, 0.8);
    --background-colour: #eee;

    --text-colour: #333;
    --text-colour-secondary: #555;
    --text-colour-placeholder: #999;

    --border-colour: rgba(230, 230, 230, 0.25);

    --button-background-colour: rgba(200, 200, 200, 0.2);
    --button-background-colour-hover: rgba(255, 255, 255, 0.4);
    --button-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    --button-border-radius: 12px;

    --background-image: url('https://machteld.online/publicassets/backgrounds/sunflowers2.webp');

    --frame-border-radius: 16px;
    --frame-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    --frame-backdrop: blur(10px);

    transition: all 0.2s ease;

}

/* DEFAULT TEXT STYLES */

h1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5rem;

    color: var(--text-colour);

    margin: 10px;
}

h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;

    color: var(--text-colour-secondary);
    
    margin: 10px;
}

p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;

    color: var(--text-colour);

    margin: 10px;
}

/* DIVIDER STYLE */

hr {
    width: 90%;
    height: 1px;

    background-color: var(--border-colour);

    margin-left: 5%;
    margin-right: 5%;
    
    border: 0;
    outline: 0;

    border-radius: var(--button-border-radius);
}

/* CSS SCROLLBAR STYLING */

:root {
  --scroll-thumb: rgba(255,255,255,0.3);
  --scroll-track: transparent;
  --scroll-radius: 999px;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scroll-behavior: smooth;
}

*::-webkit-scrollbar {
  width: 3px;
  background: var(--scroll-track);
  z-index: 3;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  z-index: 3;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: 0;
  z-index: 3;
}
*::-webkit-scrollbar-corner {
  background: transparent;
  z-index: 3;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}