/* Last Updated Sept 21 2023 -8:34 */

body#casestudy {
    width: 100%;
    background-image: url(assets/scribble.png);
    background-repeat: repeat;
    background-position: center center;
}

main#cs {
    width: 80%;
    margin: 0 auto;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

Focusing on section elements that are a direct parent of the main element main#cs>section {
    margin: 0.625em;
    padding: 1.25em;
    border: 0.0625em solid black;
    margin-bottom: 0.625em;
}

main#cs a:hover {
    color: rgb(255, 0, 0);
}


/* Basic CSS for Blockquotes */
section>blockquote {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2.5em;
    text-align: center;
    font-size: 2em;
    font-style: italic;

}



section#cs-hero h2 {
    /* color: rgb(0, 0, 0); */
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.866);
    color: rgb(255, 255, 255);
    width: 50%;
    padding: 3.125em;
    margin: 0.625em;
    border-radius: 2%;
}

section#cs-hero {
    display: flex;
    flex-direction: column;
    height: 40vh;
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-items: center;
    justify-content: center;
    border-radius: 0.125em;
    margin: 0.625em;
}

section#cs-project-brief h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background-color: rgb(231, 231, 231);
    margin-left: 1.25em;
    margin-bottom: 0.625em;
    font-weight: 800;
    font-size: 2em;
    color: rgba(79, 66, 255, 0.879);
}

section#cs-project-brief p {
    font-weight: 500;
    font-size: 1.1em;
    line-height: 1.25em;
    margin-bottom: 1.25em;
}

section#cs-project-brief {
    background-color: rgb(231, 231, 231);
    display: flex;
    flex-direction: column;
    padding: 1.25em;
    border-radius: 0.125em;
    margin: 0.625em;
}

section#cs-project-brief div.stack {
    background-color: rgb(231, 231, 231);
    display: flex;
    flex-direction: row;
    margin-left: 0.625em;
}

section#cs-project-brief div.stack p {
    display: flex;
    flex-direction: row;
    width: 50%;
    padding: 0.625em;
}

section#cs-flexible {
    background-color: rgb(231, 231, 231);
}

section#cs-conclusion {
    background-color: rgb(231, 231, 231);
}

section#cs-flexible {
    display: flex;
    flex-direction: column;
    background-image: url(assets/background-sketchpaper-prototype.png);
    height: 40vh;
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-items: center;
    justify-content: center;
    border-radius: 0.125em;
}

section.cs-flexible h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background-color: rgb(231, 231, 231);
    margin-left: 1.25em;
    margin-bottom: 1.25em;
    font-weight: 800;
    font-size: 2em;
    color: rgba(79, 66, 255, 0.879);
}

section.cs-flexible p {
    font-weight: 500;
    font-size: 1.1em;
    line-height: 1.25em;
    margin-bottom: 1.25em;
    width: 50%;
    margin-left: 0.625em;
}

section.cs-flexible {
    background-color: rgb(231, 231, 231);
    display: flex;
    flex-direction: column;
    padding: 1.25em;
    border-radius: 0.125em;
    margin: 0.625em;
}

section.cs-flexible div {
    background-color: rgb(231, 231, 231);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

section.cs-flexible div p {
    margin-left: 1.25em;
}

section.cs-flexible div a {
    margin-left: 1.25em;
}


/* * {box-sizing:border-box} */

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    height: 30vh;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -1.375em;
    padding: 1em;
    color: white;
    font-weight: bold;
    font-size: 1.125em;
    transition: 0.6s ease;
    border-radius: 0 0.1875em 0.1875em 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 0.1875em 0 0 0.1875em;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 0.9375em;
    padding: 0.5em 0.75em;
    position: absolute;
    bottom: 0.5em;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 0.75em;
    padding: 0.5em 0.1875em;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 93.75%;
    width: 93.75%;
    margin: 0 0.125em;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

div#cs-conclusion {
    display: flex;
    padding: 1.25em;
    background-color: rgb(231, 231, 231);
    border-radius: 2px;
    margin: 10px;
}

div#cs-conclusion {
    display: flex;
    padding: 1.25em;
}

div#cs-conclusion h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2em;
    font-weight: 800;
    margin-left: 1.25em;
    color: rgba(79, 66, 255, 0.879);
}

div#cs-conclusion p {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    margin-left: 1.25em;
    margin-top: 3.125em;
    line-height: 1.25em;
}

div#cs-conclusion img {
    margin: 1.25em;
}

/* media Queries */
@media screen and (max-width: 330px) {
    nav#nav-main ol {
        display: block;
    }
}

@media screen and (max-width: 622px) {
    nav#nav-main ol {
        flex-wrap: wrap;
    }

    nav#nav-main ol li {
        margin-bottom: 3em;
    }
}

@media screen and (max-width: 800px) {
    main#cs {
        width: 100%;
        margin: 0%;
    }

    section#cs-hero {
        width: 100%;
        padding: 1.2em;
    }

    section#cs-hero h2 {
        width: auto;
        font-size: 1.5em;
    }

    section#cs-project-brief {
        display: block;
        width: 100%;
    }

    section#cs-project-brief h2 {
        font-size: 1.5em;
    }

    section#cs-project-brief p {
        font-size: 1.em;
    }

    section#cs-project-brief div.stack {
        display: block;
    }

    section#cs-project-brief div.stack p {
        width: 100%;
        padding: 0%;
    }

    section.cs-flexible {
        display: block;
        width: 100%;
    }

    section.cs-flexible p {
        width: 100%;
        font-size: 1em;
    }

    section.cs-flexible h2 {
        font-size: 1.5em;
    }

    section.cs-flexible div {
 flex-wrap: wrap;
        align-content: center;
    }

    section.cs-flexible div p {
        margin-left: 0%;
    }
    section.cs-flexible div a {
        width: 50%;
    }

    section.cs-flexible div a img {
        margin-bottom: 4px;
        max-width: 200px;
        width: 100%;
    }

    body#casestudy {
        display: block;
    }

    div#cs-conclusion {
        width: 100%;
    }

    div#cs-conclusion h2 {
        font-size: 1.5em;
    }

    div#cs-conclusion p {
        font-size: 1em;
    }
    div#cs-conclusion img {
        margin-left: 0em;
        margin-right: 0em;
    }
}

@media screen and (max-width: 699px) {
    div#cs-conclusion {
        display: block;
    }

    div#cs-conclusion p {
        width: 100%;
        margin: 0%;
    }
}