/* Page Fonts */
@font-face {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
  src: url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

.text {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
}

.sub-title {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.main-title,
.feature-title,
.code-resource,
.coder {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

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

body {
  width: 1440px;
  margin: 100px auto;
  line-height: 1.4;
  background-color: #fff;
}

/* header */
.feature-header {
  text-align: center;
  color: hsl(212, 6%, 44%);
}

.header-hl {
  font-size: 27px;
}

.main-title {
  display: block;
  font-size: 28px;
  color: hsl(234, 12%, 34%);
}

.header-text {
  font-size: 15px;
  margin: 16px;
}

.separator {
  display: block;
}

/* main features */
.feature-contanier {
  padding: 65px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 25px;
  row-gap: 30px;
}

.feature {
  background-color: #fff;
  border-top: 4px solid;
  border-radius: 3px;
  box-shadow: 1px 15px 15px rgba(18, 70, 143, 0.1),
    -1px 15px 15px rgba(18, 70, 143, 0.1);
  padding: 35px;
  width: 400px;
  height: 270px;

  /* component layout */
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.supervisor-box {
  grid-row: 1/-4;
  align-self: center;
  border-color: hsl(180, 62%, 55%);
}

.calculator-box {
  align-self: center;
  grid-column: 3;
  grid-row: 1/-4;
  border-color: hsl(212, 86%, 64%);
}

.team-box {
  border-color: hsl(0, 78%, 62%);
}

.karma-box {
  border-color: hsl(34, 97%, 64%);
}

.feature-text {
  font-size: 15px;
  margin-top: 5px;
  color: hsl(212, 6%, 44%);
}

.feature-title {
  color: hsl(234, 12%, 34%);
  font-size: 20px;
}

.feature-img {
  justify-self: end;
  align-self: end;
}

/* Footer */
.footer {
  text-align: center;
  color: hsl(212, 6%, 44%);
}

.code-resource:link,
.code-resource:visited {
  text-decoration: none;
  color: hsl(234, 12%, 34%);
}

.code-resource:hover,
.code-resource:active {
  color: #000;
  text-decoration: underline;
}

.coder {
  color: hsl(234, 12%, 34%);
}