:root{
    --ff-sans-headings: 'Poppins', sans-serif;
    --ff-sans-body: 'Open Sans', sans-serif;

    --fw-400: 400;
    --fw-600: 600;
 
    --fs-regular: 1rem;
    --fs-large: 1.5rem;

    --clr-100: hsl(0, 0%, 100%);
    --clr-200: hsl(300, 69%, 71%);
    --clr-300: hsl(257, 40%, 49%);

    --transition-base: all .2s 0s ease-in-out;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height*/
html, 
body{
    height:100%
}
    /*4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

body{
    font-family: var(--ff-sans-body);
    font-size: var(--fs-regular);
    font-weight: var(--fw-400);
    background-color: var(--clr-300);
    color: var(--clr-100);

    background-image: url(file:///Users/brooke/Desktop/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

@media(min-width: 767px){
    body{
        background-image: url(file:///Users/brooke/Desktop/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg);
        background-position: 100%;
        background-size: cover;
    }
}

.wrapper{
    display:grid;
    place-content: center;
    margin: 2rem;
}

.landing-page__content{
    display: grid;
    gap: 3rem;
}

@media(min-width: 767px){
    .landing-page__content{
        grid-template-columns: 1.5fr 1fr;
        align-self: center;
    }
}

.landing-page{
    display: grid;
    gap: 3rem;
    padding: 2rem;
}

.landing-page__logo{
    width: 100%;
    height: auto;
    max-width: 200px;
    max-height: 40px;
}

.landing-page__content__img{
    height: auto;
}

.landing-page__content__details{
    display: grid;
    gap: 1.5rem;
    text-align: center;

    & h1{
        font-size: var(--fs-large);
        font-weight: var(--fw-600);
    } 
}

@media(min-width: 767px){
    .landing-page__content__details{
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.landing-page__links{
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    font-size: var(--fs-regular);
    cursor: pointer;

    & a{
        color: var(--clr-100);
        text-decoration: none;
    }

    & i:hover{
        color: var(--clr-200);
        border-color: var(--clr-200);
        transition: var(--transition-base);
    }
}

@media(min-width: 767px){
    .landing-page__links{
        justify-content: end;
    }
}

.icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--clr-100);
    border-radius: 50%;
}

.register-button{
    display: inline-block;

    & button{
        font-size: var(--fs-regular);
        padding: 0.75rem 4rem;
        border-radius: 100vw;
        box-shadow: 0 3px 10px rgb(0 0 0/ 0.2);
        border: 0;
        color: var(--clr-300);
        cursor: pointer;
    }

    & button:hover{
        background-color: var(--clr-200);
        color: var(--clr-100);
        transition: var(--transition-base);
    }
}