/* Universal Selector to remove default browser settings */
* {
  padding: 0rem;
  margin: 0rem;
  box-sizing: border-box;
}

@font-face {
  font-family: "Main";
  src: url(./assets/fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: "Light";
  src: url(./assets/fonts/Poppins-Light.ttf);
}

@font-face {
  font-family: "Bold";
  src: url(./assets/fonts/Poppins-SemiBold.ttf);
}

/* CSS Variables */
:root {
  /*Primary */

  --Red: hsl(0, 78%, 62%);
  --Cyan: hsl(180, 62%, 55%);
  --Orange: hsl(34, 97%, 64%);
  --Blue: hsl(212, 86%, 64%);

  /*Neutral */

  --Very-Dark-Blue: hsl(234, 12%, 34%);
  --Grayish-Blue: hsl(229, 6%, 66%);
  --Very-Light-Gray: hsl(0, 0%, 98%);

  height: 100%;
}

html {
  font-size: 15px;
}

body {
  font-family: "Main";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: var(--Very-Light-Gray);
}

header {
  margin: 0 auto;
  width: 40%;
  text-align: center;
  margin-bottom: 60px;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

article {
  display: flex;
  flex-direction: column;
  width: 350px;
  padding: 32px;
  border-radius: 5px;
  box-shadow: 0 10px 30px -10px var(--Grayish-Blue);
}

.supervisor {
  border-top: 4px solid var(--Cyan);
}

.supervisor,
.column {
  margin-right: 30px;
}

.team-builder {
  margin-bottom: 30px;
  border-top: 4px solid var(--Red);
}

.karma {
  border-top: 4px solid var(--Orange);
}

.calculator {
  border-top: 4px solid var(--Blue);
}

article img {
  align-self: flex-end;
}

h1 {
  font-family: "Light";
  font-weight: 200;
  font-size: 29px;
  color: var(--Very-Dark-Blue);
}

header h2 {
  margin-bottom: 20px;
  font-size: 30px;
}

h2 {
  font-family: "Bold";
  font-weight: 600;
  font-size: 19px;
}

p {
  font-family: "Light";
  font-size: 13px;
  color: var(--Grayish-Blue);
  font-weight: 200;
}

article > h2 {
  margin-bottom: 10px;
}

article p {
  margin-bottom: 35px;
  line-height: 1.8;
}

/* Extra small devices [iPhone SE - 375](phones, 600px and down) */
@media only screen and (max-width: 991px) {
  body {
    height: fit-content;
  }

  header,
  article {
    width: 80%;
  }

  .column {
    width: 100%;
  }

  header {
    margin: 60px 40px 60px 40px;
  }

  .card-container {
    flex-direction: column;
    justify-content: center;
    margin-bottom: 60px;
  }

  .column {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .supervisor,
  .team-builder,
  .karma,
  .calculator {
    margin: 0;
    margin-bottom: 30px;
  }

  img {
    width: 45px;
    height: 45px;
  }

  h1,
  header h2 {
    font-size: 24px;
  }

  header p {
    font-size: 15px;
  }

  p {
    font-size: 12.4px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  article {
    width: 300px;
  }
}