@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Big+Shoulders:opsz@10..72&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend+Deca:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Big+Shoulders:opsz@10..72&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend+Deca:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');

:root{
    --Violet: hsl(257, 40%, 49%);
    --Soft_Magenta: hsl(300, 69%, 71%);
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body{
    width: 1440px;
    height: 800px;
    background-color: var(--Violet);
    background-image: url('./images/bg-desktop.svg');
    background-repeat: no-repeat;
    
}
main{
   width: 100%;
   height: 100%;
    & #logo{
        position: absolute;
        top: 8%;
        left: 5.5%;
        width: 200px;
    }
    & #illustration_mockups{
        position: absolute;
        transform: translate(12%,39%);
        width: 700px;
    }

    & #description{
        position: absolute;
        top: 31%;
        right: 5%;
        width: 37%;
        color: white;
        & h1{
            font-size: 2.7rem;
            line-height: 1.5;
            font-family: "Open Sans", sans-serif;
        }
        & p{
            font-size: 1.08rem;
            opacity: 0.7;
            margin: 1rem 0;
            font-family: "Poppins", sans-serif;
        }
        & button{
            color: var(--Violet);
            font-weight: 600;
            font-size: 1rem;
            background-color: white;
            width: 170px;
            height: 50px;
            border-radius: 25px;
            box-shadow: 1px 2px 8px black;
            margin-top: 0.4rem;
            &:hover{
                cursor: pointer;
                background-color: var(--Soft_Magenta);
                color: white;
            }
        }

    }

    & #icons{
        position: absolute;
        left: 83%;
        top: 91%;
        width: 15%;
        & i{
            color: white;
            margin-left: 1rem;
            font-size: 1rem;
            padding: 0.7rem;
            border: 1px solid white;
            border-radius: 50%;
            &:hover{
                cursor: pointer;
                color: var(--Soft_Magenta);
                border-color:var(--Soft_Magenta);
            }
        }
    }
}

@media (max-width:375px) {
    body{
        width: 375px;
        height: auto;
        background-image: url('./images/bg-mobile.svg');
    }
    main{
       width: 100%;
       height: 100%;
        & #logo{
            top: 4%;
            left: 6%;
            width: 150px;
        }
        & #illustration_mockups{
            transform: translate(14%,60%);
            width: 79%;
        }
        & #description{
            top: 50%;
            right: 0%;
            width: 100%;
            color: white;
            text-align: center;
            & h1{
                font-size: 1.7rem;
                padding: 0 2.7rem;
            }
            & p{
                font-size: 1.1rem;
                padding: 0 2.7rem;
            }
            & button{
                margin-top: 0.7rem;
            }
    
        }
        & #icons{
            left: 25%;
            display: flex;
            margin-bottom: 1rem;
        }
    }   
}