/* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark */

/* Root selector for defining global CSS variables */
:root {
    --color-dark: #333;  /* Dark color for text in light mode, background in dark mode */
    --color-light: #fff; /* Light color for background in light mode, text in dark mode */
    --color-text: light-dark(var(--color-dark), var(--color-light));
    --color-bg: light-dark(var(--color-light), var(--color-dark));
    --color-mode: light-dark(white, black);

    color-scheme: light dark;
}

/* Base styles for the body */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

/* Container for centering content */
.container {
    container-name: mainContainer;
    text-align: center;
}

/* Heading styles */
h1 {
    margin-bottom: 20px;
}

/* Styles for dark mode */
.dark-mode {
    color-scheme: dark;
}

/* Styles for light mode */
.light-mode {
    color-scheme: light;
}

/* Styles for the toggle container */
.toggle-container {
    cursor: pointer;
}

/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
    width: 24px;
    height: 24px;
}

.light-mode .sun-icon {
    display: inline-block;
}
.light-mode .moon-icon {
    display: none;
}
.light-mode .codeberg {
    background-image: url('images/codeberg-logo_icon_blue.svg');
}

.dark-mode .sun-icon {
    display: none;
}
.dark-mode .moon-icon {
    display: inline-block;
}
.dark-mode .codeberg {
    background-image: url('images/codeberg-logo_icon_white.svg');
}

@media (prefers-color-scheme: light) {
    .default-mode .sun-icon {
        display: inline-block;
    }
    .default-mode .moon-icon {
        display: none;
    }
    .default-mode .codeberg {
        background-image: url('images/codeberg-logo_icon_blue.svg');
    }
}

@media (prefers-color-scheme: dark) {
    .default-mode .sun-icon {
        display: none;
    }
    .default-mode .moon-icon {
        display: inline-block;
    }
    .default-mode .codeberg {
        background-image: url('images/codeberg-logo_icon_white.svg');
    }
}

.codeberg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 15%;
}

.icon {
    background-image: url('images/adevium.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}