body {
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: map-get($background-color, primary2);

    p {
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        color: map-get($text-color, primary);
    }
}

//this is styling for the strong tag in html
strong {
    font-weight: map-get($font-weights, semi-bold);
}


#southern-front {
    padding-top: 0px;
    padding-left: 26%; //changed from 16%
    padding-right: 22%; //changed from 16%
    padding-bottom: 100px;
}

//code for the image at the top
.main-top-header{
    // justify-content: center;
    // align-items: flex-end;
    display: flex;
    position: relative;
    margin-bottom: 60px;
    // width: 100vh;
    background-color: #d2bfc1;
    

    img {
        // width: 100%;
        width: 80%;
        // height: auto;
        height: 660px;
        image-rendering: auto;
        margin: 0 9.5%;
    }
} 

//code for the highlight on scroll effect
mark.scroll-highlight-sf{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: linear-gradient(#e1c4d6,#e1c4d6);

    animation: mark-it linear;
    animation-fill-mode: forwards;
    animation-timeline: view();
    animation-iteration-count: 1;
    animation-range: contain 0% contain 55%;
}

@keyframes mark-it {
    0% {
        background-size: 0 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}


// new code for the project sections
#prj-summary, #prj-research, #prj-ideate, #prj-conclusion {
    height: auto;
    // width: 100vw;
    margin: 5% 20%;
    // margin-right: 25%;
    // margin: 100px 200px;
    padding: 0 50px;
    // background-color: #bfa5ac0e;  
}

.prj-summary-heading{
    h2 {
        font-size: 30px;
        // font-weight: 800;
        // font-style: bold;
        color: map-get($text-color, primary);
    }
}

.prj-summary-role {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 2px solid #100303;
    border-bottom: 2px solid #100303;
    margin-top: 50px;

    .role, .project, .timeline, .tools {
        border-right: 1px solid #100303;
        padding: 10px 10px;
    }
    .role {
        border-left: 1px solid #100303;
    }
}

.prj-design-process {
    margin-top: 50px;

    img{
        width: 50vw;
        padding: 40px 0;
        padding-left: -5%;
    }
}

//new code for the project imagery section
#prj-imagery{
    height: auto;
    padding: 50px 100px;
    padding-bottom: 0;
    background-color: #bfa5ac0e;  
}

.image-group-r {
    display: grid;
    position: relative;
    column-gap: 60px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 60vw;
    padding-left: 20%;
    padding-top: 40px;
    padding-bottom: 60px;
    margin-bottom: 100px; //100px
    justify-items: end;
}

.image-group-l{
    display: grid;
    position: relative;
    column-gap: 60px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 60vw;
    padding-left: 20%;
    padding-bottom: 60px;
    margin-bottom: 100px;
    justify-items: start;
    
}

.image-group-r-text, .image-group-l-text{
    p {
        width: 100%;
        margin-top: 10px;
        font-family: $primary-font;
        font-style: normal;
        // font-weight: map-get($font-weights, regular);
        // font-size: 18px;
        font-weight: 350;  //*added this font weight *
    }
}
.image-group-r-img{
    img {
        width: 30vw;
    }
}
.image-group-l-img {
    // width: 100%;
    img {
        width: 34vw;
    }
}

//code for the resesrch documentation
#prj-research {
    height: auto;
    margin: 5% 20%;
    padding: 0 50px;
}

.prj-section-heading-main {
    margin-bottom: 40px;
    h3 {
        font-size: 28px;
        color: map-get($text-color, primary);
        font-family: $secondary-font;
        letter-spacing: 0.2px;
        line-height: 40px;
        font-weight: map-get($font-weights, semi-bold);
        // text-align: center; 
        
    }
    hr {
        margin-top: 5px;
        margin-bottom: 15px;
        // this code centers the hr element
        // width: 90px;
        // margin: 0 44.5%;
        // height: 1.2px;
        color: map-get($background-color, secondary);
        background-color: map-get($background-color, secondary);
    }
}

.prj-research-body, .prj-ideate-body {
    p {
        padding-bottom: 16px;
    };
    ul {
        font-size: 16px;
        font-style: normal;
        color: map-get($text-color, primary);
        padding-left: 8%;
        // padding-top: 2%;
        list-style-type: square;
    }
    li {
        margin-left: 2%;
    }
}

p.last-paragraph {
    padding-bottom: 0;
}

//for all the illustrative images
.prj-illustration {
    // padding-top: 3%;
    padding-bottom: 6%;
    text-align: center;

    img {
        max-width: 55vw;
    }
    figcaption {
        font-size: 12px;
        font-style: italic;
        color: #100303;
    }
}


