@font-face {
    font-family: BeaufortForLolBold;
    src: url('../fonts/BEAUFORTFORLOL-BOLD_0.WOFF') format('woff'),
         url('../fonts/BEAUFORTFORLOL-BOLD_0.OTF') format('opentype');
}

@font-face {
    font-family: BeaufortForLolMedium;
    src: url('../fonts/BEAUFORTFORLOL-MEDIUM_0.WOFF') format('woff'),
         url('../fonts/BEAUFORTFORLOL-MEDIUM_0.OTF') format('opentype');
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
  background: rgb(1, 10, 19);
}

#page-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1;
}

#content-background {
    position: absolute;
    left: 50%;
    top: 376px;
    transform: translate(-50%, -50%);
    background: url('../images/content-background.jpg') no-repeat center;
    border-radius: 50%;
    width: 579px;
    height: 579px;
    z-index: 3;
}
#content-background::after {
  content: '';
  position: absolute;
  top: 0
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(1, 10, 19, 0), rgba(1, 10, 19, 1) 80%);
  border-radius: 50%;
}

#content-border {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/border.png');
    background-position: center 50px;
    background-repeat: no-repeat;
    z-index: 4;
}

#content {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 550px;
    height: 350px;
    transform: translate(-50%, 0%);
    text-align: center;
}

#content h1 {
    position: absolute;
    bottom: 185px;
    left: 0;
    width: 100%;
    margin: 0;
    font-family: BeaufortForLolBold;
    color: #F0E6D2;
    font-size: 24pt;
    text-align: center;
    text-transform: uppercase;
}

#content h1 img {
    display: block;
    margin: 0 auto 20px auto;
    height: 57px;
    line-height: 57px;
}

#content p {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-family: BeaufortForLolMedium;
    color: #A09B8C;
    font-size: 16px;
    line-height: 22px;
}

#content img.icon-error {
    font-size: 140px;
    color: #be1e37;
}

#content img.icon-success {
    font-size: 80px;
    color: #1e825a;
}

#content a {
    text-decoration: none;
    color: #0a96aa;
}

#content a.error-link::after {
    content: '\02197';
    margin-left: 5px;
}

#content p.error-message {
    color: #be1e37;
}