@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'MBFont';
    /*a name to be used later*/
    src: url('Media/mbbold-Regular.ttf');
    /*URL to font*/
}

h1 {
    font-family: verdana;
	font-size: 4vh;
   	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-image: url(Media/yellow-wall.jpg);
}

h1 a{
	text-decoration: none;
}

h1 a:hover {
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-image: url(Media/yellow-wall-fade.jpg);
}

html {
	height: 100%;
	width: 100%;
	margin: 0;
    padding: 0;
	background-image: url('Media/DSC_1505.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	background-position: center top;
}

.label {
	text-align: center;
	padding: 10px;
	cursor: pointer;
}

.label a{
	text-align: center;
    font-family: MBFont;
    font-size: 4.5vh;
    text-decoration: none;
	cursor: pointer;
	font-weight: bolder;
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-image: url(Media/yellow-wall.jpg);
}

.label a:hover {
	text-decoration: underline double;
	font-size: 7vh;
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-image: url(Media/yellow-wall-fade.jpg);
}

.float {
	position: fixed;
	background-color: red;
}

h3 {
	font-family: "Satisfy", serif;
	font-weight:lighter;
	font-style:normal;
	font-size: 7vh; 
	margin: 5px;
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-image: url(Media/yellow-wall-fade.jpg);
}

@media screen and (orientation: portrait)
{
	html {background-image:url(Media/IMG_4767.jpg);}
	h1 {font-size: 3vh;}
}
@media screen and (orientation: landscape)
{
	html {background-image:url(Media/DSC_1505.jpg);}
	.label a {font-size: 6vh;}
}

#iframersvp { 
	width:70vh;
	height:100vh;
	frameborder:0;
	marginheight:0;
	marginwidth:0;
}

/* Fade-In Effect */
    .visible {
        visibility: visible;
        opacity: 1;
        transition: opacity 3s linear;
    }

/* Fade-Out Effect */
    .hidden {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 3s, opacity 2s linear;
    }