@font-face {
    font-family: Segoe UI;
    src:
        local("Segoe UI Light"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: Segoe UI;
    src:
        local("Segoe UI Semilight"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: Segoe UI;
    src:
        local("Segoe UI"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
        url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI Light";
  font-weight: 300;
}

body {
  font-family: "Segoe UI";
  color: #FFF;
  background: #0078d7;
  margin: 0 auto;
}

main {
  margin: 5% 25%;
  margin-right: 30%;
}

.emotion {
  font-family: "Segoe UI";
  font-size: 10em;
  margin: 0;
}

.description {
  font-size: 1.8em;
  margin-bottom: 3em;
}

small {
  font-size: 0.9em;
}

/* loading spinner */
.loader {
  border: 5px solid #e7e7e7; /* Light grey */
  border-top: 5px solid #b4b6b8;
  border-radius: 50%;
  width: 2.3em;
  height: 2.3em;
  -webkit-animation: spin 0.6s linear infinite; /* Safari */
  animation: spin 0.6s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}