@font-face{font-family:"ABC Social Extended";src:url(../fonts/ABCSocialExtended-Bold.woff2) format("woff2"),url(../fonts/ABCSocialExtended-Bold.woff) format("woff");font-style:normal;font-weight:700}
@font-face{font-family:"Keroine PRO";src:url(../fonts/KeroinePRO-DouxExtreme.woff2) format("woff2"),url(../fonts/KeroinePRO-DouxExtreme.woff) format("woff");font-style:normal;font-weight:400}

html{
    font-family:"Keroine PRO",serif;font-size:2.3611vw;line-height:1.2353;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

h1,h2,h3,h4,h5,h6{font-family:"ABC Social Extended",sans-serif;margin-top:1em}
h1{font-size:1.5294em;line-height:1.3269}
h2{font-size:1.15em}
h3{font-size:inherit;line-height:1.3}
ol,p,ul{margin-bottom:1em}
ol,ul{padding-left:1em}
a{color:inherit}

body {
    background-image: url("../images/DSC04037_blur.jpg");
    background-position: top center;
    text-align: center;
    margin: auto;
}

#blue {
    color: #0000FF;
}

#blue:hover {
    color: #0000AA;
}

#qrcodecontainer {
    justify-content: center;
    text-align: center;

}

#qrcodecontainer {
    justify-content: center;
    text-align: center;

}
#qrcode {
    max-width: 50%;
    padding-left: 25%;
}


#qrcode {
    display: flex;
    justify-content: center;
    text-align: center;

}
#qrcode > canvas {
    display: block; /* Required to allow centering of the canvas */
    margin: 0 auto;
}
#qrcode > img {
    margin 0 auto;
}

#header {
    margin: 10vw;
}

#content {
    margin: 10vw;
}

#footer {
    margin: 10vw;
}

.intro {
    background: white;
    padding: 10vw;
}

.intro a {
    text-decoration: none;
    color: black;
}

.intro-button {
    border: black solid 3px;
    padding: 5vw;
}



.intro-button:hover, .intro-button:focus {
    background: black;
    color: white;
}


.quiz {
    background: black;
    padding: 10vw;
    color: white;
}

.quiz a {
    text-decoration: none;
}

.quiz-button {
    border: white solid 3px;
    padding: 5vw;
}

.quiz-button-false {
    color: grey;
    border: grey solid 3px;
    padding: 5vw;
}

.quiz-button:hover, .quiz-button:focus {
    background: white;
    color: black;
}

#footer a {
    color: white;
    text-decoration: none;

}

#footer a:hover {
    color: black;
    text-decoration: none;

}





#logo {
    min-height: 2em;
}

@media screen and (max-width:480px)
{
    html{font-size:4.4vw}br.desktop{display:none}
    .intro-button {
        border: black solid 2px;
    }
    .quiz-button {
        border: white solid 2px;
    }
    #logo {
        max-height: 3em;
    }
    p#qrcode {
        max-width: 50%;
    }
}
@media screen and (min-width:481px) and (max-width:640px)
{
    html{font-size:3vw}
    .intro-button {
        border: black solid 2px;
    }
    .quiz-button {
        border: white solid 2px;
    }
    p#qrcode {
        max-width: 50%;
    }
}

@media screen and (min-width:641px) and (max-width:1023px){
    html{font-size:3vw}
    .intro-button {
        border: black solid 3px;
    }
    .quiz-button {
        border: white solid 3px;
    }
    #qrcode {
        max-width: 50%;
    }


}