@layer fonts{
   /* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
} 
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
}

@layer colors{
    :root{
        --white:hsl(0, 0%, 100%);
        --black:hsl(0, 0%, 0%);
        --gray-400: hsl(207, 23%, 72%);
        --gray-100:hsl(208, 28%, 91%);
        --blue-950:hsl(192, 100%, 9%);
        --pink-400:hsl(322, 100%, 66%);
        --purple-700:hsl(257, 40%, 49%);
        --magenta-400:hsl(300, 69%, 71%);
        --gradient-1:hsl(322, 100%, 66%);
        --gradient-2:hsl(265, 100%, 66%) (0%);
        --gradient-3:hsl(192, 100%, 49%);
        --gradient-4:hsl(47, 94%, 68%);
        
    }
}
@layer spaces{
:root{
  --s-8px: calc( 8 / 16 * 1rem);
  --s-16px: calc( 16 /16 *1rem);
  --s-24px: calc( 24 /16 *1rem);
  --s-32px:calc(32 /16 * 1rem);
  --s-40px: calc( 40 /16 *1rem);
  --s-56px: calc( 56 /16 *1rem);
  --s-64px: calc( 64 /16 *1rem);
  --s-36px: calc( 36 /16 *1rem);
  --s-56px: calc( 56 /16 * 1rem);
  --s-44px: calc( 44 /16 * 1rem);
  --s-80px: calc(var(--s-40px) + var(--s-40px));

  
}
}

@layer typography{
  :root{
    --fs-40px:calc(40 /16 * 1rem);
    --fs-24px:calc(24 /16 * 1rem);
    --fs-18px:calc(18 /16 * 1rem);
    --fs-16px:calc(16 /16 * 1rem);
    --fs-12px:calc(12 /16 * 1rem);
    --line-height-125: 1.25;
    --line-height-150:1.5;
    --letter-spacing:0px;
  }
}

@layer reset{
    /* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
}
body{
    font-family: 'Open sans', sans-serif;
    font-size: var(--fs-16px);
    font-weight: 400;
    line-height: var(--line-height-150);
    color: var(--white);
    background-image: url("images/bg-mobile.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--purple-700);
}

header img{
  transform: translateX(-40px);
}

.title{
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-24px);
  font-weight: 600;
  line-height: var(--line-height-125);
  padding-bottom: var(--s-24px);
}
.btn-register{
  font-size: var(--fs-12px);
  line-height: inherit;
  padding:0.7rem 5rem;
  margin-top:var(--s-32px);
  border-radius: 20px;
  border: 0;
  color: var(--purple-700);
  cursor: pointer;
}
.btn-register:hover{
  background-color: var(--magenta-400);
  color: var(--white);
}
.container{
  margin: var(--s-40px) var(--s-36px);
}
.introduction{
  display: grid;
  grid-template-columns: 1fr;
  
}
.ilustration{
 padding: var(--s-64px) 0  var(--s-56px);
}
.description{
 text-align: center;
}
.social-icons{
  display: flex;
  list-style: none;
  justify-content: center;
  gap: var(--s-16px);
  padding: 0 0 var(--s-40px) 0;
  flex-wrap: wrap;
}
.social-icons a{
  border: 2px solid var(--white);
  border-radius: 50%;
  padding: 8px;
}
.social-icons a:hover{
   border: 2px solid var(--pink-400);
}
.fa-brands{
  color: white; 
}
 .fa-brands:hover{
    color: var(--pink-400);
 }

@media(width>767px){
  body{
    font-size: var(--fs-18px);
  }
  .container{
    margin: var(--s-40px)  var(--s-80px);
  }
  hgroup{
    padding: var(--s-40px) var(--s-44px);
  }
  .title{
    font-size: var(--fs-40px);
  }
  .btn-register{
    margin-top: var(--s-40px);
    padding: 0.9em 3.9em;
  }
} 


@media(width>800px){
  body{
    background-image: url(images/bg-desktop.svg);
  }
  .container{
    margin: var(--s-64px) 84px 43px;
  }
  .introduction{
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap:var(--s-56px);
  } 

  hgroup{
    padding: 0;
    text-align: left;
    max-width: 520px;
  }
  .social-icons{
    justify-content: end;
    margin-right: 84px;
  }
}