@font-face {
    font-family: FFI;
    src: url("../fonts/final-fantasy-2-webfont.ttf");
}

body {
    background: black;
    height: 100%;
}

p {
    z-index: 2;
    text-align: center;
    position: relative;
    /* padding: 1em 0; */
    color: #FCFCFC;
    font-family: FFI;
    font-size: 24px;
    margin: 0px;
}

p:first-child {
    padding-top: 1em;
}

p:last-child {
    padding-bottom: 1em;
}

#gamescreen {
    position: relative;
    margin: auto;
    background: #24188C;
    height: 672px;
    /* min-width: 768px; */
}

.tlc {
    height: 24px;
    width: 24px;
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    background-image: url("../images/TLC3.png")
}

.tb {
    height: 24px;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    background-image: url("../images/TB3.png");
}

.trc {
    height: 24px;
    width: 24px;
    position: absolute;
    z-index: 3;
    top: 0px;
    right: 0px;
    background-image: url("../images/TRC3.png")
}

.lb {
    height: 100%;
    width: 24px;
    background-image: url("../images/LB3.png");
    position: absolute;
    z-index: 2;
    left: 0px;
}

.rb {
    height: 100%;
    width: 24px;
    background-image: url("../images/RB3.png");
    position: absolute;
    z-index: 2;
    right: 0px;
}

.blc {
    height: 24px;
    width: 24px;
    background-image: url("../images/BLC3.png");
    position: absolute;
    z-index: 3;
    bottom: 0px;
    left: 0px;
}

.bb {
    height: 24px;
    width: 100%;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    left: 0px;
    background-image: url("../images/BB3.png");
}


.brc {
    height: 24px;
    width: 24px;
    background-image: url("../images/BRC3.png");
    position: absolute;
    z-index: 3;
    bottom: 0px;
    right: 0px;
}

#box {
    height: 60%;
    min-height: 250px;
    width: 100%;
    background: black;
}
 .portrait {
     margin: auto;
     display: block;
 }

 #battle-content {
     height: 300px; 
 }
 
 #background {
    height: 96px;
    width: 100%;
    position: absolute;
    top: 24px;
    left: 0px;
    background-image: url("../images/Forrest3.png");
    z-index: 0;
}

#foe {
    position: absolute;
    top: 108px;
    left: 9px;
    z-index: 1;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    height: 90px;
    width: 111px;
}

#you {
    position: absolute;
    top: 108px;
    right: 9px;
    z-index: 1;
    height: 90px;
    width: 111px;
}

#finale {
    position: absolute !important;
    top: 11%;
    left: 12%;
    display: inline;
    background: black;
    z-index: 1;
}

#departure {
    width: 100%;
}

.sprite {

}

@media only screen and (max-width: 768px) {
    #finale {
        top: 0;
        left: 0;
    }

}