style.css

/* This file uses a modular scale with 1.2 ratio */

:root {
  --very-dark-blue: hsl(216, 12%, 8%);
  --dark-blue: hsl(213, 19%, 18%);
  --medium-grey: hsl(216, 12%, 54%);
  --light-grey: hsl(217, 12%, 63%);
  --white: hsl(0, 0%, 100%);
  --orange: hsl(25, 97%, 53%);
  --warning: #BD1B06;
  --type-face: 'Overpass', sans-serif;
}

* {
  font-family: var(--type-face);
  margin: 0;
  padding: 0;
  border: none;
  /* outline: 1px solid lightgreen; */
}

input[type=radio] {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.radio-btn label {
  pointer-events: none;
}

/******** Layout **********/
.container {
  min-height: 100vh;
}

.card {
  border-radius: 2.488em;
  padding: 2.074em;
  width: 75%;
  max-width: 22.19em;
}

.star {
  width: 1.2em;
  height: 1.15em;
  border-radius: 50%;
  padding: 1em;
  margin-bottom: 1.728em;
}

.card-heading {
  margin: 0.482em 0;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.579em;
  justify-content: space-between;
}

.radio-btn {
  height: 3.583em;
  width: 3.583em;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s linear;
}

.btn {
  border-radius: 2.441em;
  padding: 0.833em 0;
  width: 100%;
  cursor: pointer;
  margin: 1em 0 0;
  transition: background-color 0.3s linear;
}

.rate-output {
  padding: 0.579em 1em;
  margin: 2.074em 0 1em;
  border-radius: 2.074em;
}

.warning {
  padding: 1em 1.2em;
  border-radius: 1em;
  margin-bottom: 0.833em;
  font-size: 1.2em;
  width: 18.488em;
}

/******** Type **********/
body {
  font-size: calc(12px + 0.4vw);
}

.card-heading {
  font-size: 2.074em;
}

.card-body {
  line-height: 1.72;
}

.btn {
  font-size: 1em;
}

.radio-btn label {
  font-size: 1.2em;
  font-weight: 700;
}

/******** Color **********/
.container {
  background-color: var(--very-dark-blue);
}

.card {
  background-color: var(--dark-blue);
}

.card-heading {
  color: var(--white);
}

.card-body {
  color: var(--light-grey);
}

.radio-btn {
  color: var(--light-grey);
  background-color: hsl(216, 12%, 22%);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.radio-btn:not(.hover-off):hover {
  background-color: var(--orange);
  color: var(--white);
}

.btn {
  background-color: var(--orange);
  color: var(--white);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.btn:hover {
  background-color: var(--white);
  color: var(--orange);
}

.selected {
  background-color: var(--light-grey);
  color: var(--white);
}

.rate-output {
  color: var(--orange);
}

.warning {
  background-color: var(--warning);
  color: white;
}

/* Utility Classes */
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.my-1 {
  margin: 1em 0;
}

.light-bg {
  background-color: hsl(216, 12%, 22%);
}

.text-center {
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
}

.no-selection {
  -webkit-user-select: none;
  user-select: none;
}