style.css

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    /* Primary Colors */
    --Violet: hsl(257, 40%, 49%);
    --SoftMagenta: rgb(232, 130, 232); 
    --HeaderColor: hsl(0, 0%, 100%);
    --TextColor: hsl(300, 100%, 99%);
    --ButtonShadow: hsl(256, 32%, 35%);

    /* Typography - Headings 400, 600 */
    --Poppins: 'Poppins', sans-serif;
    /*  Typography - Body (400) */
    --OpenSans: 'Open Sans', sans-serif;
}

/*  Small CSS Reset */
html {
  font-size: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

* {
    outline: none;
    -moz-outline-style: none;
}

/* Tags Section */

body {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  background-color: var(--Violet);
  background-image: url(./images/bg-mobile.svg);
  background-position: top;
  background-repeat: no-repeat;
  
}

h1 {
    font-family: var(--Poppins);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--HeaderColor);
    line-height: 1.5;
}

p {
    font-family: var(--OpenSans);
    font-weight: 400;
    color: var(--TextColor);
    line-height: 1.4;
    opacity: 0.8;
}


/* Logo Section */
.logo {
    width: 100%;
    height: 100%;
    
}

.logo img {
    margin: 1.875rem 0 0 0.35rem;
    width: 11.4375rem;
    height: 1.875rem;
}



/* Main Section */

.container__image {
    text-align: center;

}

.container__image img {
    padding: 3.5rem 0rem 2rem 0;
    max-width: 77%;
}

.container__text {
    padding: 0 1rem;
    text-align: center;
}

.container__text p {
    padding-bottom: 0.625rem;
}

.container__text__button {
    width: 13rem;
    background-color: var(--HeaderColor);
    color: var(--Violet);
    border-style: none;
    box-shadow: 0px 3px 5px 3px var(--ButtonShadow);
    border-radius: 1.25rem;
    padding: 0.625rem;
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 5rem;
    transition: all 0.1s ease-in-out 0s;
}


.container__text__button:hover {
    background-color: var(--SoftMagenta);
    color: var(--HeaderColor);
}


/* Social Image Section */
.social__image__container {
    text-align: center;
    display: block;
}

.social__image__container img:nth-child(2) {
    margin: 0rem 0.5rem;
}

.social__image {
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid black;
    border-radius: 100%;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(98deg) brightness(107%) contrast(106%);
    padding: 0.4rem;
    transition: all 0.1s ease-in-out 0s;
}

.social__image:hover {
    filter: invert(48%) sepia(23%) saturate(5559%) hue-rotate(295deg) brightness(107%) contrast(93%);
}

/* Media Queries for Desktop */

@media (min-width : 23.5rem) {
    body {
        background-image: url(./images/bg-desktop.svg);
        background-position: 0% 0%;
    }
}

@media (min-width : 54rem) {

    h1 {
        font-size: 2.5rem;
        font-weight: 600;
        max-width: 30.6rem;
    }

    p {
        font-size: 1.125rem;
        max-width: 32rem;
    }

    .logo img {
        width: 13.5rem;
        height: 3.5rem;
        margin-left: 4rem;
        margin-top: 3rem;
    }

    .container {
        display: flex;
    }

    .container__image {
        min-width: 50%;
        flex: 1 1;
    }

    .container__image img {
        max-width: 100%;
        margin: 1rem 4.5rem 0rem 4.5rem
    }

    .container__text {
        text-align: left;
        padding: 4.5rem 3rem 7rem 6.5rem;
        flex: 1 1;
    }

    .container__text__button {
        width: 12.5rem;
        height: 3.5rem;
        border-radius: 28px;
    }

    .social__image__container {
        position: absolute;
        right :7%;
        bottom: 5%;
    }

    .social__image {
        width: 2.2rem;
        height: 2.2rem;
    }
}

/* Styling for Attribution in the Footer section */
.attribution { font-size: 11px; text-align: center; visibility: hidden;}
.attribution a { color: hsl(228, 45%, 44%); }