* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    top: 40%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
/*    background: url('../img/bg.jpg');*/
      background: url('../img/brickwall.png') left top repeat;

}

.container {
    height: 400px;
    width: 650px;
    box-shadow: 0px 30px 40px black;
    display: flex;
    border-radius: 10px;
}

.image {
    flex: 50%;
   /* background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.wallpaperscraft.com/image/single/lake_forest_snow_130421_1280x720.jpg');*/
/*background-color: #f2f0f0;*/
    background-color: #dcdcdc;
    background-size: cover;
    text-align: center;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; padding: 53px 20px;
}

.image h1 {
    margin-top: 50%;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.image img{}
span {
    color: chartreuse;
}

.content {
    flex: 50%;
    background-color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.content h1 {
    padding-top: 0px;
    font-family: 'Niconne', cursive;
    font-size: 40px;
    color: #466dc9;
    color: #b1063a;
    
}

#regdno {
    margin: 10px;
    padding: 5px;
    border: none;
    background-color:#fff;
border:1px solid #9f9d9d;
    font-weight: bold;
    font-size: small;
    color: #051335;
}
#stdpass {
    margin: 10px;
    padding: 5px;
    border: none;
    background-color:#fff;
border:1px solid #9f9d9d;
    font-weight: bold;
    font-size: small;
    color: #051335;
}
label {
    font-weight: bold;
    font-size: small;
}

#regdno:focus {
    outline: none;
}
#stdpass:focus {
    outline: none;
}
.fp {
    text-decoration: none;
    font-weight: bold;
    font-size: small;
    transition: 0.3s;
}

.fp:hover {
    color: #c446c9;
}

#stdlogin{
    padding: 10px 40px;
/*    margin-top: 20px;*/
    border: none;
    background: linear-gradient(to right, #4568DC, #00ADEE);
    border-radius: 20px;
    transition: 0.3s;
}

#stdlogin:hover {
    transform: scale(1.2);
}

/*button a {
    text-decoration: none;
    color: white;
}*/
/*#monthpayment{
    background: linear-gradient(to right, #4568DC, #00ADEE);
}
*/

@media (min-width: 326px) and (max-width: 480px) {
	.container {
  height: 450px;
  width: 271px; display:block;
  box-shadow: 0px 30px 40px black;
  display: block;
  border-radius: 10px;
}
.image img{ width:100%}
.image{ padding:0px 6px; }

	}