@font-face {
font-family: 'Fallout';
src:  url('font/overseer.otf') format('woff2')
}

@font-face {
font-family: 'FixedSys';
src:  url('font/fixedsys.ttf') format('woff2')
}

body{
background-color: black;
background-image: url("images/background.png");
background-size: 73% auto;
background-attachment: fixed;
background-position: 90% bottom;
background-repeat:no-repeat;
box-sizing: border-box;
}

#instructions{
    text-align: center;

}
#instructions:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.modal-content>.modal-header{
    font-family: Fallout, Arial;
    font-size: 4vmin;
}
.modal-body>ul>li{
    list-style: square;
}
.modal-content{
    background-color: black;
    font-family: FixedSys, Arial;
    font-size: 2vmin;
    border:4px solid #00ff00;
    color: #00ff00;
}

header{
font-family: Fallout, Arial;
height: 20vh;
margin-bottom: 3vh;
display: flex;
background-image: url("images/header.png");
background-size: 100% 100%;
background-repeat:no-repeat;
border-bottom: 4px solid #00ff00;
}
header>#leftHeader{
    width:25%;
    position:relative;
    left:20px;
    display:flex;
}

header>#leftHeader>img{
    display:inline-block;
    position:relative;
    width: 22vmin;
    height:18vmin;
    top:50%;
    transform:translateY(-50%);
}

header>#leftHeader>#buttonContainer{
    position:relative;
    top:8%;
    display:inline-block;
    width:45%;
    height:70%;
}

header>#leftHeader>#buttonContainer>button{
    height:50%;
    width:100%;
    margin:5px 0 0 5px;
    font-size: 22px;
}

header>#leftHeader>#buttonContainer>button#instructionsButton{
    background-color:#2d352f;
    border-color:#2d352f;
}
header>#leftHeader>#buttonContainer>button#instructionsButton:hover{
    background-color:#1a1d1b;
    border-color:#1a1d1b;
}

header>#titleContainer{
    width:75%;
    display:flex;
}

header>#titleContainer>h1{
    font-size: 12vmin;
    text-shadow: 2px 2px #00ff00;
    color:black;
    font-style: italic;
    margin:auto;
}

#mainContentContainer{
display: flex;
}

#gameInfo{
font-family: FixedSys, Arial;
height:75vh;
width: 25%;
position:relative;
display:inline-block;
border:4px solid #00ff00;
color: #00ff00;
left: 20px;
background-image: url("images/game-info-background.png");
background-size: 55% auto;
background-repeat:no-repeat;
background-position: right bottom;
}
#gameInfo h2{
    font-size: 3vmin;
    margin:3px 0 0 .25em;
}
#gameInfo h3{
    font-size: 2vmin;
    margin:0 0 0 1em;
}
#gameInfo>#healthContainer{
    width:100%;
    height: 30%;
    display:flex;
}
#gameInfo>#healthContainer>#healthData{
    display:inline-block;
    width:50%;
    margin: 20px 0 40px 0;
}
#gameInfo>#healthContainer>#healthData>#health{
    margin:0 0 0 1em;
}
#gameInfo>#healthContainer>#healthData>#damageReduction {
    margin:0 0 0 1em;
}
#gameInfo>#healthContainer>#healthImgContainer{
    display:inline-block;
    position: absolute;
    right:0;
    width:50%;
    height:32%;
    max-height: 33%;
    border-bottom: 4px solid #00ff00;
    border-left: 4px solid #00ff00;
    background-image: url("images/health_100.png");
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: top right;
}
#gameInfo>#effects{
    width:100%;
    height:40%;
    font-size: 2vmin;
}
#gameInfo>#effects>ul>li{
    list-style: none;
}
.blink{
    animation: blink 1s linear infinite;
}
@keyframes blink {
    50% { opacity: 0; }
}
#gameInfo>#cardDetails{
    width:60%;
    height:auto;
    position: absolute;
    top:62%;
    margin-bottom: 20px;
}
#gameInfo>#stats{
    width:100%;
    height:auto;
    position: absolute;
    bottom:0;
    margin-bottom: 20px;
}

#gameArea{
    height:75vh;
    width:75%;
    display:inline-block;
    margin-left: 35px;
}
#gameArea>.cardRow{
    height:33%;
    display:flex;
    position:relative;
    /*Card Flip Styling*/
    perspective: 1200px;
}
#gameArea>.cardRow>.cardContainer{
    max-height: 25vh;
    margin:auto;
    /*Card Flip Styling*/
    transform-style: preserve-3d;
    transition: transform 0.5s;
    cursor: pointer;
}
#gameArea>.cardRow>.cardContainer .frontCard{
    width:100%;
    height:100%;
    position:absolute;
    background-size: 100% 100%;
    background-position: center, center;
    background-repeat:no-repeat;
    transform: rotateY( 180deg );
}
#gameArea>.cardRow>.cardContainer .backCard{
    width:100%;
    height:100%;
    position:absolute;
    background-image: url("images/card-back.png");
    background-size: 100% 100%;
    background-position: center, center;
    background-repeat:no-repeat;
}
#gameArea>.cardRow>.cardContainer.flippedCard{
    /*Card Flip Styling*/
    transform: rotateY( 180deg );
    backface-visibility: hidden;
}

/***** RESPONSIVE *****/
@media screen and (max-width: 1024px) {
    .modal-content>.modal-header{
        font-size: 3vmin;
    }
    .modal-content{
        font-size: 3vmin;
    }
    #gameInfo>#effects{
        font-size: 2vmin;
    }
    #gameInfo h2{
        font-size: 3vmin;
    }
    #gameInfo h3{
        font-size: 2vmin;
    }
    header>#leftHeader>#buttonContainer{
        height: 90%;
        top:0;
    }
}

/***** SCREEN SIZE MESSAGE *****/
.mobileVerticalMsg{
    font-family: FixedSys, Arial;
    color: #00ff00;
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
}
.mobileVerticalMsg h1{
    margin-top: 40vw;
    font-size: 80px;
}
@media (orientation: portrait){
    .mobileVerticalMsg{
        display: block;
        z-index: 10000;
    }
}