<style type="text/css">
@font-face {
    font-family: "HoeflerText-Black";
    src: url(fonts/HoeflerText-Black.otf) format("truetype");
}

h1 {
	font-family: "HoeflerText-Black";
font-size: 4rem;
color: #fff;
}

p {
	font-family: "HoeflerText-Black";
color: #fff;
font-size: 18px;
}

.header {
	width: 100%;
	height: 40px;
background: #ffffff;
margin-bottom: 1rem;
}
.logo {
	float: right;
	padding-right: 20px;
}

.container {
background-image: url("images/bgmerdeka.png");
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
column-count: 2;
overflow: hidden;
}

.left {
	width: 80%;
	height: 80vh;
	display: flex;
	flex-direction: row;
    align-items: center;
    justify-content: flex-end;
	padding: 0 2rem;
}


.right {
	width: 80%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 2rem;
}

#mc_embed_signup input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  
  .container {
	  
	  column-count: 1;
	  height: auto;
  }

	h1 {
		font-size: 2rem;
	}
	
	.left {
	height: 40vh;
}
.right {
	justify-content: flex-start;
}
  
}