body {
    margin: 0px;
    border: 0px;
    size: 18px;
    font-family: 'Barlow', sans-serif;
    text-align: center;
    color: hsl(212, 27%, 19%);
}

header {
    width:100%;
    background-image: url('../images/mobile/image-header.jpg');
    height: 537px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: inherit;
}   
a {
    cursor: pointer;
    text-decoration: none;
    color: hsl(232, 10%, 55%);
}
.sunnyside__logo {
    margin-top: 8.5%;
    margin-left: 0px;
    max-width: 125px;
}
.sunnyside__nav-links {
    display: none;
    list-style-type: none;
    background-color: hsl(0, 0%, 100%);
    position: absolute;
    margin-top: 46px;
    margin-left: 24px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 23px;
    padding-bottom: 57px;
}
.sunnyside__nav-links:link {
    text-decoration: none;
}
.sunnyside__nav-triangle {
    display: none;
    position: absolute;
    height:47px;
    width: 246px;
    fill: hsl(0, 0%, 100%);
    margin-top: 0px;
    margin-left: 104.5px;
    padding: 0px;
}
.sunnyside__nav-link {
    font-size: 19px;
    padding: 17px 115px;
}
.sunnyside__nav-button {
    margin-top: 34px;
}
.sunnyside__contact-button {
    font-family: 'Fraunces', serif;
    text-transform: uppercase;
    font-size: 15px;
    color: hsl(212, 27%, 19%);
    background-color: hsl(51, 100%, 49%);;
    border-radius: 30px;
    padding: 20px 32px;
}

.sunnyside__menu {
    margin-left: 175px;
    max-width: 180px;
    max-height: 30px;
}
.sunnyside__title {
    font-family: 'Fraunces', serif;
    text-transform: uppercase;
    letter-spacing: 7px;
    font-weight: 900;
    font-size: 40px;
    color: hsl(0, 0%, 100%);
    margin-top: 22%;
}
.sunnyside__arrow {
    margin-top: 6%;
}

/* BRAND SECTION */
.sunnyside__brand-image {
    width: 100%;
    height: 100%;
}
.sunnyside__brand-content {
    height: 265px;
}
.sunnyside__subtitle {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 32px;
    margin: 61px 30px 28px 30px;
    line-height: 37px;
}
.sunnyside__brand-text {
    margin-left: 21px;
    margin-right: 21px;
    margin-bottom: 33px;
    color: hsl(213, 9%, 39%);
    font-size: 18px;
    line-height: 30px;
}
.sunnyside__learn {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    color: hsl(212, 27%, 19%);
}
.sunnyside__brand-learn {
    text-decoration-color: hsl(51, 100%, 49%);
}
/* AUDIENCE */
.sunnyside__audience-learn {
    text-decoration-color: hsl(7, 99%, 70%);
}
.sunnyside__audience-image {
    width: 100%;
    height: 100%;
    margin-top: 109px;
}
.sunnyside__audience-subtitle {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 32px;
    margin: 63px 30px 27px 30px;
    line-height: 37px;
}
.sunnyside__audience-text {
    margin-left: 21px;
    margin-right: 21px;
    margin-bottom: 32px;
    color: hsl(213, 9%, 39%);
    font-size: 18px;
    line-height: 30px;
}

/* GRAPHIC DESIGN */
.sunnyside__graphic-design {
    background-image: url('../images/mobile/image-graphic-design.jpg');
    height: 600px;
    border: 0px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: inherit;
    margin-top: 67px;
    position: relative;
}
.sunnyside__graphic-subtitle {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    position: absolute;
    font-size: 28px;
    margin-top: 398px;
    margin-left: 77px;
    color: hsl(167, 40%, 20%);
}
.sunnyside__graphic-text {
    margin-top: 462px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 58px;
    color:hsl(167, 40%, 20%);
    position: absolute;
    font-size: 16px;
    line-height: 26px;
}

/* Photography*/
.sunnyside__photography {
    background-image: url('../images/mobile/image-photography.jpg');
    height: 600px;
    border: 0px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: inherit;
    margin-top: 0px;
    position: relative;
}
.sunnyside__photography-subtitle {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    position: absolute;
    font-size: 28px;
    margin-top: 399px;
    margin-left: 87px;
}
.sunnyside__photography-text {
    margin-top: 460px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 58px;
    color: hsl(198, 62%, 26%);
    position: absolute;
    font-size: 16px;
    line-height: 27px;
}

