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

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

html, body {
  margin: 0px;
  background: #132502;
}

h1 {
	font-family: 'Amatic SC', sans-serif;
	font-weight: 700;
	color: #fbc762;
	
}

p {
	font-family: 'Amatic SC', sans-serif;
	font-weight: 700;
}

#bg {
	width: 100vw;
	height: 100vh;
	background-image: url("images/bg.png");
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
}

.header {
	width: 100%;
	text-align: center;
	margin: 0px;
	padding-top: 20vh;
	text-shadow: 5px 5px 10px black;
	font-size: calc(5vw + 5vh + 2vmin);
}

.subheader {
	color: white;
	text-shadow: 5px 5px 10px black;
	text-align: center;
	padding-left: 5vw;
	padding-right: 5vw;
	margin-top: -10px;
	font-size: calc(1.1vw + 2.1vh + 1vmin);
}

#bees {
	position: absolute;
	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -15%);
 	max-width: 35vw;
	min-width: 350px;
}

#grass {
	width: 100vw;
	height: 50vh;
	position: absolute;
    left: 0;
    bottom: 0;
    object-fit: cover;
    object-position: 50% 50%;
    margin: 0px;
}

#grass-container {
	width: 100vw;
	margin: 0px;
	position: absolute;
    left: 0;
    bottom: 0;
}

.fa {
  padding: 10px;
  margin: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  color: white;
  outline: 3px solid white;
  border-radius: 10px;
}

.fa:hover {
  opacity: 0.7;
}

#social-group {
	display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 90vw;
	position: absolute;
	bottom: 40px;
	left: 50%;
  transform: translateX(-50%);
}

.footer {
	position: absolute;
	width: 100vw;
	text-align: center;
	bottom: -5px;
	color: white;
}

.footer a {
	color: white;
}