.body{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
header{
	background-image:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(sea.jpg);
	height:100vh;
	background-size:cover;
	background-position:centre;
}
.loginbox{
    width:320px;
    height:420px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%,-50%);
    box-sizing:border-box;
}
.logo{
    width:100px;
    height:100px;
    border-radius: 50%;
    position:absolute;
    top:-50px;
    left:calc(50% - 50px);
}
h1{
    margin:0;
    padding: 70px 0 20px;
    text-align: center;
    font-size:22px;
}
.loginbox p{
    margin:0;
    padding-left:5px;
    font-weight:bold;
}
 .loginbox input{
     width:100%;
     margin-bottom:20px;
 }
  .loginbox input[type="text"] , input[type="password"]
  {
      border:none;
      border-bottom: 1px solid #fff;
      background:transparent;
      outline:none;
      height:40px;
      color:darkgrey;
      font-size:16px;
  }
   .loginbox input[type="submit"]
  {
      border:none;
      background:#fb2525;
      outline:none;
      height:40px;
      color:#fff;
      font-size:18px;
      border-radius:20px;
  }
  .loginbox input[type="submit"]:hover
  {
       cursor:pointer;
       background:#ffc107;
       color:#000;
   }
   
 
    @media only screen and (min-width:201px) and (max-width:500px)
  {
     
      .loginbox{
    width:280px;
    height:400px;
    }
  }