@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

html, body {
	font-family: 'Roboto', sans-serif;
	height: 100%;
	background-image: url("img/bg.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom center;
}
body {
	margin: 0px;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 4em;
	margin-bottom: 1.5em;
}
a {
	color: #444;
}

.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.center-container {
	width: 100%;
	max-width: 1300px;
	text-align: center;
	padding: 30px;
}
.header-logo {
	max-width: 300px;
}


#qrcode IMG {
	width: 100%;
}

/*
@media screen and (max-height: 950px) {
	.flex-container {
		display: block;
	}

}
@media screen and (max-width: 900px) {
	.flex-container {
		display: block;
	}
}
*/

.horizontal {

		background-color: #FFF; border-radius: 2em; padding: 2rem; opacity: 0.75;
	
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-auto-rows: 1fr; 
		grid-template-columns: 1fr 1fr 1fr; 
		grid-template-rows: 1fr 1fr; 
		gap: 0px 0px; 
		grid-template-areas: 
		". . ."
}

.horizontal a {
	display: block;
	  padding: 2rem;
	  text-decoration: none;

	  color: white;
	  font-weight: bold;
	  margin: 1rem;
	  font-size: 1.5rem;
	transition: background-color 200ms linear;
	border-radius: 0.5em;
}
.horizontal a:hover {
		background-color: #EEE;
}
.horizontal a IMG {
	width: 100%;
}



.horizontal2 {
	display: flex;
	flex-direction: row;
}

.horizontal2 a {
	display: block;
	  flex: 1;
	  padding: 30px;
	  text-decoration: none;
	  margin: 10px;
	  font-size: 1rem;
}

@media screen and (max-width: 896px) {
	.horizontal {	
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: 1fr 1fr; 
		grid-template-areas: 
		". ."
	}
}

.animate__delay-step-0 {
	  animation-delay: 0.5s;
}
.animate__delay-step-1 {
	  animation-delay: 1s;
}
.animate__delay-step-2 {
	  animation-delay: 1.25s;
}
.animate__delay-step-3 {
	  animation-delay: 1.5s;
}
.animate__delay-step-4 {
	  animation-delay: 1.75s;
}
.animate__delay-step-5 {
	  animation-delay: 2s;
}
.animate__delay-step-6 {
	  animation-delay: 2.25s;
}

.ending {
	font-family: 'Montserrat', sans-serif;
	margin-bottom: 3em; font-size: 1.5em;
}

@media (min-width: 1200px) and (max-height: 720px) {
	.horizontal {	
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
		grid-template-rows: 1fr; 
		grid-template-areas: 
		". ."
	}
	.horizontal a {
		padding: 0.1rem;
	}
}



@media screen and (max-width: 645px) {
	.horizontal {
		padding: 1rem;
	}
	.horizontal a {
		margin: 0rem;
		padding: 1rem;
	}
}




@media screen and (max-height: 950px) {
	.flex-container {
		height: auto;
		padding-top: 5rem;
	}
}
@media screen and (max-width: 900px) {
	.flex-container {
		height: auto;
		padding-top: 5rem;
	}
}


header {
	text-align: right;
	margin: 1rem;
}
footer {
	color: #FFF;
	font-size: 0.9rem;
	margin: 0.5rem;
}
footer A {
	color: #EEE;
}





.container1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 2.8fr 0.1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "row1"
    "row2"
    "row3";
  height: 100%;
}

.row1 { grid-area: row1; }

.row2 { grid-area: row2; }

.row3 { grid-area: row3;

}


.btn-social {
	font-size: 2rem;
	display: inline-block;
	padding: 0.5rem 1rem 0.5rem 1rem;
	color: #FFF;
	transition: background-color 200ms linear;
	border-radius: 0.5em;
}
	.btn-social:hover {
		background-color: #999;
	}