style.css

/* Components */
body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

.container {
  max-width: 1024px;
  margin: auto;
  box-sizing: border-box;
}

.btn {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  border-radius: 0.25rem;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 4px #999;
  outline: none;
}

.btn--primary {
  color: #ffffff;
  background-color: #2196f3;
}

.btn--outline {
  color: #8e44ad;
  border: 2px solid #8e44ad;
  padding: 8px 14px;
  background-color: transparent;
}

.btn--success {
  color: #ffffff;
  background-color: #2ecc71;
}

.btn--danger {
  color: #ffffff;
  background-color: #e74c3c;
}

.btn--warning {
  color: #ffffff;
  background-color: #f39c12;
}

/* Utilities */
.flex {
  display: flex;
}

.space-between {
  justify-content: space-between;
}

.border {
  border: 1px solid;
}

.px-xs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-xs {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-sm {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-sm {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-md {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-md {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-lg {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-lg {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.text-center {
  text-align: center;
}