@import url('https://cdn.ravensburger.com/fonts/parisienne.css');

html {
	background-color: #b4bbb4;
	background: linear-gradient(165deg, rgba(180,187,180,1) 0%, rgba(128,139,149,1) 100%);
}

body {
	font-size: 100%;
	font-family: Calibri, Arial, sans-serif;
	min-height: 100vh;
	min-width: 100vw;
	background: url(./rpslogotile.png) repeat;
	background-attachment: fixed;
	overflow-x: hidden;
}

input {
	font-size: 100%;
	font-family: Calibri, Arial, sans-serif;
}

select {
	border-radius: 0;
	padding: 0.5rem;
}

label {
	display: block;
}

main {
	background: #8197AF;
	border: 3px outset #99abc2;
	max-width: 700px;
	width: calc(100% - 40px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
#final {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 40px 0;
	position: relative;
}
#final .inner {
	background: #8197AF;
	border: 3px outset #99abc2;
	max-width: 700px;
	width: calc(100% - 40px);
	position: relative;
	top: 0;
	left: 50%;
	transform: translate(-51%, 0);
	z-index: +3;
}

p {
	margin: 0 0 8px;
}

.box-header {
	padding: 5px 2px;
	background: rgb(54,128,127);
	background: linear-gradient(90deg, rgba(54,128,127,1) 0%, rgba(80,127,143,1) 100%);
}
	.box-header h1 {
		color: #ffffff;
		font-weight: bold;
	}

.box-text {
	padding: 20px 10px;
	margin: 20px 10px 10px;
	border: 2px groove #a0acc0;
	position: relative;
}
	.box-text h1 {
		background: #8197AF;
		display: block;
		position: absolute;
		padding: 0 5px;
		top: -10px;
		font-weight: bold;
	}

.questionnaire {
	padding: 10px;
}
.questionnaire span {
	position: relative;
	display: inline-block;
}
.false-title {
	width: 20%;
	min-width: 140px;
}
.false-entry {
	width: 40%;
	min-width: 200px;
	border: 2px inset #a0acc0;
	padding: 1px 25px 1px 5px;
	background: #b4bbb4;
}

form {
	text-align: center;
	margin: 0 10px 10px;
}

input[type="number"] {
	outline: none;
	padding: 5px;
	border: 3px inset #99abc2;
}

input[type="submit"] {
	border: 3px outset #99abc2;
	background: #8197af;
	margin: 10px;
	padding: 10px 20px;
	cursor: pointer;
}
	input[type="submit"]:hover,
	input[type="submit"]:focus,
	input[type="submit"]:active {
		border: 3px inset #99abc2;
		outline: none;
	}

input[type="button"] {
	border: 3px outset #99abc2;
	background: #8197af;
	margin: 10px;
	padding: 10px 20px;
	cursor: pointer;
}
	input[type="button"]:hover,
	input[type="button"]:focus,
	input[type="button"]:active {
		border: 3px inset #99abc2;
		outline: none;
	}

.confession {
	border: 2px groove #a0acc0;
	padding: 10px;
	margin: 10px;
	background: #b4bbb4;
	color: #333;
}

.signature {
	color: #333;
	font-family: 'Parisienne', cursive;
	font-size: 24px;
}

.tf-minilogo {
	position: fixed;
	width: 120px;
	height: 75px;
	right: 15px;
	bottom: 10px;
	opacity: 0.2;
	z-index: 1;
	transition: opacity 0.3s ease-in-out;
}
.tf-minilogo:hover,
.tf-minilogo:focus,
.tf-minilogo:active {
	opacity: 0.7;
	transition: opacity 0.1s ease-in-out;
}
.tf-minilogo img {
	width: 100%;
	height: 100%;
}



/* MEDIA QUERIES */

@media screen and (max-width: 600px) {
	main {
		width: calc(100% - 20px);
		top: 20px;
		transform: translate(-50%, 0);
	}
}