/* -------------------------------------------------------------------
 * ## fonts
 * ------------------------------------------------------------------- */

@font-face {
  font-family: N27-Bold;
  src: url('../fonts/N27/N27-Bold.ttf');
}

/* -------------------------------------------------------------------
 * ## demodrop
 * ------------------------------------------------------------------- */

.demodrop {
    height: 80%;
    background-image: url("../images/background-yellow.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    color: #0f0f0f;
    font-family: N27-Bold;
}

input[type="text"], input[type="email"], textarea {
    font-family: N27-Bold;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    background-color: #0f0f0f;
    color: #ebcf11;
    border-radius: 5px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

input[type="submit"] {
    font-family: N27-Bold;
    background-color: #0f0f0f;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

input[type="submit"]:hover {
    background-color: #EBCf11;
    color: white;
}

/* -------------------------------------------------------------------
 * ## body
 * ------------------------------------------------------------------- */

body, html {
  height: 100%;
  margin: 0;
  background-color: #151515;
  scroll-behavior: smooth;
}

.background {
  background-image: url("../images/background.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* -------------------------------------------------------------------
 * ## header logo
 * ------------------------------------------------------------------- */

 .header-logo {
    display: inline-block;
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 501;
    top: -10px;
  }

  .header-logo a {
    display: block;
    margin: 0px 0 0 0;
    padding: 0;
    outline: 0;
    border: none;
    width: 150px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  @media only screen and (max-width: 1200px) {
    .header-logo {
      left: 50%;
      transform: translateX(-50%);
      top: -20px;
    }
  }

/* -------------------------------------------------------------------
 * ## socials
 * ------------------------------------------------------------------- */

 .socials {
   text-align: center;
    bottom: 5%;
    width: 100%;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation:myship 1s;
    -moz-animation:myship 1s; /* Firefox */
    -webkit-animation:myship 1s; /* Safari and Chrome */
  }

  @keyframes myship{
    from {bottom: -200px;}
    to{bottom: 5%;}
  }
  @-moz-keyframes myship{
    from {bottom: -200px;}
    to{bottom: 5%;}
  }
  @-webkit-keyframes myship{
    from {bottom: -200px;}
    to{bottom: 5%;}
    }​

  @media only screen and (max-width: 1200px) {
    .socials {
      left: 50%;
      transform: translateX(-50%);
      bottom: 10%;
    }
  }