// Include theme-specific fonts
@font-face {
  font-family: 'Fragen';
  src: url('fonts/Fragen Extra Bold Italic.woff2') format('woff2');
  font-style:   italic;
  font-weight:  600;
}
@font-face {
  font-family: 'Fragen';
  src: url('fonts/Fragen Extra Bold.woff2') format('woff2');
  font-style:   normal;
  font-weight:  600;
}		
// Include theme-specific fonts
@font-face {
  font-family: 'Regola';
  src: url('fonts/RegolaPro-Book.woff2') format('woff2');
  font-style:   normal;
  font-weight:  300;
}
@font-face {
  font-family: 'Regola';
  src: url('fonts/RegolaPro-Bold.woff2') format('woff2');
  font-style:   normal;
  font-weight:  bold;
}		
/* 
#FF0099 Magenta
#FFF618 Limonade
#570039 Balsamique
#FF7495 Flamant rose
#000032 Minuit
#4D4D70 Sensei
#808098 Ninja
 */
:root{
--bg-color: rgb(255, 255, 255);
--link-color: #FF0099;
--link-color-hover:#FF7495;
--link-color-visited:#4D4D70;
--text-color: #000032;
}
@media(prefers-color-scheme: dark) {
  :root{
	--bg-color: #570039;
	--text-color: #ffffff;
	}
}
html{
	font-size: 100%;
}
body{
	background-color: var(--bg-color);
	padding: 0;
	margin: 0;
	font-family: Regola, -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
	font-size: calc(0.7em + 1vw);
	  background-color: var(--bg-color);
	  border-top: var(--link-color) 1vh solid;
	color: var(--text-color);
}
.logo{
	fill: var(--link-color);
}
header, section{
	margin: 0 auto;
	padding: 2vmax;
	max-width: 40rem;
}
h1, h2, h3, h4, h5{
  font-family: Fragen, serif;
  word-wrap: break-word;
}
h1, .h1, .h-huge {
  font-size: calc(2.1em + 1vw);
  line-height: 1.1em;
  font-weight: 600;
  margin-top: 0.3em;
  margin-bottom: 0;
}
h1 em{
	font-style: italic;
	color: var(--link-color);
}
h2, .h2 {
  font-size: calc(1.2em + 1vw);
  line-height: 1.3em;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
}
h3, .h3 {
  font-size: calc(0.9em + 1vw);
  font-weight: normal;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
}
h4, .h4 {
  font-size: calc(0.8em + 1vw);
  font-weight: normal;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
}
form{
	
}
.form-control{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 1em;
}
label{
	margin-bottom: 4px;
}
fieldset{
	margin-bottom: 2em;
	border: 1px solid var(--link-color);
	border-radius: 20px;
}
legend{
	color: var(--link-color);
	padding: 0 1em;
}
input, select, textarea {
  font-family: inherit;
  font-size: 16px;
}
input, textarea, select, button {
  width : 100%;
  padding: 5px;
  margin: 0;
  box-sizing: border-box;
}
input[type=submit], .btn{
	border-radius: 999px;
	padding: 0.75rem 2rem 1rem;
	border: 0;
	background-color: var(--link-color);
	color: var(--bg-color);
	font-weight: bold;
}


.answer{

}
.answer article{
	width:100%;
	margin-bottom: 4em;
}