.quicksand-normal {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.sour-gummy-bold {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

:root{
    --med-blue:rgb(146, 182, 255);
    --light-blue:rgb(242, 247, 252);
    --orange: rgb(253, 151, 119);
    --yellow-orange: rgb(254, 209, 54);


}

body {
    font-size:16px;
      font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding:1rem;
  max-width:1024px;
  margin:0 auto;
  

}

h1,h2,h3,h4,h5,h6 {
      font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

header {
    display:grid;
    grid-template-columns: 1fr 2fr 1fr;
    background-color:var(--med-blue);
    padding:2rem;
    align-items:center;

}

header ul {
    display:flex;
    gap:4rem;

}

button {
    color:white;
    background-color:var(--orange);
    width:7rem;
    padding:.5rem 1rem;
    border-radius:.5rem;
    margin-left:auto;
    border:1px solid white;
}

button:hover {
    background-color:white;
    color:var(--orange);
}

.hero {
    background:url("../img/pic_00118_.png") center center no-repeat;
    height:30rem;
}

.hero {
    text-align:center;
    
}

.hero h1 {
    font-size:5rem;
    color:white;
    background-color:rgba(0,0,0,.5);
    padding-bottom:.5rem;
}
.hero button {
    margin-top:2rem;
}

.learning {
    height:25rem;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:1fr 1fr;

}

.learn {
    text-align:center;
    padding:2rem;

}

.learn img {
    height:8rem;
}



.join {
    height:10rem;
    padding:2rem;
    text-align:center;
}

.join h2 {
    font-size:5rem;
    padding-bottom:1rem;
}


.plans {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align:center;
    gap:1rem;
    background-color: var(--med-blue);
    padding-top:5rem;
    padding-bottom:5rem;
    
}

.plan {
    background:var(--light-blue);
    width:70%;
    margin:0 auto;
    padding:2rem 1rem 6rem;
}

.plan:hover {
    background:darkblue;
    color:white;

}

.plan h3 {
    font-size:2rem;
    text-decoration:underline;
    margin-bottom:1rem;
}

.plan p {
    font-size:1rem;
    margin-bottom:1rem;
}


.plan img {
    height:10rem;
    
    
    
}

footer {
    padding:1rem;
    text-align:center;
}