:root {
    --font-family: 'bahnschrift';
    --font-weight: lighter;
    --font-color: rgba(0, 0, 0, 0.7);
    --box-shadow: 0px 3px 3px 0px rgb(80, 80, 80);
    --border-radius: 3px;
    --border-color: 1px solid rgb(0, 0, 0);
    --project-card-background-color:  white;
    --task-item-background-color:  white;
    --todo-item-background-color:  white;
}

body {
    padding: 0%;
    margin: 0%;
    font-size: small;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
}

input[type="radio"] {
    display: none;
}

.nav {
    position: fixed;
    background-color: white;
    place-self: start;
    line-height: 1.5;
    padding-left: 2rem;
    padding-top: 30px;
    max-width: 175px;
    overflow-y: auto;
    overflow-x: auto;/* Enables scrolling within nav if needed */
    z-index: 1000;
}

.raaz-logo{
    background-color: #707070;
    color: white;
    font-size: 2rem;
}

.design-logo{
    color: #707070;
    font-size: 2rem;
}

label {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: .8rem;
    text-align: left;
    display: block;
    margin: 5px 0 5px 0;
    font-size: large; 
}



.home-content-nav,
.projects-nav,
.store-nav,
.all-projects,
.furniture-projects,
.homes-projects,
.other-projects,
.instagram-nav,
.youtube-nav {
    margin: .1rem;
    cursor: pointer;
}

#projects-nav:checked ~ .nav .projects-nav,
#store-nav:checked ~ .nav .store-nav,
#all:checked ~ .all-projects,
#furniture:checked ~ .furniture-projects,
#homes:checked ~ .homes-projects,
#other:checked ~ .other-projects {
    font-weight: 600;
} 

 /* All content by default not on display unless nav is checked */
.home-content,
.projects-content,
.store-content,
.selected-nav-list {
    display: none;
}

.selected-content {
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;
    padding-left: 150px;
    padding-right: 150px;
    overflow-y: auto;
    height: 100%;
    min-height: 100vh;
    width: auto;
    max-width: 1500px;
}

/* when checked turn on associated display to flex */
#home-content-nav:checked ~ section .home-content,
#store-nav:checked ~ section .store-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}

#projects-nav:checked ~ section .projects-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Adjust the gap between images as needed */
}

.eleanor-content,
.pass-through-house-content,
.arcadia-content,
.haven-content,
.peak2-content,
.peak-content,
.darcy-content,
.wedge-content,
.desk-1629-content,
.maggie-content,
.taylor-street-content,
.penny-drive-content,
.booklighter-content,
.r-clamp-content,
.this-website-content,
.mindfulness-content,
.blue-belle-content {
    display: none;
}
/* when project cover image is checked turn on project page */

#eleanor:checked ~ section .eleanor-content,
#pass-through-house:checked ~ section .pass-through-house-content,
#eleanor:checked ~ section .eleanor-content,
#this-website:checked ~ section .this-website-content,
#mindfulness:checked ~ section .mindfulness-content,
#arcadia:checked ~ section .arcadia-content,
#darcy:checked ~ section .darcy-content,
#haven:checked ~ section .haven-content,
#peak2:checked ~ section .peak2-content,
#peak:checked ~ section .peak-content,
#wedge:checked ~ section .wedge-content,
#desk1629:checked ~ section .desk-1629-content,
#maggie:checked ~ section .maggie-content,
#taylor-street:checked ~ section .taylor-street-content, 
#penny-drive:checked ~ section .penny-drive-content,
#booklighter:checked ~ section .booklighter-content,
#r-clamp:checked ~ section .r-clamp-content,
#bluebelle:checked ~ section .blue-belle-content {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
    justify-content: center;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}

.about-text {
    font-size: large;
}

/* when projects radio is selected also turn on seleted nav list associated with projects */

/* #projects-nav:checked ~ .nav .selected-nav-list {
    display: block;
}

.selected-nav-list {
    margin-top: 2rem;
} */

.cover-image {
    overflow: hidden; /* Hide overflow to crop images */
    width: 100%;
    max-width: 450px;
    height: 300px; /* Set a fixed height for the cropping */
    border-radius: 25px;
    display: inline-block;
}

.cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fit the container */
}

.cover-image:hover {
    opacity: .5;
    cursor: pointer;
}

/* PROJECT STYLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.project-summary {
    width: 85%;
    line-height: 2;
    font-size: medium;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.project-image {
    overflow: hidden; /* Hide overflow to crop images */
    width: 100%;
    max-width: 450px;
    height: 300px; /* Set a fixed height for the cropping */
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fit the container */
} 

.project-image.enlarged {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-height: 95vh;
    max-width: 95vw;
    z-index: 1000;
}

.project-image.enlarged img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 20px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.project-image:hover {
    box-shadow: var(--box-shadow);
}

/* Website Project Styles XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.example-display-container {
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    border-radius: 20px;
    padding: 20px;
}

.one-nav,
.two-nav,
.three-nav {
    cursor: pointer;
    font-size: medium;
}

#one:checked ~ .example-display-container .example-menu .one-nav,
#two:checked ~ .example-display-container .example-menu .two-nav,
#three:checked ~ .example-display-container .example-menu .three-nav {
    font-weight: 600;
}

.example-one-content,
.example-two-content,
.example-three-content {
    display: none;
}

#one:checked ~ .example-display-container .example-content .example-one-content,
#two:checked ~ .example-display-container .example-content .example-two-content,
#three:checked ~ .example-display-container .example-content .example-three-content {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 30px;
    font-size: large;
}

/* STORE STYLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.store-summary {
    width: 60%;
    margin: 15px auto;
    padding: 25px;
    font-size: medium;
    line-height: 1.5;
}
.store-item {
    background-color: #cfcfcf;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 60%;
    margin: 15px auto;
    padding: 25px;
    border: var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.store-item-image { 
    background-color: white;
    flex: 1;
    display: block;
    max-height: 250px;
    height: auto;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    border: var(--border-color);
    border-radius: var(--border-radius);
}

.item-description {
    flex: 2;
    display: block;
    margin: 5px;
    padding: 5px;
}

.item-checkbox {
    transform: scale(2);
    margin: 15px;
}

#download-selected-button {
    position: fixed;
    bottom: 50px;
    right: 50px;
    background-color: #2e6762; /* Green background */
    color: white; /* White text */
    padding: 15px 25px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

#download-selected-button:hover {
    background-color: #a8a8a8; 
}

/* General Items XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.emphasis {
    font-weight: 600;
}

.link {
    text-decoration: underline;
}

a {
    text-decoration: none;
    color: inherit;
}

footer {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

input[type="checkbox"] {
    transform: scale(1.1);
    cursor: pointer;
}

/* Responsive Styles XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media (max-width: 30000px) {
    .nav {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Horizontally center the content */
        align-items: center; /* Vertically center the content */
        text-align: center;
        width: 100%;
        max-width: 30000px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        padding-left: 0;
    }

    .sub-nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .projects-nav,
    .store-nav,
    .instagram-nav,
    .youtube-nav {
        margin: 7px;
    }

    .about-text {
        font-size: medium;
    }

    .selected-content {
        padding-top: 200px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
}