/* Client Testimonials*/
.sunnyside__testimonials-title {
    margin-top: 64px;
    margin-bottom: 0px;
    font-family: 'Fraunces', serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 17px;
    color: hsl(232, 10%, 55%);
}
.sunnyside__testimonials-container {
    margin: 0px;
    padding: 0px;
}
.sunnyside__testimonials-image {
    border-radius: 50%;
    max-width: 70px;
    margin-top: 66px;
    margin-bottom: 33px;
}
.sunnyside__testimonials-text {
    margin-left: 21px;
    margin-right: 27px;
    line-height: 30px;
    font-size: 18px;
}
.sunnyside__testimonials-name {
    font-family: 'Fraunces', serif;
    margin-top: 36px;
    font-size: 18px;
}
.sunnyside__testimonials-position {
    margin-top: 12px;
    font-size: 14px;
    color: hsl(213, 9%, 39%);
}

/* Galery*/
.sunnyside__gallery-images {
    margin-top: 25%;
    display: grid;
    gap: 0px;
    grid-template-columns: 1fr 1fr;
    border: 0px;
}
.sunnyside__gallery-title {
    display: none;
}
.sunnyside__gallery-picture {
    height: 186px;
}
.sunnyside__gallery-milkbottles {
    width: 100%;
}
.sunnyside__gallery-orange {
    width: 100%;
}
.sunnyside__gallery-cone {
    width: 100%;
}
.sunnyside__gallery-cubes {
    width: 100%;
}

/* Footer */
.sunnyside__footer {
    background-color: hsl(170, 34%, 69%);
    margin-top: 0px;
}

.sunnyside__logo-footer {
    margin-top: 0%;
    margin-left: -11px;
    padding-top: 56px;
    font-family: 'Barlow', sans-serif;
    color: hsl(167, 40%, 15%);
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 2px;
}
.sunnyside__footer-options {
    padding-top: 14px;
    display: flex;
    font-size: 18px;
    list-style: none;
    justify-content: center;
}
.sunnyside__footer-option {
    margin-right: 50px;
    margin-left: 7px;
}
.sunnyside__footer-link {
    color: hsl(167, 40%, 24%);
}
.sunnyside__footer-link:hover {
    color: hsl(0, 0%, 100%);
}
.sunnyside__footer-icons {
    margin-top: 90px;
    padding-bottom: 75px;
    display: flex;
    list-style: none;
    justify-content: center;
}
.sunnyside__footer-icon {
    margin-left: -7px;
    margin-right: 35px;
}
.sunnyside__footer-icon-link {
    fill: hsl(167, 40%, 24%);
}
.sunnyside__footer-icon-link:hover {
    fill: hsl(0, 0%, 100%);
}

.testColor {


    color: hsl(7, 99%, 70%);
    color: hsl(51, 100%, 49%);
    color: hsl(167, 40%, 24%);
    color: hsl(198, 62%, 26%);
    color: hsl(168, 34%, 41%);


    color: hsl(212, 27%, 19%);
    color: hsl(213, 9%, 39%);
    color: hsl(232, 10%, 55%);
    color: hsl(210, 4%, 67%);
    color: hsl(0, 0%, 100%);
}

