/*
SohoPro-Medium
TitilliumWeb-Regular

Geneco Green
#2dc84c

Geneco Blue
#001489
*/

@font-face {
    font-family: 'SohoPro-Medium';
    src: url('fonts/SohoPro-Medium') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TitilliumWeb-Regular';
    src: url('fonts/TitilliumWeb-Regular') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	background-color: #003363;;
    background-image: url('blue-motif-4.jpg');
	background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.game_input {
	padding: 10px 10px;
	font-family: "TitilliumWeb-Regular";
	color: #001489;
	border: 2px solid #001489;
	border-radius: 25px;
}

.game_input::placeholder {
	color: #001489;
	opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
	color: #001489;
}

/* Using CSS works,
   but hard to balance between different screens,
   using Text elements is easier. */
/* .panel-heading {
	height: 70px;
    display: flex;
    align-items: flex-end;
	justify-content: center;

	font-family: "SohoPro-Medium", "Arial", sans-serif;
	text-align: center;
	line-height: 1.1;
}

.panel-text {
	font-family: "TitilliumWeb-Regular", "Arial", sans-serif;
	text-align: center;
	line-height: 1.3;

	color: #282f7c !important;
}

.panel-text p {}

@media (orientation: portrait) {
    .panel-heading {
		margin-top: 0;
		font-size: clamp(18px, calc(18px + 1.5vw), 36px);
	}

	.panel-text {
		margin-top: 0;
		font-size: clamp(10px, calc(10px + 1.5vw), 15px);
	}
}

/* VERY TALL landscape / desktop fullscreen * /
@media (orientation: landscape) and (min-height: 1001px) {
    .panel-heading {
		margin-top: 0;
		font-size: clamp(20px, calc(20px + 1.7vw), 46px);
	}

	.panel-text {
		margin-top: 0;
		font-size: clamp(13px, calc(13px + 1.5vw), 22px);
	}
}

/* TALL landscape * /
@media (orientation: landscape) and (min-height: 701px) {
    .panel-heading {
		margin-top: 0;
		font-size: clamp(18px, calc(18px + 1.5vw), 36px);
	}

	.panel-text {
		margin-top: 0;
		font-size: clamp(10px, calc(10px + 1.5vw), 17px);
	}
}

/* SHORT landscape * /
@media (orientation: landscape) and (max-height: 700px) {
    .panel-heading {
		margin-top: -20px;
		font-size: clamp(16px, calc(16px + 1.3vw), 30px);
	}

	.panel-text {
		margin-top: 0;
		font-size: clamp(10px, calc(10px + 1.3vw), 13px);
	}
}

/* Phone in portrait * /
@media (max-width: 500px) and (max-height: 1000px) {
	.panel-heading {
		margin-top: -20px;
		font-size: clamp(18px, calc(18px + 1.5vw), 36px);
	}

	.panel-text {
		margin-top: 0;
		font-size: clamp(10px, calc(10px + 1.4vw), 14px);
	}
}

/* TINY Phone in portrait * /
@media (max-width: 400px) and (max-height: 500px) {
	.panel-heading {
		margin-top: -25px;
		font-size: clamp(18px, calc(18px + 1.5vw), 36px);
	}

	.panel-text {
		margin-top: -10px;
		font-size: clamp(8px, calc(8px + 1.2vw), 12px);
	}
} */