<div class='box'>
  <div class='wave -one'></div>
  <div class='wave -two'></div>
  <div class='wave -three'></div>
  <div class="weathercon"><i class='fas fa-sun' style='color: #d36326;'></i></div>
  <div class="info">
    <h2 class="location">SUNNYVILLE</h2>
    <p class="date">MONDAY | SEP 12 | 12:34</p>
    <h1 class="temp">25 &deg;C | 77 &deg;F</h1>
  </div>
</div>
<span>Enable location to see yours! :)</span>

* {
  padding: 0;
  margin: 0;
  font-family: Quicksand;
}

body {
  background: #f3f2ef;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100vh;
  width: 100vw;
}

html,
body {
  height: 100%;
}

html {
  background: #eee;
}

.box {
  width: 20vw;
  height: 60vh;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(black, 0.2);
  background: darken(#eff3f9,20%);
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  min-width: 200px;
  min-height: 350px;
}

.wave {
  opacity: 0.3;
  position: absolute;
  top: 120%;
  left: 50%;
  background: white;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
  z-index: 1;
}

.wave.-three {
  animation: drift 5000ms infinite linear;
  z-index: 2 !important;
  opacity: 0.2;
}

.wave.-two {
  animation: drift 7000ms infinite linear;
  opacity: 0.1;
  z-index: 3 !important;
}

.box:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}

.info {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%;
  z-index: 4;
}

.location {
  text-align: center;
  font-weight: 800;
}

.date {
  text-align: center;
  margin-top: 5%;
  color: lighten(grey, 10%);
  font-size: 70%;
}

.temp {
  margin-top: 10%;
  text-align: center;
}

.weathercon {
  height: 55%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

@media (max-width: 600px) {
  .box {
    width: 90vw;
    height: 80vh;
  }

  .wave {
    top: 85%;
  }

  .weathercon {
    font-size: 5em;
  }

  .info {
    font-size: 1.5rem;
  }
}

@media (max-height: 500px) {
  .box {
    height: 80vh;
  }

  .wave {
    top: 115%;
  }
}

body > span {
  width: 100vw;
  text-align: center;
  color: grey;
}

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(success, error);

  function success(pos) {
    var lat = pos.coords.latitude;
    var long = pos.coords.longitude;
    weather(lat, long);
  }

  function error() {
    console.log("There was an error");
  }

  function weather(lat, long) {
    var URL = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
    $.getJSON(URL, function(data) {
      display(data);
    });
  }

  function display(data) {
    var city = data.name.toUpperCase();
    var temp =
      Math.round(data.main.temp_max) +
      "° C | " +
      Math.round(Math.round(data.main.temp_max) * 1.8 + 32) +
      "° F";
    var desc = data.weather[0].description;
    var date = new Date();

    var months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ];

    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var font_color;
    var bg_color;
    if (Math.round(data.main.temp_max) > 25) {
      font_color = "#d36326";
      bg_color = "#f3f5d2";
    } else {
      font_color = "#44c3de";
      bg_color = "#eff3f9";
    }

    if (data.weather[0].main == "Sunny" || data.weather[0].main == "sunny") {
      $(".weathercon").html(
        "<i class='fas fa-sun' style='color: #d36326;'></i>"
      );
    } else {
      $(".weathercon").html(
        "<i class='fas fa-cloud' style='color: #44c3de;'></i>"
      );
    }

    var minutes =
      date.getMinutes() < 11 ? "0" + date.getMinutes() : date.getMinutes();
    var date =
      weekday[date.getDay()].toUpperCase() +
      " | " +
      months[date.getMonth()].toUpperCase().substring(0, 3) +
      " " +
      date.getDate() +
      " | " +
      date.getHours() +
      ":" +
      minutes;
    $(".location").html(city);
    $(".temp").html(temp);
    $(".date").html(date);
    $(".box").css("background", bg_color);
    $(".location").css("color", font_color);
    $(".temp").css("color", font_color);
  }
});