:root {
--primary: linear-gradient(to bottom, #6e40c9, #5d39a7);
}

html, body {
font-family: Inter, sans-serif;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-behavior: smooth;
user-select: none;
background-image: url("istockphoto-1263705767-612x612.jpg");
background-repeat: no-repeat;
background-size: cover;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
transition: all 0.3s ease-in;
}

.flexbox {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

.container {
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border:  1px solid rgb(195, 195, 195, 0.9);
margin: auto;
width: 400px;
padding: 60px;
border-radius: 30px;
text-align: center;
caret-color: #6e40c9;
max-height: 100%;
}

.head {
font-size: 18px;
}

.logo {
height: 55px;
object-fit: cover;
background-repeat: no-repeat;
position: relative;
margin-bottom: 13px;
margin-top: -11px;
}

label {
font-size: 15px;
float: left;
margin-bottom: 2px;
display: none;
}

input {
margin-bottom: 20px;
padding: 10px 8px;
border-radius: 4px;
border:  1px solid rgba(195, 195, 195, 0.9);
width: 100%;
outline: none;
background-color: transparent;
}
input[type=password] {
margin-bottom: 5px;
}
input:invalid:not(:placeholder-shown) {
border: 1px solid tomato;
}
input:valid:not(:placeholder-shown) {
border: 1px solid #689f38;
}
input:invalid ~ button {
opacity: .6;
pointer-events: none;
}
input::placeholder {
text-align: center;
}
input:invalid + p span {
color: tomato;
font-size: 14px;
text-align: right;
float: right;
margin-bottom: 20px;
}
input:valid + p span {
color: #689f38;
font-size: 14px;
text-align: right;
float: right;
margin-bottom: 20px;
}

.password {
text-align: left;
margin-bottom: 20px;
font-size: 15px;
}

button {
width: 100%;
padding: 8px 8px;
border-radius: 30px;
border: none;
background-color: #6e40c9;
color: white;
cursor: pointer;
margin-bottom: 10px;
font-size: 15px;
border: 2px solid transparent;

}
button:hover {
background-color: transparent;
border: 2px solid #6e40c9;
color: #6e40c9;
}

h1 {
font-size: 24px;
margin-bottom: 10px;
}

.socials {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.socials a {
padding: 1px;
display: flex;
background-color: #6e40c9;
color: white;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 40px;
width: 40px;
}
.socials a:hover {
border: 2px solid #6e40c9;
color: #6e40c9;
background-color: transparent;
}

p a {
text-decoration: underline;
color: #6e40c9;
}

#tell, #tell1 {
font-size: 14px;
color: tomato;
font-weight: bold;
margin-top: 6px;
}

#tell1 {
color: #689f38
}