@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');

*{
  /* # Front-end Style Guide */
  /* ## Layout (The designs were created to the following widths:) */
  --mobile: 375px;
  --desktop: 1440px;
  --font-size: 15px;

  /* ### Colors: Primary */
  --brightOrange: hsl(31, 77%, 52%);
  --darkCyan: hsl(184, 100%, 22%);
  --vDarkCyan: hsl(179, 100%, 13%);
  
  /* ### Colors: Neutral */
  --transparentWhite: hsla(0, 0%, 100%, 0.75); /*(paragraphs)*/
  --vLightGray : hsl(0, 0%, 95%); /*(background, headings, buttons)*/

  /* ### Font */
  --font-pri: 'Lexend Deca'; /* Weights: 400 */
  --font-sec: 'Big Shoulders Display'; /* Weights: 700 */
}

/***** Mixed Styles *****/
body, .card-info{
  margin: 0;
}

body, .main-ctn > div{
  display: flex;
}

body, .btn{
  background: var(--vLightGray);
}

/***** General Styles *****/
body{
  min-height: 100vh;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  color: var(--transparentWhite);
  font-size: var(--font-size);
}

a{
  color: unset;
  text-decoration: none;
}

main{
  width: var(--mobile);
  margin: 7.5vh 10vw; /* ADJUST: Margin of main-ctn */
}

main > div{
  flex-direction: column; /* MOBILE: col || DESKTOP: row */
  justify-content: center;
}

.main-ctn section{
  padding: 3rem 2rem 3rem 2.5rem; /* ADJUST: Spacing of contents */
}

/***** Specific Styles *****/

/* ## Card Title */
.card-title{
  text-transform: uppercase;
  font-family: var(--font-sec);
  color: var(--vLightGray);
  font-size: 2.25rem;
  margin: 1.25rem 0;
}

/* ## Card Info */
.card-info, .btn{
  font-family: var(--font-pri);
}

.card-info{
  font-size: 0.9rem;
  line-height: 1.3rem;
  padding-right: 2rem;
}

/* ## Card Btn */
.btn{
  border: 3px solid var(--vLightGray);
  padding: 0.75rem 2.25rem;
  border-radius: 30px;

  box-sizing: border-box;         /* Opera/IE 8+ */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

.btn-ctn{
  margin: 2.5rem 0 0;
}

.btn:hover, .btn:active{
  color: var(--transparentWhite) !important;
  background: unset;
  border: 3px solid var(--transparentWhite);
  cursor: pointer;
}

/***** CTN-1 *****/
.card-1-container{ background: var(--brightOrange); }
section:nth-child(1) > div.btn-ctn > .btn{ color: var(--brightOrange); }

.main-ctn section:nth-child(1){
  border-radius: 15px 15px 0 0;
}

/***** CTN-2 *****/
.card-2-container{ background: var(--darkCyan); }
section:nth-child(2) > div.btn-ctn > .btn{ color: var(--darkCyan); }

/***** CTN-3 *****/
.card-3-container{ background: var(--vDarkCyan); }
section:nth-child(3) > div.btn-ctn > .btn{ color: var(--vDarkCyan); }

.main-ctn section:nth-child(3){
  border-radius: 0 0 15px 15px ;
}