@font-face {
    font-family: unispace;
    src: url("../fonts/unispace\ rg.ttf");
}

body {
	background-color: var(--darkGrey);
	
	font-family: unispace, 'Courier New', monospace;
	color: var(--mainColor);
	margin: 0;

	height: 100%;
	line-height: 1.5em;;

	background-image: url("../images/Ruthless1Test2.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	background-attachment: fixed;
}

h2, h3 {
	line-height: 1.5em;
}

.float-right {
	float: right;
}

.content {
	min-height: calc(100% - 189px);
	overflow: auto;
}

.content .content-box {
	height: calc(100% - 500px);
	padding: 100px 100px 50px 100px;
	background-color: var(--darkGreyTrans);
}

.header {
	position: fixed;
	width: 100%;
	background-color: black;
}

.header-content {
	margin: 20px;
	width: calc(100% - 40px);
	font-size: var(--fontSizeHeader);
}

.header .button-bar {
	float: right;
}

.home {
	cursor: pointer;

	background: none;
	border: none;

	font-family: unispace, 'Courier New', monospace;
	font-size: var(--fontSizeHeader);
	color: var(--mainColor);
	text-decoration: underline;
}

.trailer {
	margin: 50px;
	width: calc(100% - 100px);
	height: calc(100% - 100px);
}

.itch-widget {
	margin-bottom: 50px;
	margin-left: calc(50% - 277px);
}

.btn-header {
	cursor: pointer;

	background: none;
	border: none;

	margin: 1px 8px;

	font-family: unispace, 'Courier New', monospace;
	font-size: var(--fontSizeHeader);
	color: var(--mainColor);
	text-decoration: underline;
}

.btn-header.country{
	cursor: pointer;
	text-decoration: none;
}

.footer {
	padding: 20px;
	text-align: center;
	background-color: black;
}

.socials-link-img {
	cursor: pointer;

	height: 50px;
	width: auto;
	padding: 25px;
}

.imprint {
	color: var(--lightGrey);
}

.imprint-table {
	color: var(--lightGrey);
	width: 100%;
	text-align: center;
}

.btn-footer {
	cursor: pointer;

	background: none;
	border: none;

	margin: 1px 8px;

	font-family: unispace, 'Courier New', monospace;
	font-size: var(--fontSizeFooter);
	color: var(--lightGrey);
}

.presentation-img {
	width: 100%;
	max-width: 1200px;
}

.hide {
	display: none;
}

@media (orientation: portrait) {
	.only-landscape {
		display: none;
	}

	.only-portrait.hidden {
		display: none;
	}

	.only-portrait.show {
		display: block;
		position: fixed;
		top: 85px;
		padding: 20px;
		background-color: black;
	}

	#language_menu {
		right: 96px
	}

	#burger_menu {
		right: 0px
	}

	.header-content {
		font-size: var(--fontSizeHeaderPortrait);
	}

	.btn-burger-menu {
		display: block;
		margin-bottom: 25px;
	}
}

@media (orientation: landscape) {
	.only-portrait {
		display: none;
	}
}