@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Fraunces:wght@700;900&display=swap');

:root{
    /*fonts*/
    --font-family:"Barlow", sans-serif;
    --font-family:"fraunces", sans-serif;
    --font-size:18px;
    --font-weight-normal:600,700;
    --font-weight-bold:900;
    /*colors*/
    --Soft-red: hsl(7, 99%, 70%);
    --Yellow: hsl(51, 100%, 49%);
    --Dark-desaturated-cyan: hsl(167, 40%, 24%);
    --Dark-blue : hsl(198, 62%, 26%);
    --Dark-moderate-cyan: hsl(168, 34%, 41%);
    --Very-dark-desaturated-blue: hsl(212, 27%, 19%);
    --Very-dark-grayish-blue: hsl(213, 9%, 39%);
    --Dark-grayish-blue: hsl(232, 10%, 55%);
    --Grayish-blue: hsl(210, 4%, 67%);
    --White: hsl(0, 0%, 100%);
}
*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
body{
    font-size: var(--font-size);
    height: 4000px;
}
.container{

    height: auto;
    display: grid;
    grid-template-rows: 0.5fr 2.4fr 1.5fr 1fr 0.5fr;
}
.header{
    grid-row: 1/2;
    background-image: url(./images/desktop/image-header.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    display: grid;
    grid-template-rows: 50px 550px;
    height: 700px;
    color: var(--White);
}
.nav{
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 7fr 1fr 1fr 1fr 1fr;
    font-weight:600;
    font-family:"Barlow", sans-serif;
}
.t1{
    grid-column: 1/2;
    text-align: start;
    padding-top: 2rem;
    padding-left: 2rem;
}
.img10{
    width: 11rem;
}
.t2{
    grid-column: 2/3;
    padding-top:1.5rem;;
}
.t3{
    grid-column: 3/4;
    padding-top: 1.5rem;
}
.t4{
    grid-column: 4/5;
    padding-top: 1.5rem;
}
.button{
    grid-column: 5/6;
    padding-top: 1rem;
    padding-right: 2rem;
}
.button > button{
    font-family:"fraunces", sans-serif;
    font-weight:700;
    height: 2.8rem;
    width: 7rem;
    border-radius: 2rem;
    border: 1px solid var(--White);
    background-color: var(--White);
}
.main{
    grid-row: 2/3;
   
}
.main > h1{
    text-align: center;
    position: static;
    padding-top:85px;
    margin-top:10px;
    font-family:"fraunces", sans-serif;
    font-weight:900;
    font-size: 3rem;
}
.h1{
    letter-spacing:1rem;
}
.main > img{
    margin-left: 50%;
    margin-top: 5.8rem;
}
.section1{
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.text1{
    grid-column: 1/2;
    grid-row: 1/2;
    padding-left: 20%;
    padding-top: 25%;
}
.h5{
    text-decoration: underline solid var(--Yellow);
}
.img1{
    grid-column: 2/3;
    grid-row: 1/2;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(./images/./desktop/image-transform.jpg);
}
.text2{
    grid-column: 2/3;
    grid-row: 2/3;
    padding-left: 20%;
    padding-top: 25%;
}
.text2 > h5{
    text-decoration: underline solid var(--Soft-red)
}
.img2{
    grid-column: 1/2;
    grid-row: 2/3;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(./images/desktop/image-stand-out.jpg);
}
.box{
    grid-column: 1/3;
    grid-row: 3/4;
    margin-top:-50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.text3{
    grid-column: 1/2;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(./images/desktop/image-graphic-design.jpg);
    padding-top: 55%;
    color: var(--Dark-desaturated-cyan);
}
.text4{
    grid-column: 2/3;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(./images/desktop/image-photography.jpg);
    padding-top: 55%;
    color: var(--Dark-blue);
}
h2,h5{
    font-family:"fraunces", sans-serif;
    font-weight:900;
    text-align: start;
    color: var(--Very-dark-desaturated-blue);
}
.text1,.text2 > p{
    font-family:"Barlow", sans-serif;
    font-weight:600;
    text-align: start;
    color: var(--Very-dark-grayish-blue);
}
.text3 > h3{
    text-align: center;
    font-family:"fraunces", sans-serif;
    font-weight:900;
}
.text4 > h3{
    text-align: center;
    font-family:"fraunces", sans-serif;
    font-weight:900;
}
.text3,.text4 > p{
    text-align: center;
    font-family:"Barlow", sans-serif;
    font-weight:600;
}
.article{
    grid-row: 3/4;
    display: grid;
    grid-template-rows: 10rem 20rem;
    margin-bottom: 0px;
}
.title{
    grid-row: 1/2;
    padding-top: 4.5rem;
}
.title > h4{
    text-align: center;
    font-family:"fraunces", sans-serif;
    font-weight:900;
    color: var(--Grayish-blue);
    font-size: 1.4rem;
}
#h4{
    letter-spacing:0.5rem;
}
.box1{
    grid-row: 2/3;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
}
.Emily{
    grid-column: 1/2;
    grid-row: 1/2;
    display: grid;
    grid-template-rows: 5rem 10rem 5rem;
}
.img3{
    grid-row: 1/2;
    padding-left: 4rem;
}
.img3 > img{
    margin-left: 43%;
    margin-top: 1rem;
    width: 4.5rem;
    border-radius: 2.5rem;
}
.text5{
    grid-row: 2/3;
    text-align: center;
    padding-top: 3rem;
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Very-dark-grayish-blue);
    padding-left: 4rem;
}
.name1{
    grid-row: 3/4;
    text-align: center;
    padding-left: 4rem;
}
.name1 p{
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Grayish-blue);
    font-size: small;
    padding-top: 1rem;
}
.name1 h4{
    font-family:"fraunces", sans-serif;
    font-weight:900;
    color: var(--Very-dark-desaturated-blue);
}
.Thomas{
    grid-row: 1/2;
    grid-column: 2/3;
    display: grid;
    grid-template-rows: 5rem 10rem 5rem;
}
.img4{
    grid-row: 1/2;
}
.img4 > img{
    margin-left: 43%;
    margin-top: 1rem;
    width: 4.5rem;
    border-radius: 2.5rem;
}
.text6{
    grid-row: 2/3;
    text-align: center;
    padding-top: 3rem;
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Very-dark-grayish-blue);
}
.name2{
    grid-row: 3/4;
    text-align: center;
}
.name2 p{
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Grayish-blue);
    font-size: small;
    padding-top: 1rem;
}
.name2 h4{
    font-family:"fraunces", sans-serif;
    font-weight:900;
    color: var(--Very-dark-desaturated-blue);
}
.Jennie{
    grid-row: 1/2;
    grid-column: 3/4;
    display: grid;
    grid-template-rows: 5rem 10rem 5rem;
}
.img5{
    grid-row: 1/2;
    padding-right: 4rem;
}
.img5 > img{
    margin-left: 43%;
    margin-top: 1rem;
    width: 4.5rem;
    border-radius: 2.5rem;
}
.text7{
    grid-row: 2/3;
    text-align: center;
    padding-top: 3rem;
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Very-dark-grayish-blue);
    padding-right: 4rem;
}
.name3{
    grid-row: 3/4;
    text-align: center;
    padding-right: 4rem;
}
.name3 p{
    font-family:"Barlow", sans-serif;
    font-weight:600;
    color: var(--Grayish-blue);
    font-size: small;
    padding-top: 1rem;
}
.name3 h4{
    font-family:"fraunces", sans-serif;
    font-weight:900;
    color: var(--Very-dark-desaturated-blue);
}
.section2{
    grid-row: 4/5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: -400px;
}
.img6{
    grid-column: 1/2;
    background-repeat: no-repeat;
    background-image:url(./images/desktop/image-gallery-milkbottles.jpg) ;
    background-size: 100%;
}
.img7{
    grid-column: 2/3;
    background-repeat: no-repeat;
    background-image: url(./images/desktop/image-gallery-orange.jpg);
    background-size: 100%;
}
.img8{
    grid-column: 3/4;
    background-repeat: no-repeat;
    background-image: url(./images/desktop/image-gallery-cone.jpg);
    background-size: 100%;
}
.img9{
    grid-column: 4/5;
    background-repeat: no-repeat;
    background-image: url(./images/desktop/image-gallery-sugarcubes.jpg);
    background-size: 100%;
}
.footer{
    grid-row: 5/6;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    color: var(--Dark-moderate-cyan);
    background-color: hsl(143, 49%, 75%);
    font-family:"Barlow", sans-serif;
    font-weight:600;
    margin-top: -681px;
    height: 350px;
}
.title2{
    grid-row: 1/2;
    text-align: center;
    font-size: 2rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.text8{
    grid-row: 2/3;
    text-align: center;
}
#p1{
    margin-left: -10rem;
    font-size: small;
}
#p1:hover{
    color: var(--White);
}
#p2:hover{
    color: var(--White);
}
#p3:hover{
    color: var(--White);
}
#p2{
    margin-top: -1rem;
    font-size: small;
}
#p3{
    margin-left: 10rem;
    margin-top: -1rem;
    font-size: small;
}
.sites{
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 2rem 2rem 2rem 2rem 1fr;
}
.i1{
    grid-column: 2/3;
}
.i1 > img{
    width: 1rem;
}
.i2{
    grid-column: 3/4;
    padding-left: 20%;
}  
.i2 > img{
    width: 1rem;
}
.i3{
    grid-column: 4/5;
    padding-left: 30%;
}
.i3 > img{
    width: 1rem;
}
.i4{
    grid-column: 5/6;
    padding-left: 40%;
}
.i4 > img{
    width: 1rem;
}
@media(max-width:400px){
    .container{
        grid-template-columns: 375px;
       
    }
    .header{
        background-image: url(./images/mobile/image-header.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 375px;
        height: 500px;
        
    }
    .t1{
        padding-left: 2rem;
    }
    .img10{
        width: 6rem;
    }
    .button{
        display: none;
    }
    .p{
        display: none;
    }
    .main > h1{
        padding-top: 3rem;
    }
    .h1{
        font-size: 1.5rem;
        text-align: center;
        letter-spacing:0.6rem;
    }
    .main > img{
        margin-left: 45%;
        margin-top: 10%;
        width: 2rem;
    }
    .section1{
        grid-template-columns: repeat(1,375px);
        grid-template-rows: 291px 390px 291px 390px 500px;
    }
    .img1{
        grid-column: 1/2;
        grid-row: 1/2;
        background-image: url(./images/mobile/image-transform.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 375px;
        margin-top: -1.3rem;
    }
    .text1{
        grid-column: 1/2;
        grid-row: 2/3;
        padding-left: 0px;
        padding-top: 3rem;
        text-align: center;
    }
    h2{
        text-align-last: center;
        line-break: auto;
    }
    h5{
        padding-left: 35%;
    }
    .img2{
        grid-column: 1/2;
        grid-row: 3/4;
        background-image: url(./images/mobile/image-stand-out.jpg);
    }
    .text2{
        grid-column: 1/2;
        grid-row: 4/5;
        padding-left: 0px;
        padding-top: 3rem;
    }
    .text2 > p{
        text-align: center;
    }
    .box{
        grid-row: 5/6;
        grid-template-columns: 375px;
        grid-template-rows: 600px 600px;
    }
    .text3{
        grid-column: 1/2;
        grid-row: 1/2;
        background-image: url(./images/mobile/image-graphic-design.jpg);
    }
    .text4{
        grid-column: 1/2;
        grid-row: 3/4;
        background-image: url(./images/mobile/image-photography.jpg);
        background-size: 100%;
        margin-top: -38rem;
    }
    h3{
        padding-top: 50%;
        font-size: 1.5rem;
    }
    .text3 > p{
        font-size: 1rem;
    }
    .text4 > p{
        font-size: 1rem;
    }
    .article{
        margin-top: 19rem;
        grid-template-columns: 375px;
        grid-template-rows:10rem 60rem;
    
    }
    .title{
        grid-row: 1/2;
        grid-column: 1/2;
        padding-top: 0px;
    }
    #h4{
        font-size: 1rem;
        letter-spacing:0.3rem;
    }
    .box1{
        grid-row: 2/3;
        grid-column: 1/2;
        grid-template-rows: 20rem 20rem 20rem;
    }
    .Emily{
        grid-row: 1/2;
        grid-column: 1/2;
        width: 375px;
        grid-template-rows: 5rem 6rem 5rem;
    }#i1{
        margin-left: 6rem;
        margin-top: -1rem;
    }
    .text5{
        padding-top: 0rem;
        padding-left: 0px;
    }
    .name1{
        padding-left: 0px;
    }
    .Thomas{
        grid-row: 2/3;
        grid-column: 1/2;
        width: 375px;
        grid-template-rows: 5rem 6rem 5rem;
    }
    #i2{
        margin-top: -1rem;
        margin-left: 9.6rem;
    }
    .text6{
        padding-top: 0px;
    }
    .Jennie{
        grid-row: 3/4;
        grid-column: 1/2;
        width: 375px;
        grid-template-rows: 5rem 6rem 5rem;
    }
    .img5{
        padding-right: 0px;
    }
    .img5 > img{
        margin-top: -1rem;
        margin-left: 9.6rem;
    }
    .text7{
        padding-right: 0px;
        padding-top: 0px;
    }
    .name3{
        padding-right: 0px;
    }
    .section2{
        width: 375px;
        grid-template-columns: 187.5px 187.5px;
        grid-template-rows:  187.5px 187.5px;
        margin-top: 0px;
    }
    .img6{
        grid-column: 1/2;
        grid-row: 1/2;
        background-image: url(./images/mobile/image-gallery-milkbottles.jpg);
        background-size: 100%;
    }
    .img7{
        grid-column: 2/3;
        grid-row: 1/2;
        background-image: url(./images/mobile/image-gallery-orange.jpg);
        background-size: 100%;
    }
    .img8{
        grid-column: 1/2;
        grid-row: 2/3;
        background-image: url(./images/mobile/image-gallery-cone.jpg);
        background-size: 100%;
    }
    .img9{
        grid-column: 2/3;
        grid-row: 2/3;
        background-image: url(./images/mobile/image-gallery-sugar-cubes.jpg);
        background-size: 100%;
    }
    .footer{
        margin-top: -36rem;
    }
}