* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    overflow-x: hidden;
}

:root {
    /* Neutral */

    --dark-navy: hsl(227, 75%, 14%);
    --navy: hsl(226, 25%, 17%);
    --dark-grayish-blue: hsl(225, 23%, 24%);
    --grayish-blue: hsl(226, 11%, 37%);
    --light-gray: hsl(0, 0%, 78%);
    --light-blue: hsl(217, 61%, 90%);
    --off-white: hsl(0, 0%, 93%);
    --white: hsl(200, 60%, 99%);

    /* Red */

    --red-400: hsl(3, 86%, 64%);
    --red-500: hsl(3, 71%, 56%);
    --red-700: hsl(3, 77%, 44%);

    /* Gradient */

    --light-gradient: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
    --dark-gradient: linear-gradient(180deg, #040918 0%, #091540 100%);

    /* Font size */

    --paragraph-fnt-size: 16px;
}

button {
    border: none;
    background-color: unset;
}

li {
    list-style: none;
}

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

p {
    font-size: var(--paragraph-fnt-size);
}

body {
    /* Default background color for light mode */
    min-height: 100vh;
    background-color: var(--light-blue);
    color: var(--dark-navy);
    transition: background-color 0.4s ease, color 0.4s ease;
    transition: background-color 0.4s, color 0.3s;
}

.sun-icon {
    display: none;
}

.dark-mode {
    /* General styles */
    background: var(--dark-gradient);
    color: var(--white); /* Default text color for all elements */
    transition: background-color 0.4s ease, color 0.4s ease; /* Smooth transition */
}

.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode a,
.dark-mode li,
.dark-mode span,
.dark-mode button {
    color: inherit; /* Inherit the default color from .dark-mode */
}

.dark-mode .nav-link li,
.dark-mode .header {
    background-color: var(
        --navy
    ); /* Ensure nav-link items and header have a dark background */
    color: var(--white); /* Explicitly set text color */
}

.dark-mode .sun-icon {
    display: inline-block; /* Show sun icon in dark mode */
}

.dark-mode .moon-icon {
    display: none; /* Hide moon icon in dark mode */
}

.dark-mode .extension-card {
    border: 1px solid hsla(0, 0%, 100%, 0.137);
    background-color: var(--navy);
}

.dark-mode .remove-btn {
    border: 1px solid hsla(0, 0%, 100%, 0.137);
    background-color: var(--navy);
}

.dark-mode .theme {
    background-color: var(--navy);

    &:hover {
        background-color: var(--dark-navy);
    }
}

.dark-mode .attribution a {
    color: var(--grayish-blue);
}

.header {
    background-color: var(--white);
    display: flex;
    padding: 0.5rem 1rem;
    margin: 1rem;
    border-radius: 1rem;
}

.theme {
    background-color: var(--off-white);
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    margin-left: auto;
    transition: all 0.3s;

    &:hover {
        cursor: pointer;
        background-color: hsl(0, 5%, 87%);
    }
}

.extension-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-link {
    padding: 1rem;
    display: flex;
    gap: 20px;
}

.nav-link li {
    /* background-color: var(--white); */
    /* padding: 0.5rem 0.8rem; */
    border-radius: 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.nav-link li button {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    text-align: center;
    transition: 0.3s;

    &:hover {
        background-color: var(--red-500);
        cursor: pointer;
    }
}

main {
    display: flex;
    justify-content: center;
}

.extension-card-area {
    display: grid;
    align-items: stretch;
    gap: 20px;
    padding: 1rem;
    max-width: 1590px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
}

.extension-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: var(--white);
    padding: 0.8rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.extension-logo {
    display: flex;
    align-items: flex-start;
}

.extension-logo img {
    min-width: 100%;
}

.extension-content {
    display: flex;
    gap: 10px;
}

.extension-details {
    width: 100%;
}

.btn-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto; /* Ensures the button area aligns at the bottom of the card */
}

.remove-btn {
    padding: 0.4rem 0.6rem;
    border-radius: 1rem;
    font-weight: 500;
    border: 1px solid #3333333d;
    transition: background-color 0.3s ease;

    &:hover {
        cursor: pointer;
        color: var(--white);
        background-color: var(--red-500);
    }
}

/* styling for toggle button */

.checkbox-apple {
    position: relative;
    width: 50px;
    height: 25px;
    margin: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-apple label {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 25px;
    border-radius: 50px;
    background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-apple label:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.checkbox-apple input[type='checkbox'] {
    appearance: none; /* Removes the default checkbox appearance */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    width: 50px; /* Matches the label width */
    height: 25px; /* Matches the label height */
    margin: 0; /* Removes any default margin */
    position: absolute; /* Ensures it doesn't interfere visually */
    top: 0;
    left: 0;
    z-index: 1; /* Keeps it above the label for interaction */
    cursor: pointer; /* Ensures it remains clickable */
    opacity: 0; /* Makes it invisible */
}

.checkbox-apple input[type='checkbox']:checked + label {
    background: var(--red-500);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.checkbox-apple input[type='checkbox']:checked + label:after {
    transform: translateX(25px);
}

.checkbox-apple label:hover {
    background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
}

.checkbox-apple label:hover:after {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yep {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 25px;
}

.attribution {
    text-align: center;
    margin: 2rem;
}

.attribution a {
    font-weight: 700;
    color: var(--navy);
}