@charset "utf-8";
/* ----------------------------------------------------------------------- Fonts ----------------------------------------------------------------------- */
@font-face{
    font-family: 'Comfortaa-Regulart';
    src: url('../fonts/Comfortaa-Regulart.ttf');
    font-style: normal;
}
@font-face{
    font-family: 'Comfortaa-Light';
    src: url('../fonts/Comfortaa-Light.ttf');
    font-style: normal;
}
@font-face{
    font-family: 'Dosis-Regular';
    src: url('../fonts/Dosis-Regular.ttf');
    font-style: normal;
}
@font-face{
    font-family: 'Dosis-Bold';
    src: url('../fonts/Dosis-Bold.ttf');
    font-style: normal;
}
@font-face{
    font-family: 'Dosis-Light';
    src: url('../fonts/Dosis-Light.ttf');
    font-style: normal;
}
@font-face{
    font-family: "remixicon";
    src: url('../fonts/remixicon.ttf');
}


/* ---------------------------------------------------------------------- General ---------------------------------------------------------------------- */
html{ scroll-behavior: smooth; }
html, body{
	margin: 0px;
	padding: 0px;
	height: 100%;
	min-width: 1024px;
}
body{
	display: flex;
	flex-direction: column;
	flex-wrap: no-wrap;
	justify-content: space-evenly;
	align-items: center;
	
	padding: 50px;
	
	width: calc(100% - 50px - 50px);
	min-width: 924px;
	height: calc(100% - 50px - 50px);
	font-size: 0px;
	line-height: 0px;
	
	color: #5c4138;
	background-color: #ffffff;

	overflow: auto;
	
	background-image: url(../images/worldDotted.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}
div, font, p, a, b, span, h1{
	display: inline-block;
	font-family: "Dosis-Light", sans-serif;
	font-size: 32px;
	line-height: 34px;
	color: #d6ceb8;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
}
b{ font-family: "Dosis-Bold", sans-serif; }
h1{
	font-family: "Comfortaa-Regulart", sans-serif;
	display: inline;
	font-size: 100px;
	line-height: 110px;
}
a{
	font-family: 'Dosis-Regular', sans-serif;
	color: #a7a190;
	text-decoration: none;
	outline: none;
	transition: all 0.1s;
}
a:hover{ color: #a7a090; }
img{
	border: 0px;
	margin: 0px;
	padding: 0px;
}

/* ----------------------------------------------------------------------- Tables ---------------------------------------------------------------------- */
table{
	border: 0px;
	border-collapse: collapse;
}
table, tr, td{
	font-family: "Dosis-Light", sans-serif;
	font-size: 32px;
	line-height: 34px;
	color: #464d55;
	margin: 0px;
	padding: 0px;
}
td{
	vertical-align: top;
	text-align: left;
}

/* ----------------------------------------------------------------------- Forms ----------------------------------------------------------------------- */
form, input, textarea, button, select{
	font-size: 18px;
	color: #d6ceb8;
	font-weight: normal;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}
input, textarea, button, select{
	font-family: "Dosis-Light", sans-serif;
	border: 1px solid #a7a190;
	padding: 5px;
	color: #d6ceb8;
}

/* ----- Content ----- */
.logoContainer{
	width: 100%;
	text-align: center;
}
.drrfmSkullLogoContainer{
	width: 300px;
	height: 300px;
	background-image: url(../images/drrfmSkullLogo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.drrfmKBLogoContainer{
	width: 223px;
	height: 150px;
	background-image: url(../images/drrfmKBLogo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin-left: 50px;
}
.drrfmCameraLogoContainer{
	width: 207px;
	height: 150px;
	background-image: url(../images/drrfmCameraLogo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin-left: 50px;
}
.drrfmWorldLogoContainer{
	width: 150px;
	height: 150px;
	background-image: url(../images/drrfmWorldLogo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin-left: 50px;
}
.linkWrapper{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	align-content: center;
	gap: 50px;
	width: 100%;
}
.iconLink{
	display: inline-block;
	font-family: "remixicon";
	font-size: 50px;
	line-height: 75px;
	color: #d6ceb8;
	margin-right: 25px;
	vertical-align: top;
}
.iconLink:hover{
	transform: scale(0.8);
	transform-origin: center center;
}
.lastIconLink{ margin-right: 0px; }
.qrLink{
	width: 75px;
	height: 75px;
	background-image: url(../images/qrCode-drrfm.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.qrLink:hover{
	transform: scale(0.85);
	transform-origin: center center;
	background-image: url(../images/qrCode-drrfm2.png);
}

/* ----- mobile Styles ----- */
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: portrait){
	h1{
		font-size: 8vh;
		line-height: 8vh;
	}
	.drrfmSkullLogoContainer{
		width: 25vh;
		height: 25vh;
	}
	.linkWrapper{
		flex-direction: column;
		gap: 25px;
	}
	.iconLink{
		font-size: 100px;
		line-height: 110px;
	}
	.qrLink{
		width: 110px;
		height: 110px;
	}
}
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape){
	h1{
		font-size: 60px;
		line-height: 60px;
	}
	.drrfmSkullLogoContainer{
		width: 150px;
		height: 150px;
	}
	.drrfmKBLogoContainer{
		width: 149px;
		height: 100px;
	}
	.drrfmCameraLogoContainer{
		width: 138px;
		height: 100px;
	}
	.drrfmWorldLogoContainer{
		width: 100px;
		height: 100px;
	}
}