.video-interactive-prototype{
    padding-top: 2%;
    padding-bottom: 50px;
    padding-left: 10.5%;
    video {
        border-top: 3px solid#000; 
        border-bottom: 3px solid#000; 
        max-height: 500px; 
        max-width: 800px;  
    }
}


//make page responive
/* Styles for tablets (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    #sf-product {
        margin-bottom: -30%;
    }
    // body {
    //   font-size: 16px; /* Adjust font size for tablets */
    // }
    // .content {
    //   width: 70%; /* Adjust content width for tablets */
    // }

    .image-group-right, .image-group-left {
        display: grid;
        column-gap: 50px;
        // row-gap: 50px;
        // grid-template-rows: auto;
        grid-template-columns: 2fr 2fr;
        // grid-template-columns: 1fr 2fr;
        // grid-auto-columns: 1fr;
        position: relative;
    
            #{&}-text {
                margin-top: 30px;
                // font-size: 40px;
                letter-spacing: 2px;
                // margin-bottom: 30px;
                white-space: normal;
                // object-fit: fill;
                // display: inline-block;   //changed from block
                align-items: center;
                // vertical-align: middle;
    
                h3 {
                    margin-top: 0;
                    font-weight: map-get($font-weights, extra-bold);
                    line-height: 1em;
                    // font-size: 20px;
                }
            }
    } 
}
  
/* Styles for large screens */
// @media only screen and (min-width: 992px) {
//     body {
//       font-size: 18px; /* Larger font size for desktops */
//     }
//     .content {
//       width: 80%; /* Wider content area for desktops */
//     }
// }
  
/* Styles for small screens (phones) changes from max 600px*/
@media only screen and (max-width: 768px) {
    body{
        p {
            font-size: 14px;
        }
    }

    #sf-product {
        margin-bottom: -30%;
    }

    .image-group-right, .image-group-left {
        display: grid;
        column-gap: 50px;
        // row-gap: 50px;
        // grid-template-rows: auto;
        grid-template-columns: 2fr 2fr;
        // grid-template-columns: 1fr 2fr;
        // grid-auto-columns: 1fr;
        position: relative;
    
            #{&}-text {
                margin-top: 30px;
                // font-size: 40px;
                letter-spacing: 2px;
                // margin-bottom: 30px;
                white-space: normal;
                // object-fit: fill;
                // display: inline-block;   //changed from block
                align-items: center;
                // vertical-align: middle;
    
                h3 {
                    margin-top: 0;
                    font-weight: map-get($font-weights, extra-bold);
                    line-height: 1em;
                    // font-size: 20px;
                }
            }
    }

    .main-top-header{
        // justify-content: center;
        // align-items: flex-end;
        display: flex;
        position: relative;
        margin-bottom: 60px;
        // width: 100vh;
        background-color: #d2bfc1;
        
    
        img {
            width: 100vw;
            height: auto;
            image-rendering: auto;
            
        }
    }

    #prj-summary, #prj-research, #prj-ideate, #prj-conclusion {
        margin: 5% 2%;
        padding-right: 30px;
        padding-left: 20px;
    }
    #prj-summary-heading {
        font-size: 28px;
    }

    .prj-summary-role {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 2fr 2fr;
        border-bottom: 2px solid #100303;
        border-top: 2px solid #100303;
        margin-top: 50px;
    
        .role, .project, .timeline, .tools {
            border-right: 2px solid #100303;
            padding-left: 20px;
        }
        .role, .timeline {
            border-left:2px solid #100303;
        }
        .role, .project {
            border-bottom: 2px solid #100303;
        }
    }

    .prj-design-process {
        margin-top: 50px;
    
        img{
            width: 85vw;
            padding: 40px 0;    
        }
    }
    
    #prj-imagery{
        padding: 50px;
        padding-bottom: 0;
    }
    
    .image-group-r, .image-group-l {
        width: 75vw;
        padding-left: 5%;
        padding-top: 30px;
        margin-bottom: 40px; 
    }

    .image-group-r-text, .image-group-l-text{
        p {
            width: 100%;
            // margin-top: 10px;
            font-family: $primary-font;
            font-style: normal;
            // font-weight: map-get($font-weights, regular);
            // font-size: 18px;
            font-weight: 350;  //*added this font weight *
        }
    }

    .prj-section-heading-main {
        h3 {
            font-size: 26px;
            text-align: center;
        }
        hr {
            width: 80px;
            margin: 0 42%;
        }
    }

    .prj-research-body, .prj-ideate-body {
        ul {
            font-size: 14px;
        }
    }
    .prj-illustration {   
        img {
            max-width: 85vw;
        }
    }

    //stylings for the footer bottom
    .footer-bottom {
        display: hidden;
    }

}