@charset "UTF-8";

:root {
  --fundoForm:gray;
  --botaologar: rgba(255, 0, 0,1);
  --botaolimpar:rgba(248,211,64,1)
}

.container {  
    display: grid;  
    grid-template-columns: 100px 100px 100px;  
    grid-template-rows: 50px 50px;  
}

.bg-image{
	background:url("../imagens/fundo4.jpg");
	background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

div#meteorologia{
	position: relative;
	float: left;
	width: 300px;
	height: 380px;
	top: 50px;
	left: 20%;

}
div#logo img{
	width: 125px;
	height: 92px;
	top: 10px;
	margin: 0px 87.5px;
	position: relative;	
}

div#arealogin{
	width: 300px;
	height: 380px;
	background-color: var(--fundoForm);
	opacity: 0.85;
	margin: 0px auto;
	top: 130px;
	justify-content: center;
	position: relative;
	box-shadow: 10px 5px 5px rgba(0,0,0,0.5);
}

fieldset#login{
	width: 250px;
	height: 250px;
	position: relative;
	margin: 0px auto;
	top: 20px;
}


fieldset#login input#btlogin{
	color:black;
	background-color:var(--botaologar);	
	border:none;
	transition:all .1s cubic-bezier(1,1,1,1);
}

fieldset#login input#btapagar{
	color:black;
	background-color:var(--botaolimpar);	
	border:none;
	transition:all .1s cubic-bezier(1,1,1,1);
}

fieldset#login input#btlogin:hover{
	transform:scale(1.05);
	z-index:1;
}

fieldset#login input#btapagar:hover{
	transform:scale(1.05);
	z-index:1;
}