style.scss

// FONTS
$font: "Rubik", sans-serif;
$bold-weight: 700;
$normal-weight: 400;
$thin-weight: 300;
// FONT SIZE
$bigger-font: 5.4rem;
$normal-font: 4.2rem;
$small-font: 2.8rem;

// COLORS
$color-white: #eef4ed;
$text-color: #0b2545;
$primary-color: #134074;
$secondary-color: #8da9c4;
$third-color: #fdca40;

// SPACE
$small-space: 1rem;
$normal-space: 4rem;
$bigger-space: 5rem;

:root {
  font-size: 62.5%;
}

* {
  font-family: $font;
  box-sizing: border-box;
  background-color: $color-white;
  padding: 0;
  margin: 0;
  color: $text-color;
}

body {
  h1 {
    font-size: $bigger-font;
    color: $primary-color;
    margin-bottom: $bigger-space;
    span {
      font-size: 2.4rem;
      font-weight: $normal-weight;
    }
  }

  h2 {
    font-size: $normal-font;
    color: $primary-color;
    margin-bottom: $bigger-space;
    font-weight: $bold-weight;
  }
  h3 {
    font-size: $small-font;
    font-weight: $normal-weight;
  }
}

// UTILITIES

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem;
  > * {
    width: 100%;
  }
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.text-center {
  text-align: center;
}
.hidden {
  display: none;
}

// BUTTONS
.btn {
  font-size: 1.8rem;
  padding: $small-space 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid $secondary-color;
  margin-bottom: $small-space;
  text-decoration: none;
  color: $secondary-color;
  background-color: white;
  &:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(141, 169, 196, 0.5);
    transform: translateY(-0.1rem);
    transition: transform 150ms;
  }
  &[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
}

//FORMS
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  input {
    margin-bottom: 1rem;
    width: 20rem;
    padding: 1.5rem;
    font-size: 1.8rem;
    border: none;
    box-shadow: 0 0.1rem 1.4rem 0 rgba(141, 169, 196, 0.5);
    &::placeholder {
      color: #aaa;
    }
    &:focus {
      outline-color: #134074;
    }
  }
}