@import url(http://fonts.googleapis.com/css?family=Architects+Daughter);

* {
    box-sizing: border-box;
}

[ng-click] {
    cursor: pointer;
}

body {
    background-image: url(background.jpg);
    background-attachment: fixed;
}

.main {
    display: flex;
    flex-wrap: wrap;
}

.character {
    display: flex;

    margin: 30px auto;

    width: 45%;

    border: 2px solid #454545;
    border-radius: 10px;

    padding: 20px;

    background: #F5F2E6;

    transition: border-color: .2s;
}

.character.ok {
    border-color: #2EB144;
}

.character .portrait,
.character .support {
    display: block;
}

.character .portrait {
    margin-bottom: 5px;
}

.character .infos {
    flex: none;
    width: 148px;
}

.character .name {
    margin: 20px 0;

    font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
}

.character .class {
    display: block;

    margin: 20px 0;

    width: 100%;
}

.character .supports {
    margin-left: 20px;

    flex: auto;
}

.character .support {
    float: left;

    height: 62.5px;

    transition: opacity .2s;
}

.character .support.out {
    opacity: .2;
}

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

.character .skill {
    transition: opacity .2s;
}

.character .skill.off {
    opacity: .2;
}

@media (max-width: 620px) {
    .character {
        display: block;

        width: 90%;
    }

    .character .supports {
        margin-left: 0;
        margin-top: 20px;
    }
}