* {
  padding: 0%;
  margin: 0%;
}
body{
  background-image: linear-gradient(rgb(0, 0, 0,0.6),rgba(0, 0, 0, 0.70)),url(image/Bank-of-Canada.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  overflow: hidden;
  height: 100vh;
}
/* @media screen and (min-width:100px) and (max-width:500px) {
  body{
    background-size: cover;
    background-attachment: fixed;

  }} */
.container {
width: 100%;
/* height: 100vh; */
/* text-align: center; */
font-family: 'Ubuntu', sans-serif;
padding-top: 40px;
background-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width:1px) and (max-width:500px) {
  .container{
    padding:10px 0px;
    /* margin-bottom: 50%; */
    /* overflow-x: hidden; */
    height: fit-content;
    
  }
}
.nav-logo{
  position: absolute;
  right: 5%;
 
}
.logo{
  border-radius: 10px;
  width:60px;
  height:60px;
}
@media screen and (min-width:90px) and (max-width:600px) {
  .nav-logo{
    position: absolute;
    
  }
  .logo{
    width: 40px;
    height: 40px;
  }

}
.content{
  width: 580px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin-top: 8%; */
  padding: 30px;
  transform: translate(-50%,-50%);
  background-color: rgba(33, 33, 34, 0.73);
  display: flex;
  align-items: center;
  overflow-x: hidden;
  text-align: center;
}
.content .title span{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
}

.content .profile{
  margin-bottom: 2rem;
}
.content .profile img{
  width: 70px;
  height: 70px;
  border-radius: 12vw;
}
@media screen and (min-width:90px) and (max-width:600px) {
  .content{
 display: grid;
 row-gap: 1rem;
position: absolute;
/*top: 10%;*/
/*left: 7%;*/
/*transform: translate(-0%,-0%);*/
margin-top: 2rem;
width: 300px;
overflow-x: hidden;
  }
    .title{
    padding-bottom: 1rem;
  }
.content .title span{
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
}
}
.content span{
  
  font-size: 15px;
  font-weight: 500;
  word-spacing: 1px;
  color: rgb(255, 255, 255);
  text-transform: capitalize;
}
.content .input-field{
margin: 12px 0;
display: flex;
align-items: center;
max-width: 300px;
}
@media screen and (min-width:1px) and (max-width:500px) {
  .input-field{
    max-width: 250px;
  }
}
.input-field input{
  background: #80685724;
  height: 40px;
  width: 100%;
  outline:1px solid rgb(164, 128, 114);
  border: none;
  text-align: left;
  padding: 5px 40px;
  border-radius: 1vw;
  color: #fff;
}
.input-field .error input{
  border-color: red;
}
.input-field .success input{
  border-color: #09c372;
}
.input-field .erro{
  color: red;
  
  height: 13px;
}

.input-field input:focus{
  outline: 1px solid #fff;
}
.input-field svg{
position: absolute;
left: 7%;
color: #fff;
}
@media screen and (min-width:90px) and (max-width:600px){
  .input-field svg{
    left: 10%;
  }
}
.content a{
  text-decoration: none;
  margin-left: 8.5rem;
  font-size: 15px;
}
.content .submit button{
  text-transform: capitalize;
  border: none;
  margin-top: 2%;
  padding: 10px;
  font-size: 13px;
  width: 300px;
  border-radius: 1vw;
}
.content .submit button:link{
  background-color: #4c4e4e;
}
.content .submit button:active{
  background-color: rgba(0, 0, 0, 0.76);
  color:#fff;
}
.content-2 img{
  border-radius: 2vw;
  margin-left: 4%;
  width: 250px;
}
/* preload */
 #preloader{
  background:rgb(255, 255, 255) url(image/loggif.gif) no-repeat center center ;
  background-size: 400px;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100; 
    margin-top: -20px; 
 }
 /* end */
@media screen and (min-width:1px) and (max-width:500px) {
  .content-2 img{
    width: 300px;
    height: 165px;
    margin-left: -1%;
    animation-name: zoom;
    animation-duration: 2sec;
    animation-delay: 1sec;
    animation-iteration-count: infinite;
    
    
  }
}
@keyframes zoom {
  25%{transform: scaleX(25px);}
  50%{transform: scaleX(50px);}
  100%{transform: scaleX(100px);}
  
}