styles.css

.attribution { 
    display:none;
}
/* 

body {
    background-color:hsl(257, 40%, 49%);
    background-image:url(images/bg-desktop.svg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center ;
}
.container {
    width:80%;
    margin:3rem auto;

}
.main-section{
    display : flex;
    justify-content:space-between;
    margin-top:6rem;
}
.main-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    font-family: 'Poppins', sans-serif;
    color: white;
    width:40%;
}
.display-image img {
    width:120%;
}
.heading {
    font-weight: 600;
    font-size: 2.9rem;
    margin:3rem 0 0 0;
}
.content {
    font-size: 1.3rem;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}
button {
    align-self:flex-start;
    width:12rem;
    height:4rem;
    background-color:white;
    border:1px solid white;
    border-radius:2rem;
    color:hsl(257, 40%, 49%);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem;
    margin-top: 1rem;
}
.social-media {
    display:flex;
    justify-content:flex-end;
}*/
.social-media {
    display:flex;
    margin-top:4rem;
    justify-content:center;
}
.social-media svg {
    width:30px;
    height:30px;
    fill:white;
    margin:0 10px;
    transition:all 0.2s ease-in-out;

} 
body {
    background-color:hsl(257, 40%, 49%);
    background-image:url(images/bg-mobile.svg);
    background-repeat:no-repeat;
    background-size:contain;
}
.container {
    margin: 2rem 2rem;
}
.main-section {
    display:flex;
    flex-direction: column;
    margin-top:3.3rem;
}
.logo img{
    width:7rem;
}
.display-image img {
    width: 100%;
}
.main-content {
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin:3.5rem 0 0 0;
    text-align:center;
}
.content {
    font-size: 1.3rem;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    text-align:center;
}
button {
    height:4rem;
    font-size:1rem;
    width:13rem;
    background-color:white;
    border:0px;
    border-radius:2rem;
    color:hsl(257, 40%, 49%);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-weight:400;
    margin-top: 1rem;
    box-shadow: 1px 5px 16px -7px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 5px 16px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 5px 16px -7px rgba(0,0,0,0.75);
transition:all 0.2s ease-in-out;
}
.social-media svg:hover {
    fill:hsl(300, 69%, 71%);
}
button:hover {
    color:white;
    background-color:hsl(300, 69%, 71%);
    cursor:pointer;
}
@media (min-width:1000px) and (max-width: 1400px) {
    body {
        background-color:hsl(257, 40%, 49%);
        background-repeat:no-repeat;
        background-size:cover;
    }
    .main-section {
        flex-direction: row;
        margin-top:7rem;
    }
    .logo img{
        width:20%;
    }
    .main-content {
        align-items:flex-start;
        margin-left:3rem;
        justify-content:flex-start;
    }
    .heading {
        font-size: 2rem;
        text-align:left;
        margin-top:2rem;
    }
    .content {
        font-size: 1.2rem;
        text-align:left;
    }
    .display-image {
        width:1700px;
    }
    .social-media {
        display:flex;
        margin-top:4rem;
        justify-content:flex-end;
    }
}
@media (min-width:1400px) {
    body {
        background-image:url("images/bg-desktop.svg");
        background-size:cover;
    }
    .container {
        margin:4rem auto 0 auto;
        width:90%;
    }
    .main-section {
        flex-direction: row;
        margin-top:7rem;
        margin-top: 5rem;
    }
    .logo img{
        width:15rem;
    }
    .main-content {
        align-items:flex-start;
        margin-left:3rem;
        justify-content:flex-start;
        /* margin-right:3rem; */
    }
    .heading {
        font-size: 2.5rem;
        text-align:left;
        margin-top:3rem;
        margin-right:0rem;
    }
    .content {
        font-size: 1.2rem;
        text-align:left;
        /* width:80%; */
    }
    .display-image {
        width:100%;
    }
    .display-image img {
        min-width:700px;
    }
    .social-media {
        display:flex;
        margin-top:1rem;
        justify-content:flex-end;
    }
    .social-media svg {
        width:35px;
        height:35px;
    }
    button {
        margin-top:1rem;
        width:13rem;
        height:3.5rem;
        font-size:1rem;
    }

}