body,
       html {
           margin: 0;
           height: 100%;
       }

       body {
           background: #eee;
       }

       input {
           border: none;
       }

       button:focus {
           outline: none;
       }

       ::-webkit-input-placeholder {
           color: rgba(0, 0, 0, 0.65);
       }

       ::-webkit-input-placeholder .input-line:focus+::input-placeholder {
           color: #000;
       }

       .cursorpointer {
           cursor: pointer;
       }

       .highlight {
           font-weight: 400;
       }

       .spacing {
           -webkit-box-flex: 1;
           -webkit-flex-grow: 1;
           -ms-flex-positive: 1;
           flex-grow: 1;
           height: 70px;
           font-weight: 300;
           text-align: center;
           margin-top: 0px;
           color: rgba(255, 255, 255, 0.65)
       }

       .input-line:focus {
           outline: none;
           border-color: #000;
           -webkit-transition: all .2s ease;
           transition: all .2s ease;
       }

       .ghost-round {
           cursor: pointer;
           background: none;
           border: 1px solid #000;
           border-radius: 3px;
           color: #000;

           -webkit-align-self: flex-end;
           -ms-flex-item-align: end;
           align-self: flex-end;
           font-size: 19px;
           font-size: 1.2rem;
           font-family: 'OpenSans-Variable', 'Segoe UI', 'Helvetica Neue', sans-serif;
           font-weight: 300;
           line-height: 2.5em;
           margin-top: auto;
           margin-bottom: 25px;
           -webkit-transition: all .2s ease;
           transition: all .2s ease;
       }

       .ghost-round:hover {
           background: rgba(255, 255, 255, 0.15);
           color: #000;
           -webkit-transition: all .2s ease;
           transition: all .2s ease;
       }

       .input-line {
           background: none;
           margin-bottom: 10px;
           line-height: 2.4em;
           color: #000;
           font-family: 'OpenSans-Variable', 'Segoe UI', 'Helvetica Neue', sans-serif;
           font-weight: 300;
           letter-spacing: 0px;
           font-size: 16px;
           border-bottom: 1px solid #000;
           -webkit-transition: all .2s ease;
           transition: all .2s ease;
       }

       .full-width {
           width: 100%;
       }

       .input-fields {
           margin-top: 15px;
       }

       .container {
           display: flex;
           align-items: center;
           flex-direction: column;
           justify-content: center;
           background: #eee;
       }

       .content {
           padding-left: 25px;
           padding-right: 25px;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-flex-flow: column;
           -ms-flex-flow: column;
           flex-flow: column;
           z-index: 5;
       }

       .welcome {
           font-weight: 200;
           margin-top: 40px;
           margin-bottom: 5px;
           text-align: center;
           font-size: 40px;
           font-size: 2.5rem;
           letter-spacing: 0.05rem;
       }



       a,
       .subtitle {
           text-align: center;
           line-height: 1.30em;
           font-weight: 100;
           letter-spacing: 0.02rem;
           color: #000;
       }

       a:hover {
           font-weight: 400;
       }

       .menu {
           background: rgba(0, 0, 0, 0.2);
           width: 100%;
           height: 50px;
       }

       .window {
           z-index: 100;
           color: #000;
           font-family: 'OpenSans-Variable', 'Segoe UI', 'Helvetica Neue', sans-serif;
           position: relative;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-flex-flow: column;
           -ms-flex-flow: column;
           flex-flow: column;
           box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2);
           box-sizing: border-box;
           height: var(--windowsHeight);
           width: 360px;
       }

       .overlay {
           background: #ebebeb;
           height: var(--windowsHeight);
           position: absolute;
           width: 360px;
           z-index: 1;
       }

       .error-message {
           color: red;
           text-align: center;
           /* margin-top: 10px; */
       }

       @media (max-width: 500px) {
           .window {
               width: 100%;
               height: 100%;
           }

           .overlay {
               width: 100%;
               height: 100%;
           }
       }