@import url(https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css);

@font-face {
    font-family: 'Dfakt';
    src: url('DreiFraktur.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 18px;
    background-color: #1f2234;
}

body {
    color: #F4F4F4;
    width: 100%vw;
    overflow: hidden;
}

#opponent {
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.icon.is-huge {
    height: 6rem;
    width: 6rem;
}

.icon.is-large {
    height: 4rem;
    width: 4rem;
}

.progress {
    border-radius: 2.5px;
}

.progress::-webkit-progress-value {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.progress::-webkit-progress-bar {
    background-color: #595F7D;
}

.title,
.subtitle {
    color: #F4F4F4;
    font-family: 'Dfakt', sans-serif;
    font-weight: normal;
    vertical-align: middle;
}

.heading {
    color: #F4F4F4;
}

.title.nospace,
.heading.nospace {
    margin-bottom: 0px !important;
}

.vs {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

.space-v {
    margin-bottom: 25px;
}

.space-h {
    margin-left: 20px;
    margin-right: 15px;
}

.level {
    margin-bottom: 0px !important;
}

.level.is-mobile .level-item:not(.is-narrow) {
    flex-grow: 0;
}

.small {
    max-width: 600px;
    margin: auto;
}

.click {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently */
    cursor: pointer;
}

.click:hover {
    color: hsl(171, 100%, 41%);
}

.noclick {
    opacity: .5;
}

#board-left,
#board-right {
    position: absolute;
    background-color: hsl(48, 100%, 67%);
    border-radius: 5px;

    top: -20px;
}

#board-left p,
#board-right p {
    color: #FFF;
}

#board-right {
    padding-top: 170px;
    padding-bottom: 160px;
    padding-right: 30px;
    padding-left: 30px;

    right: -50.5%;
    width: 100%;

    -ms-transform: skewX(-20deg);
    /* IE 9 */
    -webkit-transform: skewX(-20deg);
    /* Safari 3-8 */
    transform: skewX(-20deg);

    -webkit-transition: right 0.2s ease-in-out;
    -moz-transition: right 0.2s ease-in-out;
    -o-transition: right 0.2s ease-in-out;
    -ms-transition: right 0.2s ease-in-out;
    transition: right 0.2s ease-in-out;
}

#board-left {
    padding-top: 170px;
    padding-bottom: 160px;
    padding-right: 30px;
    padding-left: 30px;

    left: -50.5%;
    width: 100%;

    -ms-transform: skewX(-20deg);
    /* IE 9 */
    -webkit-transform: skewX(-20deg);
    /* Safari 3-8 */
    transform: skewX(-20deg);

    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    -ms-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}

#board-right.win {
    right: -75.5%;
    background-color: hsl(204, 86%, 53%);
}

#board-left.win {
    left: -25.5%;
    background-color: hsl(204, 86%, 53%);
}

#board-right.loose {
    right: -25.5%;
    background-color: hsl(348, 100%, 61%);
}

#board-left.loose {
    left: -75.5% !important;
    background-color: hsl(348, 100%, 61%);
}



.loose p,
.win p {
    color: #FFF !important;
}

#board-left.hide {
    left: -150%;
}

#board-right.hide {
    right: -150%;
}

.progress:not(:last-child) {
    margin-bottom: 5px;
}

.die {
    opacity: 0;
}

.moove {
    background-color: #595F7D;
    margin: 10px;
    border-radius: 5px;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently */
    cursor: pointer;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.moove:hover {
    background-color: hsl(171, 100%, 41%);
}

.no-moove {
    background-color: #363B55;
    margin: 10px;
    border-radius: 5px;
}

.moove .title,
.no-moove .title {
    line-height: 3.3rem !important;
    vertical-align: bottom !important;
}

.vs {
    position: absolute;
    color: #363B55;
    font-size: 4rem;
    z-index: -99;
    left: 0px;
    text-align: center;
    width: 100%;
}

footer {
    font-size: .7rem;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

footer p,
footer a {
    color: #F4F4F4;
}

footer a:hover {
    color: #F4F4F4;
    opacity: .7;
}

footer i {
    color: orangered;
}