@font-face
{
    font-family: "Monoton";
    src: url("./Monoton-Regular.ttf");
}
@font-face
{
    font-family: "Louie";
    src: url("./HEY LOUIE.otf") format("opentype");
}
@font-face
{
    font-family: "Digital";
    src: url("./DS-DIGI.ttf");
}
@font-face
{
font-family: Boogie;
src: url("./BoogieBoysRegular-L36y3.otf") format("opentype");
}
body
{
   text-align:center;
   font-family:Helvetica;
   background: linear-gradient(215deg, rgba(250,250,129,1) -0%, rgba(250,0,255,1) 100%);
   background-size: cover;
}
a:link,a:visited
{
  text-decoration: none;
  color:black;
}
.petra
{
    font-size:3.2em;
    text-shadow: 3px 3px white;
    letter-spacing: 3px;
    font-family: Monoton;
    font-weight: bold;
    border: 5px solid #d0a030;
    background-color: #d4af37;
    padding: 5px 40px;
    border-radius: 40px;
}
.quiz
{
   text-align: center;
   border: 1px solid black;
   border-radius: 10px;
   height: 100px;
   vertical-align: middle;	
   font-family: Monoton;
   font-size: 3em;
   font-weight: bold;
   width:25%;
   text-shadow: 2px 2px white;
}
.Kategorie
{
   text-align: center;
   border: 3px solid black;
   border-radius: 10px;
   height: 60px;
   font-size: 2.5em;
   font-weight: bold;
   text-shadow: 3px 3px white;
   font-family: Louie;
   padding-top: 10px;
}
.kandidat
{
   padding: 12 0;
   text-align: center;
   border: 3px solid yellow;
   color:white;
   border-radius: 10px;
   height: 60px;
   width: 25%;
   background-color: black;  /* #d4af37;*/
   border: 5px solid #ffa620;
   color:#ffa620;
   font-size: 3.2em;
   font-weight: bold;
   font-family: Digital;
}
#Q
{
   padding: 0 40 20 40;
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   z-index: 9999;
   display: none;
   width: 50%;
   min-height: height:50%;
   background-color: #fefeFe;
   border-radius: 50px;
   border:1px solid black;
   box-shadow: 0px 0px 12px 28px  #ffa620;
   Color: #003;
   font-size: 2.0em;
   background-color: #fcfcf0;
}
#winner
{
   padding: 0 40 20 40;
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   z-index: 9999;
   display: none;
   width: 50%;
   min-height: 50%;
   background-color: #d4af37;
   border-radius: 50px;
   border:1px solid black;
   box-shadow: 0px 0px 140px 200px  #303030;
   Color: #003;
   font-size: 2.0em;
}
#gewinner1
{
   font-family: Monoton;
   font-weight: bold;
   border-radius: 20px;
   padding: 3px;
   color: black;
}
#gewinner2
{
   font-family: Monoton;
   font-weight: bold;
   border-radius: 20px;
   padding: 3px;
   color: black;
}
#winner_name
{
   margin-top: 6px;
   margin-bottom: 4px;
   font-family: Louie;
   font-size: 2em;
   font-weight: bold;
   text-shadow:
                   -2px -2px 0 yellow,
                   2px -2px 0 yellow,
                   -2px 2px 0 yellow,
                   2px 2px 0 yellow,
                   -3px 0px 0 yellow,
                   3px 0px 0 yellow,
                   0px -3px 0 yellow,
                   0px 3px 0 yellow;   
}
#a-richtig
{
   background-color:  #00cc00;
   color:white;
   text-shadow: 2px 2px #006600;
   border-radius: 80px;
   font-weight:bold;
   border: 2px solid #006600;
   text-align: center;
   padding:30 40;
   width:33%;
}
#a-falsch
{
   background-color:  #cc0000;
   color:white;
   text-shadow: 2px 2px #900000;
   font-weight:bold;
   border-radius: 80px;
   border: 2px solid #900000;
   text-align: center;
   padding:30 40;
   width:33%;
}
.antworterauswahl
{
   font-size: 2em;
}
#auge
{
   height:80px;
   border: 2px dotted #2080e0;
   border-radius:40px;
   background:#ffa620;
}
#richtige_antwort
{
    display:none;
    color:blue;
    font-style:italic;
    font-weight: bold;
    font-size: 1.6em;
    height:100%;
    vertical-align:center;
}
/* <select> styles */
#antworter
{
/* Reset */
appearance: none;
border: 1px solid #ffa620;
outline: 0;
font: inherit;
font-size:1em;
font-weight: bold;
font-family: Digital;
/* Personalize */
padding: 1rem 1rem 1rem 1rem;
width:200px;
color: #ffa620;
background-color: #333;
border-radius: 0.25em;
cursor: pointer;
/* Remove IE arrow */
&::-ms-expand
{
display: none;
}
/* Remove focus outline */
&:focus
{
outline: none;
}
/* <option> colors */
option
{
font-family: Digital;
font-size:1em;
color: #ffa620;
background-color: #333;
}
}