@font-face
{
    /* https://fonts.google.com/specimen/Wendy+One */
    font-family: 'Wendy One';
    src: url('/static/pokemon_type_chart_quiz/WendyOne-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

#main h1
{
    font-family:"Wendy One";
    border-bottom:0;
}

h2
{
    margin:0;
    border-bottom:0;
}

.type
{
    width:40%;
    font-family:"Wendy One";
    text-align:center;
}

p
{
    font-family:sans-serif;
}

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

#offense, #defense
{
    color:#F8F8F8;
    font-family:"Wendy One";
    text-shadow: 2px 2px 1px #000;
    font-size:36pt;
    width:250px;
    text-align:center;
    border-radius:25px;
    margin:auto;
}

#choices
{
    text-align:center;
    font-family:"Wendy One";
    font-size:16pt;
}

.choice
{
    font-family:"Wendy One";
    font-size:16pt;
    width:40%;
    background-color:#6890F0;
    border:4px solid #6890F0;
    border-radius:8px;
    text-shadow: 2px 2px 1px #000;
    color:#FFF;
    margin:0;
    padding:0;
}

.choice:hover
{
    background-color:#98D8D8;
    border:4px solid #98D8D8;
    cursor:pointer;
}

.kl
{
    float:left;
    width:2em;
    border:4px solid #FFF;
    border-radius:8px;
    background-color:#98D8D8;
}

.kr
{
    float:right;
    width:2em;
    border:4px solid #FFF;
    border-radius:8px;
    background-color:#98D8D8;
}

.bug { background-color:#A8B820; }
.dark { background-color:#705848; }
.dragon { background-color:#7038F8; }
.electric { background-color:#F8D030; }
.fairy { background-color:#F8A0E0; }
.fighting { background-color:#903028; }
.fire { background-color:#F05030; }
.flying { background-color:#A890F0; }
.ghost { background-color:#705898; }
.grass { background-color:#78C850; }
.ground { background-color:#E0C068; }
.ice { background-color:#98D8D8; }
.normal { background-color:#A8A878; }
.poison { background-color:#A040A0; }
.psychic { background-color:#F85888; }
.rock { background-color:#B8A038; }
.steel { background-color:#B8B8D0; }
.water { background-color:#6890F0; }


.typechart
{
    border-collapse:collapse;
    margin:auto;
    font-family:monospace;
    position:relative;
    left:-50px;
}

.typechart td
{
    border:1px solid #000;
    text-align:center;
}

.typechart td.guess
{
    border-right:0;
}

.typechart td.answer
{
    border-left:0;
}

#scoring
{
    font-family:"Wendy One";
    font-size:20pt;
    display:flex;
    justify-content:space-evenly;
}

#scoring .col
{
    margin:auto;
    text-align:center;
    margin:1%;
}

#scoring.block
{
    padding:0;
}

#footer
{
    font-size:smaller;
    text-align:center;
    width:50%;
}

#psq-main
{
    overflow:auto;
    margin-top:10px;
}

#attacker-text
{
    transform:rotate(-90deg);
    position:relative;
    left:50px;
}

#attacker-text, #defender-text
{
    font-family:"Wendy One";
    font-size:24pt;
}

@media (max-width:1024px)
{
    #offense, #defense
    {
        font-size:medium;
        width:auto;
    }

    .kl, .kr
    {
        display:none;
    }

    .choices
    {
        width:100%;
    }

    .choice
    {
        width:90%;
    }

    #super, #not
    {
        margin-bottom:1em;
    }
}