@font-face {
    font-family: "stdText";
    src: url("../fonts/AlegreyaSans-Regular.ttf");
}

@font-face {
    font-family: "titleText";
    src: url("../fonts/BeaufortforLOL-Bold.ttf");
}

@font-face {
    font-family: "niceText";
    src: url("../fonts/BeaufortforLOL-Medium.ttf");
}

@font-face {
    font-family: "numberText";
    src: url("../fonts/BeaufortforLOL-Heavy.ttf");
}


body {
    font-family: "stdText";
    font-size: 20px;
    line-height: 1.5;
    margin-top:0;
    background-color: #000000;
    background-image: url('../images/wood.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    text-shadow: 1px 1px 2px #000;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "titleText";
    font-weight: normal;
    color: #ffffff;
}

ul li {
    list-style: none;
}

/* Utility Classes */

/* 568px */
@media screen and (min-width: 35.5em) {
    .container {
        width: 720px;
    }
}

/* 768px */
@media screen and (min-width: 48em) {
    .container {
        width: 720px;
    }
}

/* 1024px */
@media screen and (min-width: 64em) {
    .container{
        width: 970px;
    }
}

/* 1280px */
@media screen and (min-width: 80em) {
    .container {
        width: 1170px;
    }
}

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.wrapper {
    margin: 0 3rem;
}

.padding {
    padding: 3rem 1rem;
}

.left {
    float: left;
}

.right {
    float: right
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-discreet {
    font-size: 0.8em;
    color: #c0c0c0;
}

.hidden {
    display: none;
}

/* SHEETS */

.sheet {
    border: 2px solid #000;
    background-color: rgba(0,0,0,.8);
    margin: 4px;
    padding: 8px;
    border-radius: 8px;
    box-shadow:0 0 8px rgba(0,0,0,.4);
}

.name {
    font-family: "niceText";
    font-size: 1.6em;
    display: block;
    text-align: center;
}

.class-race {
    color: #c0c0c0;
    display: block;
    text-align: center;
}

.attribute {
    font-family: "niceText";
    display: block;
}

.attribute-value {
    font-family: "niceText";
    font-size: 1.2em;
}

.skills {
    font-size: 0.8em;
    border-left: 1px dotted #999;
    padding-left: 4px;
}

.skill-info {
    color: #999;
}

.skill-value {
    font-family: "niceText";
}

.warrior .sheet {
    border-color: #C69B6D;
}

.hunter .sheet {
    border-color: #AAD372;
}

.priest .sheet {
    border-color: #FFFFFF;
}

.mage .sheet {
    border-color: #3FC7EB;
}

.monk .sheet {
    border-color: #00FF98;
}

.demonhunter .sheet {
    border-color: #A330C9;
}

.evoker .sheet {
    border-color: #33937F;
}

.paladin .sheet {
    border-color: #F48CBA;
}

.rogue .sheet {
    border-color: #FFF468;
}

.shaman .sheet {
    border-color: #0070DD;
}

.warlock .sheet {
    border-color: #8788EE;
}

.druid .sheet {
    border-color: #FF7C0A;
}

.deathknight .sheet {
    border-color: #C41E3A;
}

.warrior .class {
    color: #C69B6D;
}

.hunter .class {
    color: #AAD372;
}

.priest .class {
    color: #FFFFFF;
}

.mage .class {
    color: #3FC7EB;
}

.monk .class {
    color: #00FF98;
}

.demonhunter .class {
    color: #A330C9;
}

.evoker .class {
    color: #33937F;
}

.paladin .class {
    color: #F48CBA;
}

.rogue .class {
    color: #FFF468;
}

.shaman .class {
    color: #0070DD;
}

.warlock .class {
    color: #8788EE;
}

.druid .class {
    color: #FF7C0A;
}

.deathknight .class {
    color: #C41E3A;
}