/* the styles for the elements */
:root {
    color-scheme: light dark;
    /* --light-scheme: oklch(100% 0 0); */
    /* --dark-scheme: oklch(0% 0 0); */
    /* --background: light-dark(var(--light-scheme), var(--dark-scheme)); */
    /* --text: light-dark(var(--dark-scheme), var(--light-scheme)); */
    --bg-color: light-dark(#b3cde0, #011f4b);
    --text-color: light-dark(black, white);
    --backdrop-color: light-dark(#b3c0e0, #03396c);
    --border: 3px solid light-dark(#011f4b, #b3cde0);
    --border-radius: 0.75rem;
    --accent-color: light-dark(#ffffff, #1a1a1a);
    --link-color: light-dark(#011f4b, #b3cde0);
    margin: 0;
    padding: 0;
}
body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    background-color: var(--bg-color);
    background-image: url("../images/stardust.png");
}
a:focus, a:hover {
	font-style: italic;
	transition: 1.5s ease;
	box-shadow: inset 200em 0 0 0 #315488;
}
a:link {
	color: var(--link-color);
	font-weight: bold;
}
p {
    line-height: 1.5;
}
/* the styles for the main content */
main {
    background-color: var(--backdrop-color);
    width: 900px;
    max-width: 90%;
    margin: 1.5rem auto;
    min-height: 67dvh;
    display: flex;
    align-items: center;
    border: var(--border);
}
/* the styles for the section */
section {
    padding: 0 1rem;
    color: var(--text-color);
}
section li {
    padding: 0 0 1rem 0;
    line-height: 1.3;
}
h1, h2 {
    text-align: center;
}
.button {
    background-color: #1c87c9;
    font-size: 2rem;
    margin-top: 1rem;
    padding: 1.3rem 0;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 12px;
    cursor: pointer;
}
.theme-switcher {
    padding: 0.8rem 1.15rem;
    border: none;
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s;
}
.theme-switcher:hover {
    transform: scale(1.05);
}