@charset "utf-8";
/* CSS Document */
* {
	box-sizing:content-box;
}
html	{
	background-image:url(../image/background.png)
}
body	{
	width:auto;
	height:auto;
	display:grid;
	grid-template-rows:10% 10% 1fr 10% 10%;
	grid-template-columns:1fr;
	align-items:center;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
}
.content	{
	display:grid;
	grid-template-columns:10% 80% 10%;
	grid-template-rows:1fr;
	align-items:center;
	text-align:center;
}
#warning-message	{
	color:#FFF;
	display:none;
}
.btn	{
	width:2em;
	height:1em;
	background-color:#F00;
    color: #fff;
}
.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
	padding:1em 2em;
    display:inline-block;
    border-radius: 100px;
    transition: all .2s;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	color:#000;
}
.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white	{
	color:#00F;
	background-color:#0FF;
}
#main_video	{
		width:800px;
	}

@media only screen and (max-width: 1001px) {
	#main_video	{
		width:500px;
	}

}

@media only screen and (max-width: 820px) {
    @supports not (display: grid) {
    
    }
    @supports (display: grid) {
        html {
            height:100vh;
        }
        body	{
            width:auto;
	        grid-template-rows:0% 1fr 10% 0%;
        }
        .content	{
	        display:grid;
	        grid-template-rows:1fr;
	        grid-template-columns:20% 1fr 20%;
	        align-items:center;
	        justify-items:center;
        }
        #img_slide img  {
            width:100%;
        }
    }
#warning-message {
    display: none;
}
    @media only screen and (orientation:portrait){
        .header, #button_mulai, #pg, .button_fullscreen, .content, .exit_button, .footer { 
            display:none; 
            
        }
        #warning-message { 
            display:block;
            background-color:black;
            font-size:200%;
            font-style:bold;
        }
    }
    @media only screen and (orientation:landscape){
        #warning-message {display:none;}
    }
}