:root{

  --stark-light-blue: #343c44;
  --stark-med-blue: #0c2d48;

}

*{
margin: 0;
padding:0;
}
/** {
box-sizing: border-box;
}*/

html {
background: rgb(0, 0, 0);
background-size: cover;
font-size: 10px;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
width: 100%;

}

.logo{
  padding-top:50px;
  width: 100px;
  height: 100px;
}


/* Flash message */

.alert-error{
    background-color: red;
}

.alert-success{
    background-color: rgb(38, 255, 0);
}
  
.alert{ 
    font-size: 11pt;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    --moz-box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    box-shadow: 0px 0px 14px 0px rgba(255, 0, 0, 1);
    border-radius: 4px;
    width: 85%;
    position: relative;
}
  
.close-flash{
    position: absolute;
    background-color: transparent;
    right:0;
    outline: none;
    border: none
}

/* end Flash message */


#fade-box {
  animation: input-entry 3s ease-in;
  z-index: 4;

}

.stark-login {
  form {
    /*animation: form-entry 3s ease-in-out;*/
    /* background: #111; */
   
    background: linear-gradient(#212c38, #0c2d48);
    border: 0px solid var(--stark-med-blue);
    /* box-shadow: 0px 0px 10px 8px #ffffff; */
    border-radius: 5px;
    display: inline-block;
    height: 280px;
margin-top: 20px;

    position: relative;
    z-index: 999999;
    width: 500px;
    transition: 50ms all ;

    
    /* &:hover {
        border: 0px solid #2e8bc0;
        box-shadow: 0 0 25px #b1d4e0;
        transition: 100ms all ;
      } */
  }

  
  input {
    background: #222;
    background: linear-gradient(#333, #222);  
    border: 1px solid black;
    border-radius: 5px;
    /* box-shadow: 0 2px 0 #cd5a17; */
    color: #888;
    display: block;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    height: 40px;
    margin: 20px auto 10px;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width: 400px;
  
    
  }

  input:focus {
    animation: box-glow 1s ease-out infinite alternate;
    background: #0B4252;
    background: linear-gradient(#2e8bc0, #222922);
    border-color: #2ec061;
    box-shadow: 0 0 5px rgba(0, 255, 253, .2), inset 0 0 5px rgba(0, 255, 253, .1), 0 2px 0 #000;
    color: #efe;
    outline: none;
  }

  .but1 {
    animation: input-entry 3s ease-in;
    background: #222;
    background: linear-gradient(#333, #222);
    box-sizing: content-box;
    border: 1px solid #ffffff;
    /* border-left-color: #000; */
    border-radius: 5px;
    box-shadow: 0 0 0 #000;
    color: #fff;
    display: block;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 20px auto;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width: 400px;
    transition: 1s all ;
   
}
.but1:hover,
.but1:focus {
  background: #101cff;
  background: linear-gradient(#393939, #292929);
  color: var(--stark-light-blue);
  outline: none;
  transition: 1s all ;
}

.but1:active {
  background: #292929;
  background: linear-gradient(#393939, #292929);
  box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
  top: 1px;
}
}


@keyframes box-glow {
  0% {
    border-color: #2e8bc0;
    box-shadow: 0 0 5px rgba(0, 255, 253, .2), inset 0 0 5px rgba(0, 255, 253, .1), 0 2px 0 #000;
  }  
  100% {
    border-color: var(--stark-light-blue);
    box-shadow: 0 0 20px rgba(3, 3, 246, 0.6), inset 0 0 10px #1e05ffe7, 0 2px 0 #000;
  }
}


@media screen and (max-width: 540px) {
  .view {
    width: 400px;




  }
 


  .stark-login {
    form {
      /*animation: form-entry 3s ease-in-out;*/
      /* background: #111; */
     
      background: linear-gradient(#212c38, #0c2d48);
      border: 0px solid var(--stark-med-blue);
      /* box-shadow: 0px 0px 10px 8px #ffffff; */
      border-radius: 5px;
      display: inline-block;
      height: 210px;
  margin-top: 20px;
  
      position: relative;
      z-index: 999999;
      width: 300px;
      transition: 50ms all ;
  
      
      /* &:hover {
          border: 0px solid #2e8bc0;
          box-shadow: 0 0 25px #b1d4e0;
          transition: 100ms all ;
        } */
    }
  
    
    input {
      background: #222;
      background: linear-gradient(#333, #222);  
      border: 1px solid black;
      border-radius: 5px;
      /* box-shadow: 0 2px 0 #cd5a17; */
      color: #888;
      display: block;
      font-family: 'Cabin', helvetica, arial, sans-serif;
      font-size: 13px;
      font-size: 1.3rem;
      height: 40px;
      margin: 20px auto 10px;
      padding: 0 10px;
      text-shadow: 0 -1px 0 #000;
      width: 200px;
    
      
    }
  
    input:focus {
      animation: box-glow 1s ease-out infinite alternate;
      background: #0B4252;
      background: linear-gradient(#2e8bc0, #222922);
      border-color: #2ec061;
      box-shadow: 0 0 5px rgba(0, 255, 253, .2), inset 0 0 5px rgba(0, 255, 253, .1), 0 2px 0 #000;
      color: #efe;
      outline: none;
    }
  
    .but1 {
      animation: input-entry 3s ease-in;
      background: #222;
      background: linear-gradient(#333, #222);
      box-sizing: content-box;
      border: 1px solid #ffffff;
      /* border-left-color: #000; */
      border-radius: 5px;
      box-shadow: 0 0 0 #000;
      color: #fff;
      display: block;
      font-family: 'Cabin', helvetica, arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      margin: 20px auto;
      padding: 0;
      position: relative;
      text-shadow: 0 -1px 0 #000;
      width: 200px;
      transition: 1s all ;
     
  }
  .but1:hover,
  .but1:focus {
    background: #101cff;
    background: linear-gradient(#393939, #292929);
    color: var(--stark-light-blue);
    outline: none;
    transition: 1s all ;
  }
  
  .but1:active {
    background: #292929;
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top: 1px;
  }
  }
  

}