@font-face {
    font-family: Roxborough;
    src: url('./font/Roxborough.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,body{
	height:100%;padding:0;margin:0
}

.index{
	height: 300px;
	display: grid;
	justify-items: right;
}

.menu {
	position:absolute;
	font-size: 40px;
	right: 20px;
	top: 20px
}

.page{
	position:relative;
	display:table;
	table-layout:fixed;
	width:100%;height:100%;
	line-height:normal;
	text-align:center;
	font-family:Roxborough, Helvetica, sans-serif, sans-serif;
	font-size:1.1em;
	color:#E13B3B;
	background-color:#f0f0f0;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-attachment:fixed
}
	
h1,h2,h3,h4,h5{
	line-height:1.3;font-weight:normal
}

.bg-position-top{
	background-position:50% 0
}

.bg-position-middle{
	background-position:50% 50%
}

.bg-position-bottom{
	background-position:50% 100%
}

.page:before{
	content:"";
	position:absolute;
	top:0;left:0;bottom:0;right:0;
	filter:alpha(opacity=40);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";opacity:0.4
}

img{
	max-width:100%;
	width:auto\9;
	height:auto
}

a,a:link{
	color:inherit;
	filter:alpha(opacity=85);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	opacity:0.85
}

a:hover,a:focus,a:active{
	filter:alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity:1;
	-webkit-transition:all.3s ease-in-out;
	transition:all.3s ease-in-out
}
	
ul,ol{
	display:inline-block;
	text-align:left;
	max-width:50%
}

.container{
	position:relative;
	display:table-cell;
	width:100%;
	vertical-align:middle;
	padding:1em 2em;
	z-index:1
}
	
.content{
		max-width:900px;
		margin:0 
		auto
	}
	
.social-links:empty{
	outline:1px solid yellow
}
	
.social-links{padding:1em 0;vertical-align:middle
	}
	
.social-links a{
	padding:0 0.3em;
	line-height:normal
	}
	
s.hosting-info{
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	right:0;
	padding:1em;
	font-size:0.8em}
	
.hosting-info p{margin:0;padding:0;font-size:12px}

.overlay-dark{
	background-color:#333
}
.overlay-dark:before{background-color:#333

}
.overlay-bright{
	background-color:white
}
	
.overlay-bright:before{
	background-color:white;
	filter:alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	opacity:0.7
}

/* @media screen{
	.page[class]{
			background-image:url("./background.png")
	}
} */
		
body.debug:after{
	content:"default";
	position:fixed;
	left:0;
	bottom:0;
	background-color:white;
	color:black;
	padding:0.5em;
	font-size:10px;
	text-transform:uppercase
}
		
@media screen and (max-width: 640px){
	body.debug:after{
		content:"small"
	}
	h1{
		font-size:2em
		}
	ul,ol{
		max-width:none
		}
	.page{
		min-width:300px
		}
	.page .container{
		padding:3em
	}
}
	
@media screen and (min-width: 641px) and (max-width: 1199px),(min-height:500px) and (max-height: 1199px){
	body.debug:after{
		content:"medium"
	}
}
	
@media screen and (min-width: 1200px){
	body.debug:after{content:"large"}
	}
	
.page .fallback-bg{display:none}.ie8 
.page .fallback-bg{
	display:block;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	width:100%;height:100%;
	max-width:inherit;z-index:0
}