html,body {
font-family: system-ui;
background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(97,7,76,1) 39%, rgba(114,8,83,1) 60%, rgba(121,9,86,1) 100%, rgba(0,212,255,1) 100%); 
height: 100%;
width:100%;




}

@media screen and (max-width: 768px) {
  .f {
      width: 100%;
	  
    }
}







a {

color: #a30243;
text-decoration: none;

}

a:hover{

color: #2b0112;
text-decoration: underline;

}

.f {

width: 400px;
background-color: #f0f1fa;

background-image:url("bg2.jpg");
text-align:left;
margin:0px;
overflow: auto;
float:right;
min-height: 100%;
position:absolute;
top: 0;
bottom: -8;

right:-8;
z-index:9999;
}


img {

width: 200px;
margin-left:-10px;

}

form {

margin-top: 10%;

margin-left: 10px;
padding-left: 30px;
width:310px;


}
input[type='email'],input[type='password'],input[type='text'] {

width: 300px;
padding: 8px;
border-radius: 5px;
border-color: #960946;
margin-top: 10px;
font-size: 13px;
display: block;
background-color: #f0ebed
 
}


input[type='email']:focus,input[type='password']:focus,input[type='text']:focus {
background-color: white;
border-color: #520323;

}

input[type='submit']
{
width: 300px;
padding: 8px;
border-radius: 5px;
background-color: #960946;
color: white;
font-size: 20px;
margin-top: 30px;
border-color: #960946;
display:block;


}

input[type='submit']:focus {

background-color: #61022b;

}

input[type='submit']:hover {

background-color: #61022b;

}


label {
font-size: 12px;
color: #520323;
font-weight: bold;


}


.header {

color:white;
font-size: 45px;
padding-top: 10%;
padding-left: 30px;
padding-right: 330px;
width:50%;
font-weight: bold;


}
i {

color: #f5291b;
font-size: 18px;
padding-left: 30px;

}

x {

padding-left: 8px;
color: #ebdade;
font-size: 18px;

}