@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900");
@import url("https://fonts.googleapis.com/css?family=Kosugi:400");
html {
  display: -ms-grid;
  display: grid;
  min-height: 100%;
}

body {
  display: -ms-grid;
  display: grid;
  background: #183059;
}

h1 {
  font-family: "コスギ", Kosugi, sans-serif;
  text-align: center;
  margin-top: 20%;
  font-size: 3em;
  letter-spacing: 4px;
  color: #F6F4F3;
}

a {
  color: #F6F4F3;
  text-decoration: none;
}
a:hover {
  color: #276FBF;
}

#timer {
  color: #F6F4F3;
  text-align: center;
  text-transform: uppercase;
  font-family: "コスギ", Kosugi, sans-serif;
  font-size: 1em;
  letter-spacing: 5px;
  margin-top: 1em;
  margin-bottom: 25%;
}

.days, .hours, .minutes, .seconds {
  display: inline-block;
  padding: 20px;
  width: 140px;
  border-radius: 10px;
}

.days {
  background: #EF2F3C;
}

.hours {
  background: #F6F4F3;
  color: #183059;
}

.minutes {
  background: #276FBF;
}

.seconds {
  background: #FFA900;
}
.numbers {
  font-family: "Montserrat", sans-serif;
  color: #183059;
  font-size: 5em;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  text-transform: uppercase;
  padding: 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.7em;
}
footer p {
  letter-spacing: 3px;
  color: #EF2F3C;
}
footer a {
  color: #F6F4F3;
  text-decoration: none;
}
footer a:hover {
  color: #276FBF;
}