:root {
	--bg-color: rgba(104,73,45,1);
	--accent-color: rgba(212,164,107,1);	
}

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

header nav {
	background: var(--bg-color);
}

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

@keyframes nav-hover2 {
	0% {
		color: white;
	}

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

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;
	background: gray url("https://res.cloudinary.com/dhnak6cxo/image/upload/v1706702604/Credence/img/banner/remoderma_bpwqav.png") 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.about {
	display: flex;
	margin-left: 5%;
	margin-top: 5rem;
	flex-direction: column;
	width: 90%;
}

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

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

section.kegiatan .daftar-isi{
    width: 20rem;
}

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


section.kegiatan .daftar-isi ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	width: 80%;
	justify-content: space-evenly;
	margin: 0;
}


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

section.kegiatan ul li a:hover{
	color: var(--accent-color);
	text-decoration: none;
	animation: kegiatan-hover 0.2s linear;
}

@keyframes kegiatan-hover {
	0% {
		color: white;
	}

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

.kegiatan .content{
	display: flex;
	padding: 3% 0;
    flex-direction: column;
    align-items: center;
}

.kegiatan .content .content-isi {
    width: 70%;
    margin-top: 3%;
    border: 0.3rem solid var(--accent-color);
    border-radius: 1rem;
    box-shadow: 0 0 2rem var(--accent-color);
    padding-left: 3rem;
    padding-top: 3rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
}

.kegiatan .content .content-isi .top {
    display: flex;
    align-items: flex-start;
}

.kegiatan .content .content-isi .top img{
    margin: 0;
	width: 250px;
	border-radius: 15px;
}

.kegiatan .content .content-isi .top-text{
	display: flex;
	flex-direction: column;
    margin-left: 5%;
}

.kegiatan .content .content-isi .top-text h2{
	font-weight: bold;
	color: white;
	padding-top: 3%;
}

.kegiatan .content .content-isi .top-text p{
	color: white;
	padding-left: 0;
	padding-top:2%;
}

.kegiatan .content .content-isi .top-text a{
	color: white;
}

.kegiatan .content .content-isi .top-text a:hover{
	color: var(--accent-color);
	text-decoration: none;
	animation: kegiatan-hover 0.2s linear;
}

.kegiatan .content .content-isi .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kegiatan .content .content-isi .bottom button{
    margin-bottom: 2%;
    margin-top: 2%;
    border: none;
    background-color: white;
    color: var(--bg-color);
}

.kegiatan .content .content-isi .bottom button:hover{
    background-color: rgb(165, 125, 75);
    color: white;
}

.card, .card-body {
    width: 100%;
}


.kegiatan .content .content-isi .bottom .card{
	background: var(--bg-color);
	border: none;
}

.kegiatan .content .content-isi .bottom .card img{
	width: 50vw;
	margin-bottom: 1rem;
}

.kegiatan .content .content-isi .bottom .card h3{
	font-weight: bold;
}

.kegiatan a{
	color: white;
}

.kegiatan a:hover {
	color: var(--accent-color);
	text-decoration: none;
	animation: nav-hover2 0.2s linear;
}

.winners-data{
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer {
	background-color: rgb(68, 45, 24);
}

footer .gradient {
	background: linear-gradient(var(--bg-color), rgb(68, 45, 24));
}

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

footer .footer-content a{
	color: white;
	text-decoration: none;
}

footer .footer-content a:hover{
	color: var(--accent-color);
	animation: kegiatan-hover 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 {
	color: var(--bg-color);
}

@media screen and (max-width : 850px) {
	section.banner .gradient-banner {
		height: 5rem;
	}

	section.kegiatan .daftar-isi{
        border: 2px solid var(--accent-color);
        padding: 3% 0;
	}


    .kegiatan .content .content-isi {
        width: 95%;
		padding: 1rem;
		font-size: 90%;
    }

	.kegiatan .content .content-isi .top{
		flex-direction: column-reverse;
	}

    .kegiatan .content .content-isi .top-text{
		margin-left: 0;
	}

	.kegiatan .content .content-isi .top img{
		margin: auto;
		width: auto;
		width: 50vw;
		margin-top: 5%;
        margin-bottom: 3%;
	}
}

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