@import url("_basico.css");
body{
	overflow-y: hidden;
}
nav{
	display: flex;
	justify-content: space-between;
	padding: 18px;
	align-content: center;
}
.tema--light nav{
	box-shadow: 2px 0 10px var(--mais-escuro);
}
.tema--dark nav{
	box-shadow: 2px 0 10px var(--mais-claro);
}
.nav__icones{
	display: grid;
	align-content: center;
}
li{
	list-style: none;
}
.nav__logo > a > img{
	width: 180px;
}
.main__sectionhero{
	display: grid;
	height: 89vh;
	align-content: center;
	padding: 18px;	
}
.section--img{
	display: none;
}
.section--form{
	background: linear-gradient(180deg,var(--claro),var(--mais-claro), lightblue );
	color: black;
	backdrop-filter: blur(150px);
	min-height: 300px;
	padding: 24px;
	border-radius: 50px;
	box-shadow: 2px 0 10px var(--mais-escuro);
}
.tema--dark .section--form{
	box-shadow: 2px 0 10px var(--mais-claro);
	background: linear-gradient(180deg,darkblue,var(--mais-escuro),var(--escuro));
	color: #FFF;
}
.section--form > h2{
	text-align: center;
	font-size: 2.5rem;
}
.hidden {
  display: none;
}
.section--form_btn{
	display: grid;
	grid-template-columns: auto auto;
	gap: 8px;
	justify-content: end;
	padding: 8px;
}
button{
	font-size: 1.2rem;
	font-weight: bolder;
	background-color: var(--cor-botão);
	border-radius: 50px;
	padding: 8px;
	cursor: pointer;
	border: none;
}
button:hover{
	background-color: black;
	color: var(--cor-botão);
}
.tema--dark button{
	color: #FFF;
}
.tema--dark button:hover{
	background-color: #FFF;
	color: var(--cor-botão);
}
form{
	display: flex;
	flex-direction: column;
	padding: 32px;
}
label{
	margin-top: 24px;
	font-size: 1.2rem;
	font-weight: bolder;
}
input{
	border-radius: 50px;
	height: 40px;
	padding: 0 12px;
	border: none;
}
input[type="submit"]{
	margin-top: 56px;
	width: 100%;
	max-width: 200px;
	background-color: var(--cor-botão);
	color: black;
	font-size: 1.2rem;
	font-weight: bolder;
	border: none;
	cursor: pointer;
}
input[type="submit"]:hover{
	background-color: black;
	color: var(--cor-botão);
}
.tema--dark input[type="submit"]{
	color: #FFF;
}
.tema--dark input[type="submit"]:hover{
	background-color: #FFF;
	color: var(--cor-botão);
}
input:focus{
	outline: 2px solid var(--escuro);
}
input[type="submit"]:active{
	transform: scale(0.98);
}
input[type="file"]{
	box-shadow: 2px 0 5px var(--mais-escuro);
}
.tema--dark input[type="file"]{
	box-shadow: 2px 0 5px var(--mais-claro);
}
.active{
	background-color: black;
	color: var(--cor-botão);
}
.tema--dark .active{
	background-color: #FFF;
	color: var(--cor-botão);
}
.hidden{
    display:none;
}

.mensagem-erro{

    margin-top:15px;

    color:red;

    font-weight:bold;

}
@media (min-width: 576px){
	.main__sectionhero{
		justify-content: center;
	}
	.section--form{
		width: 75vw;
	}
}
@media (min-width: 768px){
	.main__sectionhero{
		grid-template-columns: auto auto;
		gap: 20px;
	}
	.section--form{
		width: 50vw;
	}
	.section--img{
		display: grid;
		justify-content: center;
	}
}
@media (min-width: 992px){
	.section--form{
		width: 40vw;
	}
	.main__sectionhero{
		justify-content: center;
		align-content: center;
		gap: 150px;
	}
}
@media (min-width: 1200px){
	.section--form{
		width: 30vw;
	}
}

/* Landscape da página */

@media (orientation: landscape) and (max-height: 500px) {
    body {
        /* Libera o scroll*/
        overflow-y: auto; 
    }

    .main__sectionhero {
        height: auto;
        min-height: 100vh;
        padding: 40px 18px; 
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .section--form {
        width: 90% !important;
        padding: 15px;
        border-radius: 20px; 
    }

    .section--form > h2 {
        font-size: 1.5rem;
    }

    form {
        padding: 10px;
    }

    label {
        margin-top: 10px;
        font-size: 1rem;
    }

    input {
        height: 35px; 
    }

    input[type="submit"] {
        margin-top: 20px;
    }

    .section--img {
        display: grid;
        align-content: center;
    }

    .section--img img {
        max-width: 150px; 
    }
}