@charset "utf-8";
/* CSS Document */
#backgroundVideo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}
.grid-container {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 2;
	width: 100%;
	background: rgb(21,116,52);
	background: linear-gradient(90deg, rgba(21,116,52,1) 7%, rgba(12,106,158,1) 40%, rgba(15,166,194,1) 77%); 
	border-radius: 12px;
}
.logo{
	grid-column: 1;
	display: block;
	
	
	text-align: center;
	margin: 0 auto;
}
.logo-image {
	max-width: 15vw;
	vertical-align: middle;
}
.logo-text{
	grid-column: 2;
	font-size: 2em;
}
.buttons {
	grid-row: 2;
	grid-column: 1/3;
	width: 100vw;
	text-align: center;
}
.container {
	text-align: center;
	align-content: center;
}
.picture-container {
	display: inline-block;
	align-content: center;
	text-align: center;
	margin: 0 auto;
}
.picture {
	text-align: center;
	margin: 50px;
	max-width: 40vw;
	border: #F9F7F7;
	border-style: inset;
	border-width: thick;
	border-radius: 12px;
	object-fit: contain;
}
.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}
.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}
button {
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}

@media only screen and (max-width: 600px){
	.picture {
		max-width: 70vw;
	}
	.logo-image {
		max-width: 50vw;
	}
	button {
		padding: 1em;
	}
	.logo-text {
		max-width: 35vw;
		font-size: 0.8em;
		padding: 3px;
	}
}