h1 {
    font-size: 40px;
    font-weight: 400;
    background-image: linear-gradient(to right, #69c3d8 45%, #ee4b2b);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }
#footer {  
  position: relative;
  color: white;
  font-size:20px;
  text-align:center;
  display: block;
  margin-top: 4%;
  margin-bottom: 0%;
}
#footer span{
color: #869b91;
}

#container{
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body {color:#ffffff; background-color:#222222;}
/*********************************************/
fieldset{
  width: 60%;
  display: inline-block;
  border-radius: 4px;
}
input[type=text], select {
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
}
input[type=password], select {
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
}
input[type=submit] {
  width: 20%;
  background-color: #4cacaf;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
input[type=button] {
  width: 10%;
  background-color: #4cacaf;
  color: white;
  padding: 5px 15px;  
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=button]:hover {
  background-color: #45a049;
}
#submit{
  width: 20%;
  background-color: #4cacaf;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#submit:hover{
  background-color: #45a049;
}
div {
  border-radius: 5px;
  background-color: #222222; 
}
#walletJsonFile{
  position: absolute;
}
/****************** ANIMATION ****************/

h2{
  font-family: Oak,sans-serif;
  color: rgba(0,0,0,0.7);
  position:relative;
  top:calc(50% - 80px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
  
  .loader {
    display: none;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    filter:hue-rotate(0deg);
    background:linear-gradient(45deg,#0f8,#08f);
    animation:hue 10000ms infinite linear;
   
  }
  .loader .b1 {
    left:42%;
  }
  .loader .b2 {
    left:50%;
    animation-delay:100ms;
  }
  .loader .b3 {
    left:58%;
    animation-delay:200ms
  }
  .loader .b1, 
  .loader .b2,
  .loader .b3 {
    width:10px;
    height:30px;
    background-color:rgba(256,256,256,0.8);
    position:absolute;
    top:50%;
    transform:rotate(0);
    animation-name:spinify;
    animation-duration:1600ms;
    animation-iteration-count:infinite;
  }
  @keyframes spinify {
    0% {
      transform: translate(0px,0px);
      
    }
    33% {
      transform: translate(0px,24px);
      border-radius:100%;
      width:10px;
      height:10px;
   
    }
     66% {
      transform:translate(0px,-16px);
    }
    
     88% {
      transform:translate(0px,4px);
       
    }
    100% {
      transform:translate(0px,0px);
    }
  }
  @keyframes hue{
    0%{filter: hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
    
  }