/* I AM THE ONE! (I am the one, I am the one) */
/* forcequitOS to be exactly. I was here */

/* Variables for light mode colors */
:root {
    color-scheme: light dark;
    --width: 100vw;
    --height: 100vh;
    --background-image: url('Sources/Backgrounds/SequoiaLight.webp'); /* Updated to .webp format */
    --text-color: #000000;
    --tab-bar-background: #0fb515;
    --link-color: #d43267;
    --tab-bar-link: #d43267;
    --nav-opacity: 0.7; /* Adjust opacity for light mode */
}

/* Variables for dark mode colors */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light dark;
        --background-image: url('Sources/Backgrounds/SequoiaDark.webp'); /* Updated to .webp format */
        --text-color: #ffffff;
        --tab-bar-background: #006b04;
        --link-color: #8ee9e0;
        --tab-bar-link: #8ee9e0;
        --nav-opacity: 0.5; /* Adjust opacity for dark mode */
    }
}

/* Misc styles for all elements */
ul {
    list-style-type: none;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: var(--background-image);
    background-size: 100% 200%;
    color: var(--text-color);
    border-radius: 5px;
    text-align: left;
    border: 25px solid transparent;
}

h1, h2, h3, h4 {
    color: var(--text-color);
}

ol {
    list-style-position: outside; /* Keep numbers outside the list items */
    text-align: left; /* Align the text */
    display: flex; /* Use flexbox to center the content */
    justify-content: center; /* Center horizontally */
    flex-wrap: wrap; /* Allow items to wrap if needed */
}

li {
    text-align: left; /* Align list items text to the left */
    margin-right: 30px; /* Add spacing between items */
}

a:link {
    color: var(--link-color);
    text-decoration: none;
}

a:visited {
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
}

/* Navigation bar desktop code */
nav {
    position: fixed; /* Keep the navbar at the top */
    top: 0; /* Align to the top of the screen */
    left: 0; /* Start from the left edge */
    width: 100%; /* Span the entire width of the screen */
    z-index: 10; /* Stay above other content */
    background-color: rgba(169, 169, 169, var(--nav-opacity)); /* Grey background with opacity */
    color: var(--tab-bar-link); /* Text color */
    padding: 12px; /* Add padding */
    backdrop-filter: blur(10px); /* Optional blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support for blur */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Subtle bottom border */
    text-align: center; /* Center-align links */
}

nav a {
    display: inline-block; /* Arrange links inline */
    color: var(--tab-bar-link);
    padding: 8px 16px; /* Adjust padding for links */
    text-decoration: none;
    border-radius: 8px; /* Optional rounded corners */
    transition: background-color 0.125s; /* Smooth hover transition */
}

nav a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Subtle hover background */
    text-decoration: none;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 650px) {
    nav {
        font-size: 16px; /* Smaller text for mobile */
        padding: 10px 0; /* Adjust padding */
    }

    nav a {
        padding: 8px 12px; /* Adjust padding for smaller screens */
    }
}

/* Light mode for mobile */
@media (prefers-color-scheme: light) and (max-width: 650px) {
    body {
        --background-image: url('Sources/Backgrounds/SequoiaLight.webp');
        --text-color: #ffffff;
        --tab-bar-background: #0fb515;
        --link-color: #d43267;
        --tab-bar-link: #d43267;
        --nav-opacity: 0.7;
    }
}

/* Dark mode for mobile */
@media (prefers-color-scheme: dark) and (max-width: 650px) {
    body {
        --background-image: url('Sources/Backgrounds/SequoiaDark.webp');
        --text-color: #ffffff;
        --tab-bar-background: #0fb515;
        --link-color: #8ee9e0;
        --tab-bar-link: #8ee9e0;
        --nav-opacity: 0.5;
    }
}
/* General image styling for all images */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-specific adjustments for smaller images */
@media (max-width: 600px) {
    /* Scale down social media icons and small images */
    .headerlink img, main img {
        width: 15px; /* Adjust this value as needed */
        height: 15px;
    }

    /* Ensure device images stay at their native resolution */
    .device-img {
        width: auto !important; /* Enforce the native resolution */
        height: auto !important;
    }
}