/* ALL OF IT */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Playfair Display", serif;
    background-color: #f8f5ec;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
}

/* HOME PAGE PRIMARILY & ALL PAGES */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f8f5ec;
}

/* all nav stuff*/
.home-button {
    color: #333;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}
.nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}
.nav a {
    text-decoration: none;
    color: #333;
    font-weight: 400;
}
.nav a.active {
    font-weight: 900;
}
/* intro section */
/* home page */
.intro {
    display: flex;
    width: 100%;
    margin: 0;
    align-items: flex-end;
    padding: 40px;
    background-color: #f8f5ec;
}
.intro-image {
    width: 50%;
    border-radius: 10px;
    margin-right: 40px;
}
.intro-text {
    max-width: 50%;
}
.intro-text h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.intro-text p {
    font-size: 1rem;
}
/* the bulk of the text */
.text {
    flex: 1;
    font-size: 1rem;
}
.cuerpo {
    display: flex;
    gap: 20px;
    align-items: center;
}
/*photos*/
.image {
    flex: 1;
    position: relative;
}
.image img {
    width: 100%;
    border-radius: 10px;
}

/* broken down as a dif section of text on basics/global/design pg */
.last-last { 
    display: flex;
    gap: 20px;
    padding: 40px;
}
.columna {
    flex: 1;
    font-size: 1rem;
}
/*only home page*/
.spine { 
    background-color: #e4d6c5; 
    padding: 50px 20px;
    width: 100%;
    margin: 0;
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: left; 
}
.spine-content { 
    max-width: 800px; 
}
.spine h2, .all h2 {
    font-size: 2rem;
    margin-bottom: 30px;
}
/*numbers corresponding to ip -- might not need this version */
.IPnumber {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 20px;
}
.IPtext h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.IPtext p {
    max-width: 500px;
}
.IP { /*the paaaaaiiinful black lines*/
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-top: 30px;
    padding-bottom: 15px; /* Space between content and the line */
    border-bottom: 1px solid #000; /* Thin black line im workin with*/
}
.IP:last-child {
    border-bottom: none; /* Removin the line after last bit of text */
}
/*all footer stuff*/
.footer {
    background-color: #f8f5ec;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
}
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.footer-info p { /*should fix formatting bs */
    margin: 5px 0;
}
.footer a {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
}

/*reorganized for final to make responsive design easy on myself 
-- double check to make sure nothin got fucked up*/

/* BASICS PAGE */
.basics .header {
    background-color: #dec2a2;
}
.basics .intro {
    background-color: #dec2a2; 
    padding-bottom: 80px;
}
.basics .text {
    flex: 0.5;
    font-size: 1rem;
}
.basics .footer {
    background-color:  #dec2a2;
 }
 .basics .theGoods {
    padding-top: 0px; 
    padding-bottom: 50px;
    margin: 60px;
    font-size: 1rem;
}

.basics .listSection { /* this grouping only used on basics and global*/
    /*border-top: 1px solid #000; */
    padding-top: 0px; 
    margin-top: 0px; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}
.basics .listSection ul {
    border-bottom: 1px solid #000; 
    padding-bottom: 10px; 
    margin-bottom: 20px;
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}
/*last section*/
.basics .last-last {
    /*border-bottom: 1px solid #000; */
    padding-bottom: 0px; 
    margin-bottom: 0px; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* GLOBAL PAGE */
.global .header {
    background-color: #dec2a2;
}
.global .intro {
    background-color: #dec2a2; 
    padding-bottom: 80px;
}
.global .text {
    flex: 0.5;
    font-size: 1rem;
}

/*NOTE: green-section not modified on its own so 
it should be chill to have above original green 
section from design page *double check */

/* callout -- green section */
.global .verde {
    background-color: #4b6b48;
    color: white;
    padding: 40px;
    text-align: left;
}
.global .image-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}
.global .image-row img {
    width: 35%;
    border-radius: 10px;
}
.global .verde p {
    max-width: 800px;
    margin: 0 auto;
}
.global .theGoods {
    padding-top: 0px; 
    padding-bottom: 50px;
    margin: 0px;
    font-size: 1rem;
}

.global .listSection {
    /*border-top: 1px solid #000; */
    padding-top: 60px;
    margin-top: 0px; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}
.global .listSection ul {
    padding-bottom: 0px; 
    margin-bottom: 20px; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto;
}
.global .last-last {
   /* border-bottom: 1px solid #000; */
    padding-top: 60px;
    padding-bottom: 30px; 
    margin-bottom: 0px; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
}
.global .footer {
    background-color:  #dec2a2;
}

