html { 
background: url("../img/standard-arena.jpg") no-repeat center center fixed; 
background-size: cover;
}

/* * {
    outline: 1px dashed white;
} */

body {
font-family: 'Anton', sans-serif;
}

header {
height: 80px;
}

div.button-group {
float: right;
margin-top: 40px;
font-size: 20pt;
margin-right: 20px;
}

nav a {
background: white;
opacity: 0.5;
color: black;
border: 3px black;
text-decoration: none;
padding: 5px;
margin-left: 5px;
font-weight: bolder;
border-radius: 3px;
}

div.decks {
position: relative;
width: 100%;
height: 300px;
margin-top: 20px;
}

div.decks img {
width: auto;
height: auto;
max-width: 180px;
position: absolute;
top: 13%;
}

div.decks img:first-child {
position: absolute;
left: 6%;
}

div.decks img:nth-child(2) {
position: absolute;
left: 34%;
max-width: 220px;
}

div.decks img:nth-child(3) {
position: absolute;
left: 52%;
max-width: 220px;
}

div.decks img:nth-child(4) {
position: absolute;
right: 5%;
}

div.headings {
height: 175px;
margin-bottom: 10px;
}

div.headings h1 {
position: absolute;
top: 10%;
left: 39.5%;
font-family: 'Alfa Slab One', cursive;
font-size: 84pt;
text-shadow:
-1px -1px 0 rgb(255, 255, 255),  
1px -1px 0 rgb(255, 255, 255),
-1px 1px 0 rgb(255, 255, 255),
1px 1px 0 rgb(255, 255, 255);
}

div.headings h2 {
position: absolute;
top: 23.5%;
left: 42.5%;
font-family: 'Alfa Slab One', cursive;
font-size: 36pt;
color: black;
text-shadow:
-1px -1px 0 rgb(255, 255, 255),  
1px -1px 0 rgb(255, 255, 255),
-1px 1px 0 rgb(255, 255, 255),
1px 1px 0 rgb(255, 255, 255);
}

h3 {
display: inline-block;
font-family: 'Alfa Slab One', cursive;
font-size: 24pt;
text-align: center;
text-shadow:
-1px -1px 0 rgb(255, 255, 255),  
1px -1px 0 rgb(255, 255, 255),
-1px 1px 0 rgb(255, 255, 255),
1px 1px 0 rgb(255, 255, 255);
margin-bottom: 5px;
}

div.score-board {
position: relative;
width: 100%;
top: 130%;
height: 200px;
}

div.score-board img {
max-width: 50px;
}

#cpu {
position: absolute;
left: 8%;
}

#user {
position: absolute;
right: 9%;
}

hr {
width: 350px; 
border: 0;
height: 5px;
background: white;
border: 5px black;
margin-bottom: 15px;
}

#cpu-line {
position: absolute;
top: 15%;
left: 4%;
}

#user-line {
position: absolute;
top: 15%;
right: 1.5%;
}

#cpu-count-card {
position: absolute;
top: 27%;
left: 4.2%;
}

#user-count-card {
position: absolute;
top: 27%;
right: 17%;
}

#cpu-score-value {
position: absolute;
top: 37%;
left: 9.5%;    
}

#user-score-value {
position: absolute;
top: 37%;
right: 2%; 
}

#sacrifice img {
position: absolute;
top: 29%;
left: 31%;
height: auto;
width: auto;
max-width: 40%;
cursor: pointer;
}

#overlay img {
position: absolute;
top: 29%;
left: 31%;
height: auto;
width: auto;
max-width: 40%;
cursor: pointer;
}

#cpu-war-three {
position: absolute;
left: 20%;
}

#user-war-three {
position: absolute;
right: 31.5%;
}

#user-deck:hover {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    z-index: 20;
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    box-shadow: 0 20px 20px rgba(50,50,50,.2);
    cursor: pointer;
}