body {
	background-color: purple;
	margin: 0px;
}

header {
	background-color: whitesmoke;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.left-header {
	color: purple;
	padding-left: 150px;
}

nav {
	padding-right: 150px;
}

nav a {
	text-decoration: none;
	padding: 15px 35px 15px 35px;
	border-left: purple dashed 1px;
	border-right: purple dashed 1px;
}

nav a:hover {
	color: purple;
	text-decoration: overline purple;
	text-emphasis: open purple;
}

.hero h1{
	font-size: 70px;
}

.hero h1:hover {
	transform: rotateX(180deg);
}
.hero {
	color: whitesmoke;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero img {
	background-repeat: no-repeat;
  	background-size: cover;
	filter: blur(3px);
	height: 60%;
}
.hero #text-hero {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#text-hero h1 {
	color: purple;
	text-shadow: 2px 5px 10px ;
}

#text-hero button a {
	color: purple;
	text-decoration: none;
}

#text-hero button a:hover {
	color: white;
}

#text-hero button {
	background-color: whitesmoke;
	padding: 6px 15px 6px 15px;
	color: purple;
	width: 270px;
}
#text-hero button:hover {
	background-color: purple;
	width: 350px;
	transition: width 2s;
}

#About {
	color: purple;
	background-color: white;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 150px;
	padding-right: 150px;
}

#About h1 {
	text-align: center;
	color: black;
	padding-bottom: 25px;
}

#kegiatan {
	color: white;
	padding-left: 150px;
	padding-right: 150px;
	margin-bottom: 100px;
}

.boxes {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	background-color: white;
	padding-top: 50px;
	padding-bottom: 50px;
}
.box {
	width: 250px;
	background-color: rebeccapurple;
	margin: 10px;
	border-radius: 12px;
}

.box img {
	width: 100%;
}

.box h4 {
	text-align: center;
	padding-bottom: 10px;
}

footer {
	width: 100%;
	padding: 20px 0 20px 0;
	background-color: white;
}

footer p {
	display: flex;
	justify-content: center;
	color: purple;
}
