h1, h2, .main-font {
  font-family: 'Fredoka One', cursive; }

h3, h4, h5, p, li, span, a, .second-font {
  font-family: 'Quattrocento Sans', sans-serif; }

html, body {
  width: 100%;
  height: 100%; }

div#background {
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mainColor', endColorstr='$secondColor',GradientType=0 );
  background-image: url("/application/assets/media/bg/bg-login.png"), -webkit-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), -moz-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), -webkit-gradient(linear, left top, left bottom, from(#6936d2), to(#a02f7e));
  background-image: url("/application/assets/media/bg/bg-login.png"), -o-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: auto; }
  div#background img {
    display: block;
    margin: auto;
    margin-top: 100px;
    max-height: 50%;
    max-width: 90%; }
  div#background p {
    text-align: center;
    color: white;
    font-size: 1.5em;
    margin-top: 100px;
    font-weight: lighter; }
  div#background div#link {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 40px; }
    div#background div#link a {
      background-color: white;
      padding: 10px 50px;
      color: #a02f7e;
      text-decoration: none;
      border-radius: 5px;
      border: 1px solid white;
      -webkit-transition: background-color .2s, color .2s;
      -o-transition: background-color .2s, color .2s;
      transition: background-color .2s, color .2s; }
      div#background div#link a:hover {
        background-color: transparent;
        color: white; }