*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');
/* vou usar: 500, 700, 800 */

:root {

/* Lembrar de usar a transparência - Hint: look into using `hsla()` */

    /* primary */
--p-red: rgb(255, 87, 87);
--p-yellow: hsl(39, 100%, 56%);
--p-green: hsl(166, 100%, 37%);
--p-blue: hsl(234, 85%, 45%);
/* gradient */
--g-blue: rgb(120, 87, 255);
--g-lighblue: rgb(46, 43, 233);
--g-violet: rgb(78, 33, 202);
--g-persianblue: rgba(36, 33, 202, 0);
/* neutral */
--n-white: hsl(0, 0%, 100%);
--n-paleblue: hsl(221, 100%, 96%);
--n-lightlavender: hsl(241, 100%, 89%);
--n-darkblue: hsl(224, 30%, 27%);
}

body {
    font-family: "Hanken Grotesk", sans-serif;
    font-style: normal;
    font-size: 1.8rem;
}

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
    text-align: center;
    background-color: var(--white);
    padding: 4rem 1rem;
}

.card_principal {
    display: flex;
    flex: column wrap;
    gap: 0.2rem;
}

/* card1 */
 .card1 {
    display: flex;
    flex-direction: column;
    min-height: 50vh;
    width: 35vh;
    border-radius: 1.4rem;
    padding-bottom: 2rem;
    margin: 0 auto;
    background: linear-gradient(
 rgba(121, 87, 255, 1) 5%,
rgba(46, 43, 233, 1) 45%,   
rgba(36, 33, 202, 1) 75%,
rgba(78, 33, 202, 1) 100%

);
} 

.circulo {
    background-color: rgba(78, 33, 202, 0.555);
    /* max-width: 100%; */
    margin: 1.5rem auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 100%;
    width: 9rem;
    height: 10.5rem;
    place-content: center;
}

.card1 > h1 {
    font-size: 1rem;
    color: var(--n-lightlavender);
    padding: 1.7rem;
    margin: auto;
    font-weight: 500;
}

.card1 > .circulo h2 {
    color: var(--n-white);
    font-size: 3.1rem;

}

.p100{
    font-size: 0.7rem;
    color: var(--n-lightlavender);
    font-weight: 500;
}

.card1 > h3 {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0;
    color: var(--n-white);
    font-weight: 500;
}

.card1 > p {
    font-size: 0.9rem;
    color: var(--n-lightlavender);
    padding: 0.7rem;
    font-weight: 300;
}

.card1 > .p3{ 
    padding: 0.7rem 3.4rem;
    margin: 0 auto;
}

/* card2 */

.card2 > ul {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    list-style: none;
}

.card2 > ul {
    gap: 1rem;
}

.card2 {
    flex-direction: column;
    width: 35vh;
    min-height: 50vh;
    border-radius: 1.4rem;
    padding: 0 1.5rem;
    padding-bottom: 4.5rem;
    box-shadow: 0.5rem 1.1rem 2.5rem var(--n-lightlavender);
}

.card2 > h4 {
    text-align: left;
    color: var(--n-darkblue);
    font-size: 1.2rem;
    padding: 1.5rem 0;
    margin: auto;
}

img {
    padding-right: 1rem;
}
.reaction, .memory, .verbal, .visual {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
}

.reaction {
    background-color: rgba(255, 87, 87, 0.068);
    color: rgb(233, 78, 78);
}

.memory {
    background-color: rgba(255, 177, 31, 0.089);
    color: var(--p-yellow);
}

.verbal {
    background-color: rgba(0, 189, 145, 0.089);
    color: var(--p-green);
}

.visual {
    background-color: rgba(17, 36, 212, 0.068);
    color: var(--p-blue);
}

.blue_p {
    color: var(--n-darkblue);
    font-weight: 800;
}

.grey_p{
    color: var(--n-lightlavender);
    font-weight: 800;
}

.reaction, .memory, .verbal, .visual {
    font-size: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

 img,
 .reaction,
  .memory,
  .verbal, 
  .visual {
    vertical-align: middle;
 }

 
.btn {
    background-color: var(--n-darkblue);
    color: var(--n-white);
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 1.5rem 0.5rem;
    border-radius: 10rem;
    font-size: 0.9rem;
}

.btn:hover {
    cursor: pointer;
}
footer {
    .attribution {
        margin-top: 5rem;
    }
    .attribution { font-size: 0.9rem; text-align: center; }
        .attribution a { color: hsl(228, 45%, 44%); }
    }


/* media queries */

 /* @media screen and (min-width: 768px) {
    body {
      padding: 9rem 1rem;
      
    }
  }
  
  @media screen and (min-width: 1440px) {
    body {
      padding: 6rem 1rem;
    }
  }