@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.poopbutton {
	animation: shake 1s;
  }
  
  @keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

.hero {
	background-image: url("../images/background.jpg");
	background-position: center;
	background-size: cover;
	height: 100vh;
}

.hero-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	text-align: center;
}

.hero-content h1 {
	font-family: 'Monoton', cursive;
	font-size: 64px;
	font-weight: normal;
	color: beige;
}

.content {
	padding: 40px;
	text-align: center;
}

.logo {
	display: flex;
	align-items: center;
	max-width: 100%;
	height: auto;
}


@media screen and (max-width: 768px) {
	nav ul {
		flex-direction: column;
	}

	nav ul li {
		margin: 10px 0;
	}

	header {
		padding: 10px;
	}

	.hero-content h1 {
		font-size: 36px;
	}

	.content {
		padding: 20px;
	}
}