@import url("material-icons.css"); 
* {
    padding: 0;
    margin: 0;
  }
  .fit { /* set relative picture size */
    max-width: 100%;
    max-height: 100%;
  }
  .center {
    display: block;
    margin: auto;
  }

html, .main {
    height: 100%;
}

section {
    min-height: 100%;
}
body{
    height:100%;
    background-image: url("../img/bg.png");
    background-size: 300px;
    font-family: 'Roboto Slab', serif;
     overflow: hidden;
}

::-webkit-scrollbar { 
    display: none; 
}

footer{
    position: static;
    background-color: #0d1f2d;
    color: white;  
}

.wrapper {
    text-align: center;
}

.button {
  
    position: static ;
    top: 50%;
}
.titlebg{
     font-family: 'Anton', sans-serif;
    background-image: url(../img/titlebg.jpg);
    background-size: 100% auto;
    font-style: italic;
    font-weight: bold;
    text-align: left;
}
.pembuka{
    background-color:white;
    margin: 20 20 20 20;
    padding: 20 20 20 20;
    
    
}
h1{
    color:#0d1f2d;
}

@media (min-width:1025px){
.pembuka{
    margin-left:30%;
    margin-right:30%;
}
}

@media only screen and (min-width:1025px) {
            .hide-on-desktop, * [aria-labelledby='hide-on-desktop'] {
                display: none;
                max-height: 0;
                overflow: hidden;
            }
        }
.exit {
    float:right;
    margin-left:84%;
    margin-top:1%;
    
}

.demo-layout-transparent {
  background-image: url("../img/bg.png") center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color:black;
}