body{
  position: relative; 
  overflow-y: scroll;
  height: 100vh;

  /* Make the body a positioning context */
}
/**  For bubble canvas **/
#canvas {
  position: fixed; /* Position the canvas fixed to the viewport */
  top: 0;
  left: 0;
  z-index: -1; /* Ensure the canvas is behind other content */
  width: 100%;
  height: 100%;
}
/**  For Star canvas **/
#stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* Ensure the canvas is behind other elements */
  pointer-events: none; /* Allow clicks to pass through the canvas */
}
.login-container{
  overflow-y: auto;
  width: 100vw;
  height: 100vh;
  
}
form .inputField{
  background: transparent !important; 
  color: white !important;
}
.inputField{    
  min-width: 60% !important;  
  margin: auto !important; 
}

form label{
font-weight: 600 !important;
  background: transparent !important;  
  border: none !important;
  font-family: 'Newsreader';
  color: white !important;
}
form input:hover{
  border: 1px solid var( --uni-light-colorTheme6) !important;  
}
.form-floating label{
  background: transparent !important;  
}


.container-centered span a:hover{
  color: var(--uni-light-font-activeColor);
}

.clearBttnStyle{
padding: 10px 20px; margin-top: 30px;
margin-bottom: 20px;       
border-radius: 5px;      
color: var( --uni-light-fontColor) !important;
border:  var( --uni-light-borderStyle) !important;
font-family: 'Domine'!important;
}
.registerBttnStyle{
padding: 10px 20px; margin-top: 30px;
margin-bottom: 20px;       
border-radius: 5px;      
color: var( --uni-light-colorTheme5) !important;
border: var( --uni-light-borderStyle) !important;
background-color: var( --uni-light-colorTheme2) !important;
font-family: 'Domine'!important;
}
.loginSpanStyle{
padding: 10px 20px; margin: 10px;
color: rgb(8, 8, 8);

}

.spanLinkStyle{
color: rgb(12, 10, 10);
text-decoration: none;
}
.loginSubmitBttnStyle{
  font-family: 'Domine'!important;
}
.loginSubmitBttnStyle:hover{
padding: 10px 20px; margin: 30px;       
border-radius: 5px;
box-shadow:
-7px -7px 20px 0px #a4f502,
-4px -4px 5px 0px #a4f502,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001 !important;
transition: all 0.2s ease !important;
}

.clearBttnStyle:hover{
padding: 10px 20px; margin: 30px;     
border-radius: 5px;
box-shadow:
-7px -7px 20px 0px #a4f502,
-4px -4px 5px 0px #a4f502,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001 !important;
transition: all 0.2s ease !important;
}
.registerBttnStyle:hover{
padding: 10px 20px; margin: 30px;     
border-radius: 5px;
box-shadow:
-7px -7px 20px 0px #a4f502,
-4px -4px 5px 0px #a4f502,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001 !important;
transition: all 1s ease !important;
}
     /* Facebook and Google buttons */
.loginBtn {
box-sizing: border-box;
position: relative;
width: 13em;  
margin: 0.2em;
padding: 0 5px 0 40px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
display: inline-block;
font-family: 'Domine'!important;
}

.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
background-color: #4C69BA;
background-image: linear-gradient(#4C69BA, #3B55A0);
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
text-shadow: 0 -1px 0 #354C8C;
margin-top: 25px;
display:inline-block;
}

.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
/*font-family: "Roboto", Roboto, arial, sans-serif;*/
background: #DD4B39;
display:inline-block;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}
@media only screen and (width>= 1201px){
  .inputField{    
    width: 60% !important;  
    margin: auto !important; 
  }
}
@media only screen and (min-width: 961px) and (max-width: 1200px){
  .inputField{    
   min-width: 60% !important;  
    margin: auto !important; 
  }
}
@media only screen and (min-width: 768px) and (max-width: 840px){
  .inputField{    
    min-width: 60% !important;  
    margin: auto !important; 
  }

}
@media only screen and (min-width: 768px) and (max-width: 960px){
  .inputField{    
    width: 60% !important;  
    margin: auto !important; 
  }

}

@media only screen and (min-width: 569px) and (max-width: 767px){
  .inputField{    
    min-width: 50% !important;  
    margin: auto !important; 
  }

}
 
  @media only screen and (min-width: 240px) and (max-width: 568px){      
    .inputField{    
      width: 50% !important;  
      margin: auto !important; 
    }  

}


/* EOF BUtton styles */