body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Handlee', cursive;
    -webkit-user-select: none;
    overflow: hidden;
  }
  body .vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: -150px;
  }

.form_main{
    height: auto;
    display: block;
    color: white;
}

.center{
    margin: auto;
    margin-top: 200px;
    padding: 40px 40px 40px 40px;
    box-sizing: border-box;
    align-self: auto;
    background-color: rgba(208, 245, 242, 0.089);
    width: 500px;
    box-shadow: 0 14px 28px 10px rgba(0, 0, 0, 0.233), 0 10px 10px rgba(0,0,0,0.22);
  }
.field {

    text-align: center;
    font-size: 24px;

  }
.new-member{
    text-align: center;
    font-size: 18px;
    color: white;
}
.middle{
    text-align: center;
    color: rgb(255, 255, 255);
}
.submission {
    font-size: 15px;
    border-radius:12px;
    padding: 10px;
    width: 100%;
    border: 3px white ;
    background-color: #FFFFFF;
    color:#21759b;
    font-family: 'Handlee', cursive;
}
.submission:hover{
    background-color: #21759b;
    color: white;
}
.submission:active{
    background-color: rgba(0, 121, 235, 0.959);
}

.link:hover{
  color:#21759b;
}

input{
    font-size: 15px;
    padding: 10px;
    width: 95%;
    border: 5px #21759b ;
    border-radius: 12px;
    font-family: 'Handlee', cursive;
}

.form{
  border-color: white;
  font-weight: bolder;
}

  body .vertical-centered-box:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  body .vertical-centered-box  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
  }
  * {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    -webkit-transform-origin: 60px 60px;
    -moz-transform-origin: 60px 60px;
    -ms-transform-origin: 60px 60px;
    -o-transform-origin: 60px 60px;
    transform-origin: 60px 60px;

    -webkit-animation: rotate 1.2s infinite linear;
    -moz-animation: rotate 1.2s infinite linear;
    -o-animation: rotate 1.2s infinite linear;
    animation: rotate 1.2s infinite linear;
  }

  #particles-background,
  #particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    -webkit-transform: scale3d(2.5, 2.5, 2);
    -moz-transform: scale3d(2.5, 2.5, 2);
    -ms-transform: scale3d(2.5, 2.5, 2);
    -o-transform: scale3d(2.5, 2.5, 2);
    transform: scale3d(1.5, 1.5, 1);
  }
  #particles-background {
    background: #21759b;
  }




  lesshat-selector {
    -lh-property: 0; }
  @-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
  @-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
  @-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
  @keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
  [not-existing] {
    zoom: 1;
  }
  lesshat-selector {
    -lh-property: 0; }
  @-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
  @-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
  @-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
  @keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
  [not-existing] {
    zoom: 1;
  }
  lesshat-selector {
    -lh-property: 0; }
  @-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
  @-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
  @-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
  @keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
  [not-existing] {
    zoom: 1;
  }




  @media only screen and (max-width: 600px) {
    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: 'Handlee', cursive;
        -webkit-user-select: none;
        overflow: hidden;
      }
      body .vertical-centered-box {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        margin-left: auto;
        margin-top: auto;

      }

    .form_main{
        height: auto;
        display: block;
        color: white;

    }

    .center{
        margin: auto;
        margin-top: 200px;
        padding: 40px 40px 40px 40px;
        box-sizing: border-box;
        align-self: auto;
        background-color: rgba(208, 245, 242, 0.089);
        width: 300px;
        box-shadow: 0 14px 28px 10px rgba(0, 0, 0, 0.233), 0 10px 10px rgba(0,0,0,0.22);
        margin-left: 25px;
        margin-left: auto;
        margin-top: auto; 
      }
    .field {

        text-align: center;
        font-size: 24px;

      }
    .new-member{
        text-align: center;
        font-size: 18px;
        color: white;
    }
    .middle{
        text-align: center;
        color: rgb(255, 255, 255);
    }
    .submission {
        font-size: 15px;
        border-radius:12px;
        padding: 10px;
        width: 100%;
        border: 3px white ;
        background-color: #FFFFFF;
        color:#21759b;
        font-family: 'Handlee', cursive;
        margin-left: 5px;
    }
    .submission:hover{
        background-color: #21759b;
        color: white;
    }
    .submission:active{
        background-color: rgba(0, 121, 235, 0.959);
    }

    .link:hover{
      color:#21759b;
    }

    input{
        font-size: 15px;
        padding: 10px;
        width: 95%;
        border: 5px #21759b ;
        border-radius: 12px;
        font-family: 'Handlee', cursive;
    }

    .form{
      border-color: white;
      font-weight: bolder;
    }
    .form p{
      width: 180px;
    }

      body .vertical-centered-box:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
      }
      body .vertical-centered-box  {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
      }
      * {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
      .loader-line-mask {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        overflow: hidden;
        -webkit-transform-origin: 60px 60px;
        -moz-transform-origin: 60px 60px;
        -ms-transform-origin: 60px 60px;
        -o-transform-origin: 60px 60px;
        transform-origin: 60px 60px;

        -webkit-animation: rotate 1.2s infinite linear;
        -moz-animation: rotate 1.2s infinite linear;
        -o-animation: rotate 1.2s infinite linear;
        animation: rotate 1.2s infinite linear;
      }

      #particles-background,
      #particles-foreground {
        left: -51%;
        top: -51%;
        width: 202%;
        height: 202%;
        -webkit-transform: scale3d(2.5, 2.5, 2);
        -moz-transform: scale3d(2.5, 2.5, 2);
        -ms-transform: scale3d(2.5, 2.5, 2);
        -o-transform: scale3d(2.5, 2.5, 2);
        transform: scale3d(1.5, 1.5, 1);
      }
      #particles-background {
        background: #21759b;
      }




      lesshat-selector {
        -lh-property: 0; }
      @-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
      @-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
      @-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
      @keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
      [not-existing] {
        zoom: 1;
      }
      lesshat-selector {
        -lh-property: 0; }
      @-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
      @-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
      @-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
      @keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
      [not-existing] {
        zoom: 1;
      }
      lesshat-selector {
        -lh-property: 0; }
      @-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
      @-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
      @-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
      @keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
      [not-existing] {
        zoom: 1;
      }
}