@font-face {
	font-family: "Lato-Light";
	src: url("font/Lato-Light.ttf") format("truetype");
	}

@font-face {
	font-family: "Cinzel-Regular";
	src: url("font/Cinzel-Regular.ttf") format("truetype");
	}

@font-face {
	font-family: "InknutAntiqua-Bold";
	src: url("font/InknutAntiqua-Bold.ttf") format("truetype");
	}	

@font-face {
	font-family: "Bradhict";
	src: url("font/Bradhict.ttf") format("truetype");
	}

@font-face {
	font-family: "AmaticSC-Bold";
	src: url("font/AmaticSC-Bold.ttf") format("truetype");
    }
 
/* Menu Icon */	
.menuFloat {
	top: 0;
	right: 0; 	  
	position: fixed;
	z-index: 10;
	line-height: 1.3;
	font-size: calc(6mm + 4vw);
	padding-right: 1vw;
}

/* Menu Bar */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 11;
    top: 0;
	right: 0;
	font-family: "Cinzel-Regular";
	background-color: black;
	font-size: calc(4mm + 1.5vw);
	line-height: 0.8;
    overflow-x: hidden;
    transition: 0.5s;
	padding-top: 60px;
}

/* Menu Items */
.sidenav a {  	
  	text-decoration: none;	  
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
  	display: block;
	transition: 0.3s;
	padding-top: calc(5mm + 1.5vw);
}

.menuSubHead {
	font-family: "Lato-Light";
	font-size: calc(2mm + 1.0vw);	
}
/* Menu Hover */
.sidenav a:hover {
	color: white;
	font-size: calc(6mm + 1.5vw);
}

/* Menu CLose */
.sidenav .closebtn {
  	position: absolute;
  	top: 0;
	right: 0;
	padding-top: 0mm;
	padding-right: 2mm;
	line-height: 0.5;
	font-size: calc(15mm + 10vw);
	color: white;
}

html, body { 
	box-sizing: border-box; 	
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Times New Roman";	
    font-size: 1em;
    color: rgb(177, 177, 177);
}

h1 {	
    font-family: "InknutAntiqua-Bold", "Georgia";
    color: rgb(167, 167, 167);
	letter-spacing: -0.09em;
	line-height: 0.5;
	text-align: right;
	padding-right: 2mm;	
	font-size: calc(9mm + 3vw);
}

.h1dot { color: #F64C72; }

h2{
	font-family: "AmaticSC-Bold";
	font-weight: 600;
	line-height: 0.5;
	text-align: right;
    padding-right: 2mm;
    font-size: calc(2mm + 1vw);
    color: rgb(177, 177, 177);
}

.title {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 1vw;
}

.flesh {
    font-family: "Bradhict";
    text-align: left;    
    line-height: 0.9;
    letter-spacing: -0.01em;    
    margin-left: 2vw;
    margin-right: 2vw;
    padding-top: 4mm;
    font-size: calc(4mm + 1.2vw);
}

.highlights{
	color: rgb(252, 252, 252);
}

@media (orientation: portrait) {
    .headContent:before {
        position: fixed;
        content: '';
        overflow-x: hidden;
        overflow-y: hidden;
        left: 0;
        top: 0;
        height: 40%;
        width: 100%;
        background-size: 100% 100%;
		background-color: #0D19A3F0;
		-webkit-animation: flickerAnimation 5s infinite;
		-moz-animation: flickerAnimation 5s infinite;
		-o-animation: flickerAnimation 5s infinite;
        animation: flickerAnimation 5s infinite;
    }

    .headContent {
        position: fixed;
        content: '';
        left: 0;
        top: 0;
        height: 40%;
        width: 100%;
        background: url(header_potrait.jpg) ;
        background-size: 100% 100%;
    }

    .bodyContent {
        position: fixed;        
        right: 0;
        bottom: 0;
        height: 60%;
        width: 100%;
        background-color: #282828;
        overflow-y: auto;     
    }

    .flesh {
        margin-top: 2vh;
    }
}

@media (orientation: landscape) {
    .headContent:before {
        position: fixed;
        content: '';
        overflow-x: hidden;
        overflow-y: hidden;
        left: 0;
        top: 0;
        height: 100%;
        width: 35%;
        background-size: 100% 100%;
		background-color: #3500D3F0;
		-webkit-animation: flickerAnimation 5s infinite;
		-moz-animation: flickerAnimation 5s infinite;
		-o-animation: flickerAnimation 5s infinite;
        animation: flickerAnimation 5s infinite;
    }

    .headContent {
        position: fixed;
        content: '';
        left: 0;
        top: 0;
        height: 100%;
        width: 35%;
        background-image: url(header_landscape.jpg);
        background-size: 100% 100%;
    }

    .bodyContent {
        position: fixed;        
        right: 0;
        bottom: 0;
        height: 100%;
        width: 65%;
        background-color: #282828;
        overflow-y: auto;     
    }

    .title {
        margin-bottom: 30vh;
    }

    .flesh {
        margin-top: 25vh;
    }
}

@keyframes flickerAnimation {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
	0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    } 
}