/*
 * File: moonbook_main.css
 * Version: 1.0
 */

:root {
    /* Colors */
    --bg-color: #1a1a1a;
    --text-color-light: #f0f0f0;
    --text-color-dark: #333;
    --card-bg-color: #2c2c2c;
    --border-color: #444;
    --header-bg-color: #333;
    --button-bg-color: #444;
    --today-bg-color: #e08d69;
    --selected-bg-color: #aa33aa;
    --glow-color: #aaccff;

    /* Layout */
    --clock-size: 700px;
    --max-width: 1300px;
    --content-max-width: 800px;
    --border-radius: 8px;

    /* Radii for Clock Elements */
    --hour-marker-radius: 156px;
    /*
    --phase-marker-radius: 250px;
    */
    --central-display-size: 280px;

  /* ... your other variables ... */
    --hour-marker-radius: 156px;
    --hour-line-text-radius: -180px; /* <-- ADD THIS LINE */
    --phase-marker-radius: 420px;

  /* ... your other variables ... */
    --clockhour-marker-radius: 156px;
    --clockhour-line-text-radius: -130px; /* <-- ADD THIS LINE */

    --month-marker-radius: 356px;
    --month-line-text-radius: -20px; /* <-- ADD THIS LINE */

    --moons13-marker-radius: 340px;

    --moons13-line-text-radius: -390px; /* <-- ADD THIS LINE */

    --moons13-phase-icon-radius: -360px; /* <-- ADD THIS LINE */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: "Gadugi", sans-serif;
    color: var(--text-color-light);
    background-color: var(--bg-color);
    background-image: url('../moons/moonbook100_3259.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0;
}

#moonbook-app {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px;
}