client/src/Stylesheets/...

App.scss

@import "Header";
@import "WeatherForm";
@import "Container";
@import "WeatherPanels";

@font-face {
  font-family: MajorMonoDisplay;
  src: url("../assets/Fonts/MajorMonoDisplay-Regular.ttf");
}

@font-face {
  font-family: ShareTechMono;
  src: url("../assets/Fonts/ShareTechMono-Regular.ttf");
}

.App {
  display: grid;
  grid-template-columns: 1fr 9fr 1fr;
  font-family: ShareTechMono, serif;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

Container.scss

.weather {
  background: white;
  grid-column: 2/3;
  width: 100%;

  display: grid;
  grid-row-gap: 50px;
}

Header.scss

.annotation {
    font-size: 8px;
    font-family: ShareTechMono, serif;
}

.header {
    font-family: MajorMonoDisplay, serif;
    text-align: center;
    background: white;

    box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;

    padding: 20px 0;
}

WeatherForm.scss

.weather-form {
  .zipCode {
    margin: 20px 0;

    .zipCodeInput {
      max-width: 200px;
      display: inline-block;
    }
  }

  .save-btn {
    margin-top: 15px;
  }
}

WeatherInfoPanel.scss

.weather-info {
  display: grid;

  .city-name {
    text-decoration: underline;
    align-self: center;
    justify-self: center;
  }

  .overcast {
    display: grid;

    .overcast-img,
    .overcast-description {
      align-self: center;
      justify-self: center;
    }
  }

  .current-weather {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .humidity,
    .curr-temp,
    .feels-like {
      align-self: center;
      justify-self: center;
    }
  }

  .temps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .min-temp,
    .max-temp {
      align-self: center;
      justify-self: center;
    }
  }
}

WeatherPanels.scss

@import "WeatherInfoPanel";

.weather-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;
}