:root{

	--main-color: #060606;

}

/* Know More Dialog */

dialog#knowMoreDialog:not([open]){opacity: 0; pointer-events: none;}
dialog#knowMoreDialog{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; padding: 15px; border: 0; background-color: #18181a; color: #fff; gap: 20px; min-width: 300px; max-width: 90vw; animation: backdropFadeIn .3s ease;}
dialog#knowMoreDialog::backdrop{background: rgba(0 0 0 / 40%); backdrop-filter: blur(10px); animation: backdropFadeIn .3s ease forwards;}
dialog#knowMoreDialog.closing,
dialog#knowMoreDialog.closing::backdrop{animation: backdropFadeOut .3s ease;}
dialog#knowMoreDialog a{color: #fff; font-size: 1rem;text-align: center;padding: 5px;margin: 10px;}
dialog#knowMoreDialog header{display: grid; grid-template-areas: "title close"; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px;}
dialog#knowMoreDialog header h5{font-size: 32px; font-weight: 700;}
dialog#knowMoreDialog header button{color: #fff;}
dialog#knowMoreDialog .column{display: flex; flex-direction: column; gap: 5px;}

@keyframes backdropFadeIn{

	0%{opacity: 0;}
	100%{opacity: 1;}

}
@keyframes backdropFadeOut{

	0%{opacity: 1;}
	100%{opacity: 0;}

}

/* Under Construction */

main#underConstruction{display: flex; align-items: center; justify-content: center; height: 100vh; background-color: var(--main-color);}
main#underConstruction section#initial{width: 100%; height: 100%; background: url(images/inicial-desktop.jpg) no-repeat center / 100%;}
main#underConstruction section#initial .buttons{position: absolute; right: 10%; bottom: 10%; width: 40%; display: flex; justify-content: space-around;}
main#underConstruction section#initial .buttons button{cursor: pointer;}

/* Responsive */

@media(max-width: 430px){

	main#underConstruction section#initial{background: url(images/inicial-mobile.jpg) no-repeat center 34% / 90%;}
	main#underConstruction section#initial .buttons{width: auto; left: 10%; right: 10%; bottom: 3%; gap: 20px; flex-direction: initial; align-items: center;}
	.about {
		height: 200px;
	}
	.parallax-window {
		min-height: 200px;
	}
	.about_content {
		top: 150px;
	}

}