@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap'); 

:root{
  --cyan:hsl(179, 62%, 43%);
  --bright-yellow:hsl(71, 73%, 54%);
  --light-gray:hsl(203, 44%, 93%);
  --grayish-blue: hsl(218, 22%, 67%);
}

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

html{
  font-size: 62.5%;
}

body{
  font-family: 'Karla', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}

.page-wrapper{
  background-color: var(--light-gray);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content-wrapper{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-wrapper{
  display: flex;
}

.card{
  max-width: 70rem;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 3px 9px 13px 1px rgba(0,0,0,0.21);
}

.card__info{
  padding: 5rem ;
  background-color: white;
  
}

.card__heading-main{
  color: var(--cyan);
  font-size: 2.8rem;
  font-weight: 700;
}

.card__heading-secondary{
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bright-yellow);
  margin:2rem 0 1rem 0;
}

.card__info--text{
  color: var(--grayish-blue);
}

.card__subscription{
  flex:1;
  padding:5rem;
  background-color: var(--cyan);
  color: white;

}

.card__heading-tertiary{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.card__subscription--price-big{
  font-size: 4rem;
}

.card__subscription--price-small{
  font-size: 1.4rem;
  opacity: .65;
}

.card__subscritpion--info{
  opacity: .85;
}

.card__button-container{
  text-align: center;
  margin-top: 3rem;
}

.card__button{
  color: inherit;
  background-color: var(--bright-yellow);
  border:none;
  width: 100%;
  padding: 2rem 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.8rem;
}

.card__button:hover{
  background-color: rgba(192,223,52,.8);
}
.card__why-us{
  flex:1;
  padding: 5rem;
  background-color: #4bbebc;
  color: white;
}

.card__why-us div{
  opacity: .85;
}

.attribution { 
  font-size: 1.4rem; 
  text-align: center;
  padding: 1.5rem; 
  margin-top: 3rem;
}
.attribution a { 
  color: hsl(228, 45%, 44%); 
}


@media screen and (max-width:550px){
  html{
    font-size: 56.25%;
  }

  .card__info, .card__subscription, .card__why-us{
    padding: 2.5rem;
  }

  .flex-wrapper{
    flex-direction: column;
  }
}