﻿.password-recover-container { display: flex; padding-top: 6vw; color: #FFF; background: transparent radial-gradient(closest-side at 50% 77%, #5b6675, #5a6574 0%, #2d3541) 0% 0% no-repeat padding-box; }
.password-recover-recover-section { width: 750px; padding: 60px; max-width: 100%; }
.password-recover-title { font-size: 3.5rem; line-height: 1.25em; }
.password-recover-abstract { margin: 50px 0; font-size: 1.25rem; letter-spacing: 1.5px; line-height: 1.75rem; }
.password-recover-email { display: block; padding: 22px 50px; margin: 25px 0; width: 100%; color: #FFF; font-size: 1.125rem; background-color: transparent; border: 1px solid #FFF; border-radius: 10px; outline: none; transition: .125s; }
.password-recover-email:focus { border-color: var(--mainBlue); }
.password-recover-email.error { border-color: red; }
.password-recover-email::placeholder { color: #FFF; font-size: 1.125rem; font-family: "Comfortaa", sans-serif; opacity: 1; }
.password-recover-button { display: block; padding: 13px 50px; width: 100%; color: #FFF; font-size: 1.125rem; font-family: inherit; text-align: center; text-decoration: none; background: hsla(var(--mainBlue_Hue), var(--mainBlue_Saturation), var(--mainBlue_Lightness), .5); border-radius: 10px; border: 1px solid var(--mainBlue); cursor: pointer; transition: .125s; }

@media (pointer: fine) {
    .password-recover-button:hover { background-color: var(--mainBlue); }
}

@media (max-width: 768px) {
    .password-recover-title { font-size: 2rem; }
    .password-recover-abstract,
    .password-recover-email,
    .password-recover-email::placeholder { font-size: .9375rem; }
}

@media (max-width: 640px) {
    .password-recover-container { padding-inline: 25px; }
}

@media (max-width: 1536px) {
	.password-recover-container { padding-top: 6vw; }
}

@media (max-width: 1280px) {
	.password-recover-container { padding-top: 8vw; }
}

@media (max-width: 1024px) {
	.password-recover-container { padding-top: 10vw; }
}

@media (max-width: 768px) {
	.password-recover-container { padding-top: 11vw; }
}

@media (max-width: 640px) {
	.password-recover-container { padding-top: 14vw; }
    .password-recover-recover-section { padding-inline: 25px; }
}
