h1 {
    font-family: 'Unbounded',sans-serif;
    color: #bac53d;
}

h1:hover {
    color: #7e871d;
    transition:  all 0.2s ease-in-out 0.2s;
    transform: scale(1.1);
    transition: 0.5s;
}

p {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    color: #bac53d;
}

p:hover {
    color: #7e871d;
    transition: all 0.2s ease-in-out 0.2s;
}

code:hover {
    color: white;
    transition: all 0.2s ease-in-out 0.2s;
}

li {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
}

body {
    width: 100%;
    background-image: url("../PortfolioIMGS/BGStuff/BodyBG.png");
    /* background: linear-gradient(359deg, #949a4d, #c7ce77, #ced7a5, #daead7);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 35s ease infinite;
    -moz-animation: AnimationName 35s ease infinite;
    animation: AnimationName 35s ease infinite; */
}

/* @-webkit-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
} */

.logoimg img {
    width: 30vw;
    padding-top: .5em;
}

.Title {
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-bottom: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.Title h1 {
    text-align: center;
    padding: 0.5em 1.5em 0em 1.5em;
}


.Title div {
    display: grid;
    justify-content: center;
    align-items: center;
}

.logoimg img {
    width: 50vw;
    padding-top: .5em;
}

.logoimg img:hover {
    transform: scale(1.1);
    transition: 0.5s;
}



.Intro {
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-left: .5em;
    margin-right: .5em;
}

.Intro article {
    padding: .5em .5em .5em .5em;
}

.Intro article h1,p {
    display: grid;
    justify-content: center;
}



.DesignIdea {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.DesignIdea article{
    display: grid;
    justify-items: center;
    align-items: center;
    padding: .5em .5em .5em .5em;
}

.DesignIdea h1, p{
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

.placeholderimg {
    width: 90vw;
    height: 920px;
    background-image: url(./CaseStudyImgs/InspoSite.png);
    background-repeat: no-repeat;
    /* border: black;
        border-style: dashed; */
    background-size: 183%;
}

.wireframe {
    /* border: black;
    border-style: dashed; */
    background-image: url(./CaseStudyImgs/WireframeRoddy.jpg);
    width: 80vw;
    height: 1316px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.DesignProcess {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.DesignProcess article {
    padding: .5em .5em .5em .5em;
}

.DesignProcess h1,p {
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;

}

.Assets {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.Assets article {
    padding: .5em .5em .5em .5em;
}

.paletteGRID {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    padding: .5em .5em .5em .5em;
}

.Assets h1,p {
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;

}

.color1 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 1.png);
    width: 30vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.color2 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 4.png);
    width: 30vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.color3 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 3.png);
    width: 30vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.color4 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 5.png);
    width: 30vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.font1 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 6.png);
    width: 70vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.font2 {
    background-image: url(./CaseStudyImgs/1x/Artboard\ 7.png);
    width: 70vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.logos1 {
    background-image: url(../ODDILogos/OddliNavLogoOutline.png);
    width: 70vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.logos2 {
    background-image: url(../ODDILogos/ODDLIFinalwVariations-02.png);
    width: 70vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.logos3 {
    background-image: url(../ODDILogos/ODDLIFinalwVariations-03.png);
    width: 70vw;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.Results {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.Results article {
    padding: .5em .5em .5em .5em;
}

.deskMOCKUP {
    background-image: url(./CaseStudyImgs/DesktopMockup1.png);
    width: 88vw;
    height: 540px;
    background-size: 170%;
    background-repeat: no-repeat;
    background-position-x: -148px;
}

.Results h1,
p {
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;

}

.KeyTakeaway {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.KeyTakeaway article {
    padding: .5em .5em .5em .5em;

}

.KeyTakeaway h1,
p,li {
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;

}

.Conclusion {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: rgba(45, 42, 50, 0.2);
    border-radius: 10px;
    margin-top: 2em;
    margin-left: .5em;
    margin-right: .5em;
}

.Conclusion article {
    padding: .5em .5em .5em .5em;


}

.Conclusion h1,
p {
    text-align: center;
    padding: 0.5em 1.5em 0.5em 1.5em;

}






@media only screen and (max-width: 1440px) {
    h1 {
        font-family: 'Unbounded', sans-serif;
        color: #bac53d;
    }

    h1:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
        transform: scale(1.1);
        transition: 0.5s;
    }

    p {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
        color: #bac53d;
    }

    p:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
    }

    code {
        color: #bac53d;
    }

    code:hover {
        color: white;
        transition: all 0.2s ease-in-out 0.2s;
    }

    li {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
    }

    body {
        width: 100%;
        background-image: url("../PortfolioIMGS/BGStuff/BodyBG.png");
        /* background: linear-gradient(359deg, #949a4d, #c7ce77, #ced7a5, #daead7);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 35s ease infinite;
    -moz-animation: AnimationName 35s ease infinite;
    animation: AnimationName 35s ease infinite; */
    }

    /* @-webkit-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
} */

    .Title {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-bottom: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Title h1 {
        text-align: center;
        padding: 0.5em 1.5em 0em 1.5em;
    }


    .Title div {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .logoimg img {
        width: 30vw;
        padding-top: .5em;
    }

    .logoimg img:hover {
        transform: scale(1.1);
        transition: 0.5s;
    }



    .Intro {
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Intro article {
        padding: .5em .5em .5em .5em;
    }

    .Intro article h1,
    p {
        display: grid;
        justify-content: center;
    }



    .DesignIdea {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignIdea article {
        display: grid;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .DesignIdea h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;
    }

    .placeholderimg {
        width: 80vw;
        height: 460px;
        background-image: url(./CaseStudyImgs/InspoSite.png);
        background-repeat: no-repeat;
        /* border: black;
        border-style: dashed; */
        background-size: 100%;
    }

    .wireframe {
        /* border: black;
    border-style: dashed; */
        background-image: url(./CaseStudyImgs/WireframeRoddy.jpg);
        width: 80vw;
        height: 1316px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .DesignProcess {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignProcess article {
        padding: .5em .5em .5em .5em;
    }

    .DesignProcess h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Assets {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Assets article {
        padding: .5em .5em .5em .5em;
    }

    .paletteGRID {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .Assets h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .color1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 1.png);
        width: 30vw;
        height: 400px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 4.png);
        width: 30vw;
        height: 400px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color3 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 3.png);
        width: 30vw;
        height: 400px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color4 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 5.png);
        width: 30vw;
        height: 400px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 6.png);
        width: 70vw;
        height: 330px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 7.png);
        width: 70vw;
        height: 330px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos1 {
        background-image: url(../ODDILogos/OddliNavLogoOutline.png);
        width: 70vw;
        height: 290px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos2 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-02.png);
        width: 70vw;
        height: 290px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos3 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-03.png);
        width: 70vw;
        height: 290px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .Results {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Results article {
        padding: .5em .5em .5em .5em;
    }

    .deskMOCKUP {
        background-image: url(./CaseStudyImgs/DesktopMockup1.png);
        width: 78vw;
        height: 920px;
        background-size: 120%;
        background-repeat: no-repeat;
        background-position-x: -148px;
    }

    .Results h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .KeyTakeaway {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .KeyTakeaway article {
        padding: .5em .5em .5em .5em;

    }

    .KeyTakeaway h1,
    p,
    li {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Conclusion {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Conclusion article {
        padding: .5em .5em .5em .5em;


    }

    .Conclusion h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }
}



@media only screen and (max-width: 767px) {
    h1 {
        font-family: 'Unbounded', sans-serif;
        color: #bac53d;
    }

    h1:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
        transform: scale(1.1);
        transition: 0.5s;
    }

    p {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
        color: #bac53d;
    }

    p:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
    }

    code {
        color: #bac53d;
    }

    code:hover {
        color: white;
        transition: all 0.2s ease-in-out 0.2s;
    }

    li {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
    }

    body {
        width: 100%;
        background-image: url("../PortfolioIMGS/BGStuff/BodyBG.png");
        /* background: linear-gradient(359deg, #949a4d, #c7ce77, #ced7a5, #daead7);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 35s ease infinite;
    -moz-animation: AnimationName 35s ease infinite;
    animation: AnimationName 35s ease infinite; */
    }

    /* @-webkit-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
} */

    .Title {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-bottom: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Title h1 {
        text-align: center;
        padding: 0.5em 1.5em 0em 1.5em;
    }


    .Title div {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .logoimg img {
        width: 50vw;
        padding-top: .5em;
    }

    .logoimg img:hover {
        transform: scale(1.1);
        transition: 0.5s;
    }



    .Intro {
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Intro article {
        padding: .5em .5em .5em .5em;
    }

    .Intro article h1,
    p {
        display: grid;
        justify-content: center;
    }



    .DesignIdea {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignIdea article {
        display: grid;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .DesignIdea h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;
    }

    .placeholderimg {
        width: 90vw;
        height: 360px;
        background-image: url(./CaseStudyImgs/InspoSite.png);
        background-repeat: no-repeat;
        /* border: black;
        border-style: dashed; */
        background-size: 183%;
    }

    .wireframe {
        /* border: black;
    border-style: dashed; */
        background-image: url(./CaseStudyImgs/WireframeRoddy.jpg);
        width: 90vw;
        height: 556px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .DesignProcess {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignProcess article {
        padding: .5em .5em .5em .5em;
    }

    .DesignProcess h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Assets {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Assets article {
        padding: .5em .5em .5em .5em;
    }

    .paletteGRID {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .Assets h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .color1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 1.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 4.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color3 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 3.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color4 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 5.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 6.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 7.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos1 {
        background-image: url(../ODDILogos/OddliNavLogoOutline.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos2 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-02.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos3 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-03.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .Results {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Results article {
        padding: .5em .5em .5em .5em;
    }

    .deskMOCKUP {
        background-image: url(./CaseStudyImgs/DesktopMockup1.png);
        width: 88vw;
        height: 540px;
        background-size: 170%;
        background-repeat: no-repeat;
        background-position-x: -148px;
    }

    .Results h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .KeyTakeaway {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .KeyTakeaway article {
        padding: .5em .5em .5em .5em;

    }

    .KeyTakeaway h1,
    p,
    li {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Conclusion {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Conclusion article {
        padding: .5em .5em .5em .5em;


    }

    .Conclusion h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }
}

@media only screen and (max-width: 414px) {
    h1 {
        font-family: 'Unbounded', sans-serif;
        color: #bac53d;
    }

    h1:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
        transform: scale(1.1);
        transition: 0.5s;
    }

    p {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
        color: #bac53d;
    }

    p:hover {
        color: #7e871d;
        transition: all 0.2s ease-in-out 0.2s;
    }

    code {
        color: #bac53d;
    }

    code:hover {
        color: white;
        transition: all 0.2s ease-in-out 0.2s;
    }

    li {
        font-family: 'Lexend', sans-serif;
        font-weight: 300;
    }

    body {
        width: 100%;
        background-image: url("../PortfolioIMGS/BGStuff/BodyBG.png");
        /* background: linear-gradient(359deg, #949a4d, #c7ce77, #ced7a5, #daead7);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 35s ease infinite;
    -moz-animation: AnimationName 35s ease infinite;
    animation: AnimationName 35s ease infinite; */
    }

    /* @-webkit-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 52% 0%
    }

    50% {
        background-position: 49% 100%
    }

    100% {
        background-position: 52% 0%
    }
} */

    .Title {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-bottom: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Title h1 {
        text-align: center;
        padding: 0.5em 1.5em 0em 1.5em;
    }


    .Title div {
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .logoimg img {
        width: 50vw;
        padding-top: .5em;
    }

    .logoimg img:hover {
        transform: scale(1.1);
        transition: 0.5s;
    }



    .Intro {
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Intro article {
        padding: .5em .5em .5em .5em;
    }

    .Intro article h1,
    p {
        display: grid;
        justify-content: center;
    }



    .DesignIdea {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignIdea article {
        display: grid;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .DesignIdea h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;
    }

    .placeholderimg {
        width: 90vw;
        height: 360px;
        background-image: url(./CaseStudyImgs/InspoSite.png);
        background-repeat: no-repeat;
        /* border: black;
        border-style: dashed; */
        background-size: 183%;
    }

    .wireframe {
        /* border: black;
    border-style: dashed; */
        background-image: url(./CaseStudyImgs/WireframeRoddy.jpg);
        width: 90vw;
        height: 556px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .DesignProcess {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .DesignProcess article {
        padding: .5em .5em .5em .5em;
    }

    .DesignProcess h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Assets {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Assets article {
        padding: .5em .5em .5em .5em;
    }

    .paletteGRID {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
        padding: .5em .5em .5em .5em;
    }

    .Assets h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .color1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 1.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 4.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color3 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 3.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .color4 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 5.png);
        width: 30vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font1 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 6.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .font2 {
        background-image: url(./CaseStudyImgs/1x/Artboard\ 7.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos1 {
        background-image: url(../ODDILogos/OddliNavLogoOutline.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos2 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-02.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .logos3 {
        background-image: url(../ODDILogos/ODDLIFinalwVariations-03.png);
        width: 70vw;
        height: 150px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .Results {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Results article {
        padding: .5em .5em .5em .5em;
    }

    .deskMOCKUP {
        background-image: url(./CaseStudyImgs/DesktopMockup1.png);
        width: 88vw;
        height: 540px;
        background-size: 170%;
        background-repeat: no-repeat;
        background-position-x: -148px;
    }

    .Results h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .KeyTakeaway {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .KeyTakeaway article {
        padding: .5em .5em .5em .5em;

    }

    .KeyTakeaway h1,
    p,
    li {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }

    .Conclusion {
        display: grid;
        justify-items: center;
        align-items: center;
        background-color: rgba(45, 42, 50, 0.2);
        border-radius: 10px;
        margin-top: 2em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .Conclusion article {
        padding: .5em .5em .5em .5em;


    }

    .Conclusion h1,
    p {
        text-align: center;
        padding: 0.5em 1.5em 0.5em 1.5em;

    }
}







/* .logoimg {
    width: 50vw;
    height: 8vh;
    background-size: 50%;
    background-repeat: no-repeat;
    text-align: center;
} */

/* .logo {
    display: grid;
    justify-content: center;
}

.logo img {
    width: 50vw;
} */

/* .DesignIdea article h1,img,
p {
    display: grid;
    text-align: center;
    justify-content: center;
} */

/* .DesignIdea article img {
    width: 50vw;
} */