/* hasteley.com style sheet */


/* RESETS */

  /* Use a more-intuitive box-sizing model */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Remove default margin */
  * {
    margin: 0;
  }

  /* Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  /* Remove built-in form typography styles */
  input, button, textarea, select {
    font: inherit;
  }

  /* Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }


/* main */

::-moz-selection { /* Code for Firefox */
  color: rgb(183, 239, 239);
  background: rgb(90, 140, 180);
}

::selection {
  color: rgb(183, 239, 239);
  background: rgb(90, 140, 180);
}

body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, a {
  color: rgb(243, 231, 225);
}

h1.title {
  font-size: 9vw;
}

h1.title.error {
  font-size: 15vw;
}

h2.subtitle {
  font-size: 2.5vw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2em;;
}

p.body {
  font-size: 1.8vw;
  line-height: 2em;
}

a {
  display: inline;
  transition: color cubic-bezier(0.1, -0.6, 0.2, 0) 0.2s;
  border-bottom: 3px solid currentColor;
  text-decoration: none;
}

a:hover {
  color: rgb(46, 137, 228);
}

span.center-text {
  display: table-cell;
  vertical-align: middle;
}

div.main {
  display: table;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(244, 161, 120));
}

div.description {
  display: block;
  padding: 0.5vw;
  margin: 2vw auto 2vw auto;
  background-image: linear-gradient(45deg, rgb(0, 183, 255), rgb(244, 161, 120));
  border-radius: 4px;
}

div.error.description {
  width: 25vw;
}

div.subtitle.description {
  width: 31vw;
}