@media (min-width: 768px) {
    header {
        background-image: url('../images/desktop/image-header.jpg');
        width: 100%;
        height: 800px;
    }
    .sunnyside__menu {
        margin: 0px;
        display: none;
    }
    .sunnyside__nav-links {
        display: inline;
        position: relative;
        margin: 0px;
        padding: 0px;
    }
    .sunnyside__nav {
        float: left;
        margin-top: 3.2%;
        font-size: 18px;
    }
    .sunnyside__logo {
        margin-left: 40px;
        max-width:100%;
        height:33px;
    }
    .sunnyside__link-about {
        margin-left: 48.5%;
    }
    .sunnyside__nav-link {
        display: inline;
        float: left;
        margin-top: 2.3%;
        padding-left: 1.3%;
        padding-right: 2%;
    }
    .sunnyside__nav-link-text {
        color: hsl(0, 0%, 100%);
    }
    .sunnyside__nav-button {
        display: inline;
        float: left;
        padding: 0px;
        margin-left: 1%;
        margin-top: 3.5%;
        margin-right: 17px;
        height: 50px;
    }
    .sunnyside__contact-button {
        color: hsl(212, 27%, 19%);
        background-color: hsl(0, 0%, 100%);
    }
    .sunnyside__contact-button:hover {
        color: hsl(0, 0%, 100%);
        background-color: hsl(209, 83%, 79%);
    }
    .sunnyside__title {
        letter-spacing: 11px;
        font-size: 55px;
        margin-top: 0px;
        padding-top: 13.5%;
    }
    .sunnyside__arrow {
        margin-top: 4%;
    }


    .sunnyside__main-brand {
        display: grid;
        column-gap: 0px;
        grid-template-columns: 1fr 1fr;
        height: 599px;
    }
    .sunnyside__brand-image {
        height: 600px;
        grid-column-start: 2;
    }
    .sunnyside__brand-content {
        grid-row-start: 1;
        grid-column-start: 1;
        text-align: left;
        margin-top: 20.5%;
        margin-left: 18.8%;
        margin-right: 10%;
    }
    .sunnyside__subtitle {
        font-size: 41px;
        line-height: 49px;
        margin-top: 2.3%;
    }
    .sunnyside__brand-text {
        margin-top: 31px;
        margin-left: 5.5%;
        margin-bottom: 8.3%;
    }
    .sunnyside__learn {
        margin-top: 40px;
        margin-left: 7.5%;
    }

    /**/
    .sunnyside__main-audience {
        display: grid;
        column-gap: 0px;
        grid-template-columns: 1fr 1fr;
    }
    .sunnyside__audience-image {
        margin-top: 0%;
    }
    .sunnyside__audience-content {
        text-align: left;
        margin-top: 20.5%;
        margin-left: 11%;
        margin-right: 15%;
    }
    .sunnyside__audience-subtitle {
        font-size: 41px;
        line-height: 49px;
        margin-top: 2.3%;
    }
    .sunnyside__audience-text {
        margin-top: 31px;
        margin-left: 5.5%;
        margin-bottom: 8%;
        margin-right: 10%;
    }
    .sunnyside__audience-learn {
        margin-top: 40px;
        margin-left: 7%;
    }

    /* GRAPHIC DESIGN */
    .sunnyside__design-photography {
        display: grid;
        column-gap: 0px;
        grid-template-columns: 1fr 1fr;
    }
    .sunnyside__graphic-design {
        background-image: url('../images/desktop/image-graphic-design.jpg');
        margin-top: 0px;
    }
    .sunnyside__photography {
        background-image: url('../images/desktop/image-photography.jpg');
    }
    .sunnyside__graphic-subtitle {
        margin-left: 250px;
    }
    .sunnyside__graphic-text {
        margin-left: 196px;
        margin-right: 195px;
    }

    /* Photography*/
    .sunnyside__photography-subtitle {
        margin-left: 263px;
    }
    .sunnyside__photography-text {
        margin-left: 197px;
        margin-right: 191px;
    }

    /*Testimonials*/
    .sunnyside__testimonials-title {
        margin-top: 160px;
        font-size: 20px;
        letter-spacing: 5.5px;
    }
    .sunnyside__testimonials-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-left: 150px;
        margin-right: 150px;
        list-style-type: none;
    }
    .sunnyside__testimonials-image {
        margin-top: 82px;
    }
    .sunnyside__testimonials-text {
        margin-top: 24px;
        margin-left: 16px;
        margin-right: 16px;
        line-height: 31.5px;
    }
    .sunnyside__testimonials-name {
        margin-top: 69px;
        margin-left: -15px;
        font-size: 19px;
    }
    .sunnyside__testimonials-position {
        margin-top: 10px;
        font-size: 14px;
        margin-left: -15px;
    }
    
    /* Galery*/
    .sunnyside__gallery-images {
        margin-top: 163px;
        display: grid;
        gap: 0px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border: 0px;
        height: 447px;
    }

    
    /* Footer */
    .sunnyside__logo-footer {
        margin-top: 0%;
        margin-left: -11px;
        padding-top: 60px;
    }
    .sunnyside__footer-option {
        margin-left: 9px;
        margin-right: 47px;
    }
}