@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html { margin: 0; padding: 0; background-color: #222222; color: #ffffff; }
body { margin: 10px; padding: 0; }

/* Class colors */
.druid { color: #FF7C0A; }
.hunter { color: #AAD372; }
.mage { color: #3FC7EB; }
.paladin { color: #F48CBA; }
.priest { color: #FFFFFF; }
.rogue { color: #FFF468; }
.shaman { color: #0070DD; }
.warlock { color: #8788EE; }
.warrior { color: #C69B6D; }

.iconsmall { padding-right: 5px; }

.lbl {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
}

#request-form {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

#request-form select {
    width: 180px;
    height: 42px;
    color: #eee;
    font-weight: 700;
    background: #444444;
    font-size: 14px;
    padding-left: 5px;
}

#request-form select > option {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding-left: 5px;
}

#request-form input {
    width: 168px;
    height: 40px;
    color: #eee;
    font-weight: 700;
    background: #444444;
    border: none;
    font-size: 14px;
    padding-left: 10px;
}

#request-form button {
    width: 180px;
    height: 42px;
    border: none;
    color: #eee;
    font-weight: 700;
    background: #512B81;
    cursor: pointer;
    font-size: 14px;
}

#error {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    color: #B00020;
    background-color: #330020;
}

#character-sheet {
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    background-color: #333333;
}

#character-sheet .row .col span {
    display: block;
    text-align: center;
}

.col {
    float: left;
    width: 25%;
    height: 70px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.cell {
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 820px) {
    .col {
        width: 50%;
    }

    #request-form select {
        width: 200px;
        height: 48px;
        font-size: 16px;
    }

    #request-form input {
        width: 188px;
        height: 46px;
        font-size: 16px;
    }

    #request-form button {
        width: 200px;
        height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body {
        overflow-x: hidden;
    }

    .col {
        width: 100%;
    }
}

#title {
    font-size: 28px;
    overflow: hidden;
}

#subtitle {
    font-size: 18px;
}

#gearscore {
    font-size: 28px;
}

#itemlevel {
    font-size: 28px;
}

#equipment {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#equipment tr th {
    text-align: left;
    font-size: 18px;
    padding: 4px;
}

#equipment tr td {
    text-align: left;
    font-size: 16px;
    padding-left: 4px;
}