* {
  font-family: monospace;
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template: auto 1fr / 1fr;
}

h1 {
  text-align: center;
}

.card-container {
  /* background-color: lightblue; */

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
}

.card {
  /* background-color: lightgray; */
  padding: 2rem;
  border-radius: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 2rem;

  font-weight: bold;
}

.temp {
  font-size: 2rem;
}

.temp-group {
  font-size: 1.5rem;
}

.Cold {
  background-image: linear-gradient(to top right, #5895f7, #aff5fa);
}

.Mild {
  background-image: linear-gradient(
    to top right,
    lightgreen,
    rgb(210, 246, 205)
  );
}

.Hot {
  background-image: linear-gradient(to top right, #fd8443, #ecf983);
}