:root {
    --bg-color: rgb(16, 69, 4);
    --accent-color: rgb(249, 255, 88);
}

*{
	color: var(--accent-color);
    text-shadow:1.75px 1.75px rgba(0, 0, 0, 0.353);
}

html, body {
	background-color: var(--bg-color);
    color: white;
}

header nav {
	background: var(--bg-color);
	position: absolute;
	top: 0;
	width: 100vw;
	z-index: 200;
}

header nav .logo h1{
	color: white;
}

header nav ul li a{
	color: white;
}

header nav ul li a:hover{
	color: var(--accent-color);
	text-decoration: none;
	animation: hovering 0.2s linear;
}

p, li {
    font-size: 110%;
}

@keyframes hovering {
	0% {
		color: white;
	}

	100% {
		color: var(--accent-color);
	}
}

section.ketupat {
	position: absolute;
	z-index: 100;
	top: 30px;
	animation: ketupatDropDown 0.7s ease-in;
}

section.ketupat img{
	transform-origin: top;
	position: absolute;
	width: 15vw;
	left: 1vw;
	animation: ketupatGeser 1s ease-in-out infinite ;
}

section.ketupat .kright{
	position: absolute;
	left: 83vw;
	top: 0;
}

section.ketupat .kleft{
	transform-origin: top;
	animation: ketupatGeser2 1s ease-in-out infinite ;
}

@keyframes ketupatDropDown {
	0% {top: -500px}
	80% {top: 35px}
	90% {top: 20px}
	95% {top: 35px}
	100% {top: 30px}
}

@keyframes ketupatGeser {
	0% {transform: rotate(5deg)}
	50% {transform: rotate(-10deg)}
	100% {transform: rotate(5deg)}
}

@keyframes ketupatGeser2 {
	0% {transform: rotate(-5deg)}
	50% {transform: rotate(10deg)}
	100% {transform: rotate(-5deg)}
}

section.banner{
	--size: 100vw;
	position: relative;
	width: var(--size);
	height: calc(var(--size)/1.6);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 50px;
	background: gray url("https://res.cloudinary.com/dhnak6cxo/image/upload/v1706702549/Credence/img/banner/altarma_klocnb.jpg") center / cover no-repeat;
}

section.banner .gradient-banner {
	position: absolute;
	z-index: 10;
	left: 0;
	bottom: 0;
	height: 10rem;
	width: 100%;
	background: linear-gradient(to bottom,rgba(0,0,0,0), var(--bg-color));
}

section.stars {
	position: absolute;
	/* top: calc((100vw/1.6) + 50px); */
}

section.stars img {
	position: absolute;
	width: 20px;
	opacity: 0.3;
	animation: srotate 5s linear infinite;
}

@keyframes srotate {
	0% {transform: rotate(0deg) scale(0);}
	50% {transform: rotate(180deg) scale(1.2); filter: drop-shadow(0 0 0.2rem yellow);}
	100% {transform: rotate(360deg) scale(0);}
}

@keyframes sscale {
	0% {transform: scale(1);}
	100% {transform: scale(2);}
}

section.about {
	display: flex;
	margin-left: 5%;
	margin-top: 5rem;
	flex-direction: column;
	width: 90%;
}

section.about h1 {
	font-weight: 700;
}

section.about p {
	margin-left: 2%;
}

section.content {
	display: flex;
	margin-left: 5%;
	margin-top: 5rem;
	flex-direction: column;
	width: 90%;
}

section.content h1 {
	font-weight: 700;
}

section.content h4 {
	font-weight: bold;
	margin-left: 2%;
}

section.content > h5 {
	margin-left: 2%;
}

section.content > p {
	margin-left: 2%;
}

section.content > ul {
	margin-left: 2%;
}

section.content img {
	margin-left: 2%;
	width: 50%;
	margin-bottom: 1rem;
}

footer {
	background-color: rgb(33, 87, 20);
}

footer .gradient {
	background: linear-gradient(var(--bg-color), rgb(33, 87, 20));
}

section.kegiatan ul li a{
	color: white;
}

footer .footer-content a{
	color: rgb(255, 255, 107);
    text-shadow:1.75px 1.75px rgba(0, 0, 0, 0.353);
	text-decoration: none;
}

footer .footer-content a:hover{
	color: var(--accent-color);
	animation: hovering 0.2s linear;
}

footer .column2 a h1{
	margin: 0;
	color: var(--accent-color);
}

footer .column3 a h2{
	margin: 0;
	color: var(--accent-color);
}

footer .copyright p{
	color: var(--bg-color);
	text-shadow: none;
}

@media screen and (max-width : 850px) {
    p, li {
        font-size: 100%;
    }

	section.banner .gradient-banner {
		height: 5rem;
	}
}

@media screen and (max-width : 590px) {
	header nav ul.menu-nav{
		background-color: rgb(33, 87, 20);
	}

	section.content img {
		margin-left: 2%;
		width: 90%;
	}
}