body {
background: url("https://images.wallpaperscraft.com/image/background_dark_patterns_textures_36213_1280x720.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.container {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
height: 500px;
width: 320px;
box-shadow: 0px 20px 30px black;
background: rgba(0, 0, 0, 0.3);
color: white;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10px;
}
.container h1 {
padding: 30px;
color: rgb(0, 204, 255);
}
#txt {
padding: 7px;
width: 190px;
margin: 10px;
background-color: rgb(4, 67, 109);
border: none;
color: white;
font-family: 'Montserrat', sans-serif;
}
label {
letter-spacing: 1px;
font-weight: 500;
}
#txt::placeholder {
color: white;
}
#txt:focus {
outline: none;
}
.fp {
text-decoration: none;
color: rgb(36, 130, 238);
transition: 0.3s;
}
.fp:hover {
text-decoration: underline;
color: rgb(154, 176, 228);
}
button {
margin-top: 30px;
padding: 10px 40px;
border-radius: 20px;
border: none;
box-shadow: 0 10px 15px black;
background: linear-gradient( rgb(127, 127, 185), rgb(45, 45, 107));
transition: 0.3s;
}
button a {
text-decoration: none;
color: white;
font-family: 'Montserrat', sans-serif;
}
button:hover {
transform: scale(1.1);
}
.icons {
margin-top: 30px;
}
.icons i {
padding-right: 10px;
font-size: x-large;
}
.icons i :hover {
transform: scale(1.1);
}
.icons a {
text-decoration: none;
color: rgb(68, 160, 184);
transition: 0.3s;
}
.icons a:hover {
color: rgb(117, 117, 158);
}