@font-face {
    font-family: "Mesquite Std", sans-serif;
    src: url(../fonts/mesquitestd.ttf);
    }
    
        @media (min-width: 1px) and (max-width: 399px) {
    h1 {
    margin-top: -20%;
    font-size: 3em;
    }
    header {
    height: 10em;
    }
    }
    
    @media (min-width: 400px) and (max-width: 600px) {
    h1 {
    margin-top: -15%;
    font-size: 3em;
    }
    header {
    height: 20em; 
    }
    }
    
    @media (min-width: 601px) {
        h1 {
    margin-top: -10%;
    width: 100%;
    font-size: 6em;
    }
    	header {
    	height: 400px; 
    	}
    }
    
       h1 {
    font-family: "Mesquite Std", sans-serif !important;
    }

    
    body {
  		/* padding-top: 50px; */
		background: url('../img/bg.png');
	}
	
	.yokai {
		background-color: white;
	}
	
	#spacer {
		height: 50px;
		width: 100%;
	}
	
	#spacer2 {
		height: 20px;
		width: 100%;
	}
	
	/* img { 
	-webkit-border-radius: 0em 0em 4em 4em / 2em;
	-moz-border-radius: 0em 0em 4em 4em / 2em;
	border-radius: 0em 0em 4em 4em / 2em;
	} */
	
	.container {padding: 0; margin: 0 auto; }
	
	
	#fixme {
		position: fixed;left: 0;right: 0; top:0;
		width: 100%;
	}
	
	.jumbotron {
		background: url("../img/mast.png") center;
		background-size: cover;
		height: 20em;
	}
	
	#library img {
	max-width:128px;
	border:1px solid #ccc;
	padding: 5px;
	margin: 10px;
	}
	
	h6 {margin: 0; padding: 0;}
	
	
	.paddie { padding: 2em; width: 100%;}

	
	.navbar {z-index: 999 !important; }
	img, img.* {z-index: 0 !important;}