* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}
body {
    background:url('/asset/gedung-juang-45.jpg') no-repeat center center;
    background-size:cover;
    color:#fff;
    min-height:100vh;
}

.overlay {
    background:rgba(173,190,109,0.85);
    width:30%;
    min-height:100vh;
    padding:20px;
    position:absolute;
    top:0;
    left:0;
}
.overlay-head-image {
    display: block;
    margin: 0 auto;
/*    margin-bottom: 10px;*/
}
.overlay h2 {
    margin-bottom:0px;
    color:#004080;
    text-align: center;
    letter-spacing: 2px;

    font-family: 'Francois';
    font-size:24px;
    font-weight: bolder;
}
.overlay img {
    max-width:70px;
    margin-bottom:20px;
    margin: auto;
}
.logos {
    position:absolute;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:5px;
    justify-self: center;
}

.content {
    margin-left:32%;
    padding:40px 20px;
    text-align:center;
}
.content h1 {
    font-size:48px;
    margin-bottom:10px;
    letter-spacing: 10px;
    font-weight: 100;
}
.content h2 {
    font-size:18px;
    margin-bottom:40px;
    font-weight:normal;
    letter-spacing: 10px;
}
.cards {
    display:grid;
    grid-template-columns:repeat(2,minmax(250px,1fr));
    gap:20px;
    justify-items:center;
}
.card-head {
    display: flex;
    padding: 20px;
    margin: 0 auto;
    width:80%;
    max-width:400px;
    background:rgba(200,255,150,0.8);
    color: black;
    border-radius:25px;
    align-items: center;
    justify-content: space-evenly;

    
    letter-spacing: 10px;
    font-weight:bold;
    text-align:center;
    font-size: 20px;
}
.card-head-text {
    text-align: center;
    font-family: 'Neue';
    font-size: 24px;
}
.card-head-span {
    display:block;
    font-size:14px;
    margin-top:5px;
    font-weight:bold;
    letter-spacing: 0px;
}
.card-head-logo {
    width: 50px;
    height: auto;
}
.card {
    background:rgba(200,255,150,0.8);
    color:#000;
    padding:20px;
    border-radius:25px;
    width:80%;
    max-width:300px;
    font-family: 'Neue';
    letter-spacing: 10px;
    font-weight:bold;
    text-align:center;
    font-size: 24px;
}
.card span {
    display:block;
    font-size:14px;
    margin-top:5px;
    font-weight:bold;
    letter-spacing: 0px;
}

/* Responsive */
@media (max-width:768px) {
	.overlay {
	    width:100%;
	    min-height:auto;
	    position:relative;
	    padding:10px;
	}
	.content {
	    margin:0;
	    padding:20px;
	}
	.content h1 {
	    font-size:24px;
	}
	.cards {
	    grid-template-columns:1fr;
	}
}

/*Mencoba custom font*/
@font-face {
    font-family: 'Neue';
    src: url('fonts//BebasNeue-Regular.ttf');
}

/*Custom Font sebelah kiri*/
@font-face {
    font-family: 'Francois';
    src: url('fonts/FrancoisOne-Regular.ttf');
}