body {
    background-image: url("background.jpg");
    background-size: cover;
    background-position: center top;   
}

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

@font-face {
    font-family: Nexa;
    src: url("fonts/NexaRegular.otf") format("opentype");
}

@font-face {
    font-family: Nexa;
    font-weight: bold;
    src: url("fonts/NexaBlack.otf") format("opentype");
}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.pie {
	--p:20;      /* the percentage */
	--b:22px;    /* the thickness */
	--c:darkred; /* the color */
	--w:130px;   /* the size*/

	width:130px;
	aspect-ratio:1/1;
	position:relative;
	display:inline-grid;
	margin-left:calc(50% - 65px);
	place-content:center;
	font-size:60px;
	font-weight:700;
	font-family:'Open Sans', sans-serif;
	color:var(--c);
    padding-top: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}


.question {
	width:100%;
	height:70px;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

.answer {
	width:100%;
	height:40px;
	text-align:center;
	border-radius:0.5em;
	border: 1px solid #999999;
	margin-bottom:10px;
	vertical-align:middle;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

.answer:hover {
	background-color:#da2127;
	cursor:pointer;
	color:#ffffff;
}

.contain {
	width:330px;
	left:calc(50% - 165px);
	font-family:'Nexa';
	top:calc(50% - 360px);
	background-color:#ffffff99;
}

.contain_fp {
	width:550px;
	font-family:'Nexa';
	background-color:#ffffffed;
	padding:20px;
	border-radius:20px;
	margin:auto;
}


.headline {
	font-size:30px;
	font-weight:700;
	text-align:center;
	margin-top:25px;
}

.caption {
	font-size:20px;
	text-align:center;
	margin-top:10px;
	padding:10px;
}

.iconred {
	font-size:100px;
	color:#eb0000;
	text-align:center;
	margin-top:20px;
}

.icongreen {
	font-size:100px;
	color:#218f21;
	text-align:center;
	margin-top:20px;
}

.logo {
	width:100%; 
	text-align:center; 
	position:relative; 
	z-index:9; 
}

input {
	font-family:'Nexa', sans-serif;
	padding:10px;
	border:2px solid #556c62;
	background-color:#ffffff;
	border-radius:10px;
}

select {
	font-family:'Nexa', sans-serif;
	padding:0.5em;
	border:0px solid #999999;
	background-color:#dcdbd9;
}

option {
	font-family:'Nexa', sans-serif;
	padding-top:0.5em;
	border:0px solid #999999;
	background-color:#dcdbd9;
}

h1 {
	font-family:'Nexa', sans-serif;
	font-size:32px;
	color:#da2127;
}

body {
	background-color:#f1f1f1;
	color:#556c62;
}

@media screen and (max-width: 600px) {
	
	.contain {
		width:98%;
		position:relative;
		left:auto;
		top:auto;
		padding:1%;
	}
	
	.contain_fp {
		width:98%;
		position:relative;
		left:auto;
		top:auto;
		padding:1%;
	}	
	
	h1 {
		font-size:24px;
	}
	
	table {
		font-size:0.8em;
	}
	
	.holly {
		display:none;
	}
	
	.logo {
		margin-top:10px;
	}	
	
	.question {
		height:50px;
	}
	
	.answer {
		height:30px;
	}
	
	.pie {
		font-size:30px;
		width:100px;
	}
	
}