/* CHALLENGES PAGE */
.challenges .header {
    background-color: #dec2a2;
}
.challenges .intro {
    background-color: #f8f5ec; 
    padding-bottom: 80px;
}
.challenges .footer {
    background-color:  #dec2a2;
 }

/* DESIGN PAGE */
.design .header {
    background-color: #dec2a2;
}
.design .intro {
    background-color: #dec2a2; 
    padding-bottom: 80px;
}
.design .text {
    flex: 0.5;
    font-size: 1rem;
}
.design .verde {
    background-color: #4b6b48;
    color: white;
    padding: 40px;
    text-align: left;
}
/* callout -- green section */
.design  .image-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}
.design .image-row img {
    width: 35%;
    border-radius: 10px;
}
.design .verde p {
    max-width: 800px;
    margin: 0 auto;
}
.design .theGoods { /* double check placement of this */
    padding-top: 50px; 
    padding-bottom: 50px;
    margin: 40px;
}
/*last section*/
.design .last-last {
    /* border-bottom: 1px solid #000; */
     padding-top: 60px;
     padding-bottom: 60px; 
     margin-bottom: 0px; 
     max-width: 1200px; 
     margin-left: auto; 
     margin-right: auto; 
 }
/*small singular fix*/
#solar-panel-image {
    max-width: 75%;
    height: auto;
}
.design .footer {
    background-color:  #dec2a2;
}

/* IMPLICATIONS PAGE */
.implications .header {
    background-color: #dec2a2;
}
.implications .intro {
    background-color: #dec2a2; 
    padding-bottom: 80px;
}
.implications .text {
    flex: 0.5;
    font-size: 1rem;
}
.implications .theGoods { 
    padding-top: 50px; 
    padding-bottom: 50px;
    margin: 40px;
}
.implications .footer {
    background-color:  #dec2a2;
 }
/*small singular fix*/
#affordable {
    max-width: 100%;
    height: auto;
}

/* MEDIA QUERIES */
/* ipad mini (768px + below) */
@media (max-width: 912px) {
    .header {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        text-align: center; 
    }
    .nav ul {
        flex-direction: column;
        gap: 10px;
    }
    .intro {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .intro-image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .intro-text h1 {
        font-size: 1.8rem;
    }
    .intro-text {
        max-width: 100%;
        width: 100%;
        text-align: center;
        padding: 0 10px; 
    }
    .intro-text p {
        font-size: 1rem;
        align-items: center;
        text-align: left;
    }
    .cuerpo {
        flex-direction: column;
        gap: 20px;
        padding: 0 10px;
    }
    .text {
        flex: 1;
        font-size: 0.9rem;
    }
    .image img {
        width: 100%;
        max-width: none;
    }
    #solar-panel-image {
        max-width: 100%;
    }
    .global .listSection {
        padding: 60px 40px 0;
    }
    .verde p {
        text-align: left;
        padding: 10px;
    }
    .footer {
        font-size: 0.9rem;
        padding: 10px;
    }
}

/* iphone xr (480px + below) */
@media (max-width: 480px) {
    .header {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        text-align: center; 
    }
    .nav ul {
        flex-direction: column;
        gap: 5px;
    }
    .intro {
        padding: 10px;
    }
    .intro-image {
        width: 100%;
    }
    .intro-text h1 {
        font-size: 1.5rem; 
    }
    .intro-text {
        max-width: 100%;
        width: 100%;
        text-align: center; 
        font-size: 0.9rem;
        padding: 0 10px; 
    }
    .intro-text p {
        font-size: 0.9rem;
        align-items: center;
        text-align: left; 
    }
    .cuerpo {
        flex-direction: column;
        gap: 10px;
    }
    .text {
        font-size: 0.8rem;
        padding: 0 10px;
    }
    .image img {
        width: 100%;
        max-width: none;
    }
    #solar-panel-image {
        max-width: 100%;
    }
    /* fixed global page problem here*/
    .global .listSection {
        padding: 60px 40px 0;
    }
    /* to stack the boxes since they so long */
    .last-last {
        flex-direction: column; 
    }
    .last-last .columna {
        width: 100%; 
    }
    .basics .last-last {
        width: 100%;
        padding: 0; 
        margin: 0; 
        box-sizing: border-box; 
    }
    .basics .last-last .columna {
        width: 100%; 
        margin: 0; 
    }
    .footer {
        font-size: 0.8rem;
        padding: 10px;
    }
    /* hide images */
    .design .verde img, .global .verde img {
        display: none; 
    }
}