/*
 * Stairway.js: a simple JavaScript privacy quiz
 * Copyright © 2021 luca0N!
 *
 * This file is part of Stairway.js.
 *
 * Stairway.js is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Stairway.js is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Stairway.js.  If not, see <https://www.gnu.org/licenses/>.
 *
 * E-mail contact: <luca0n@luca0n.com>.
 */

html {
	scroll-behavior: smooth;
}

body {
	margin-left: 15%;
	margin-right: 15%;
	margin-top: 0;
	margin-bottom: 0;

	background-color: #bfc0cd;
}

.content {
	background-color: #fff;
	padding: 24px;
	box-shadow: 0 0 32px #0004;
}

#results {
	display: none;
	animation-duration: 1s;
	animation-name: fadein;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.warning {
	color: white;
	background-color: orange;
	padding: 4px;
}

.badge-small {
	padding: 6px 6px 2px 6px;
	font-weight: bold;
	text-shadow: 0 0 2px #000c;
}

.badge {
	display: none;
	padding: 14px;
	font-weight: bold;
	font-size: 32pt;
	box-shadow: 0px 0px 5px gray;
	text-shadow: 0 0 2px #000c;
}

.grade-s {
	color: white;
	background: linear-gradient(#881df9, #881db9);
	border-radius: 24px;
}
.grade-a{
	color: white;
	background: linear-gradient(#50d50d, #0a0);
	border-radius: 18px;
}
.grade-b{
	color: white;
	background: linear-gradient(#afff00, #d4db00);
	border-radius: 12px;
}
.grade-c{
	color: white;
	background: linear-gradient(#ff0, #fc0);
	border-radius: 8px;
}
.grade-d{
	color: white;
	background: linear-gradient(#f4a50d, #f36d0c);
	border-radius: 6px;
}
.grade-e{
	color: white;
	background: linear-gradient(#ff7800, #bd0000);
	border-radius: 4px;
}
.grade-f{
	color: white;
	background: linear-gradient(#ca0000, #4a0000);
}

.section-question {
	margin-top: 32px;
	margin-bottom: 32px;
	padding: 15px;
	background-color: #feffea;
	box-shadow: 0 0 12px #0004;

	transition: box-shadow 0.1s;
}

.section-question:hover {
	box-shadow: 0 0 18px #0008;
}

#warning {
	display: none;
}

#quiz {
	animation-duration: 1s;
	animation-name: fadein;
}

#quiz-title, #quiz-author {
	display: none;
}

.question {
	font-weight: bold;
}

.section-report {
	margin-top: 12px;
	padding: 15px;
	box-shadow: 0 0 12px #0004;
}

.section-report-good {
	background-color: #aaffaa;
}
.section-report-warning {
	background-color: #ffa;
}
.section-report-bad {
	background-color: #ffd79f;
}
.section-report-critical {
	background-color: #fcc;
}

.advisory {
	font-weight: bold;
}

.report-title {
	font-weight: bold;
}
.report-type {
	padding: 4px 4px 0px 4px;
	text-shadow: 0 0 2px #0005;
	box-shadow: 2px 2px 2px #0004;
}
.report-good {
	color: white;
	background-color: #3C0;
}
.report-warning {
	background-color: yellow;
}
.report-bad {
	color: white;
	background-color: orange;
}
.report-critical {
	color: white;
	background-color: red;
}