body {
    background-color: rgb(187, 187, 187);
}

header {
    font-family: 'Roboto Slab', serif;
    font-size: 5vw;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px #0000006c;
}

#controlPanel {
    position: absolute;
    left: 1vw;
    top: 9.5vw;
    width: 60vw;
    height: 35vw;
    border-radius: 7px;
    background-color: rgb(136, 136, 136);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 1vw;
}

#controlPanel h1 {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 2.5vw;
    color: rgb(255, 255, 255);
}

.hexagon {
    width: 10vw;
    height: 10vw;
}

#hexagon1 {
    position: absolute;
    top: 20vw;
    left: 45vw;
}

#hexagon2 {
    position: absolute;
    top: 17.1vw;
    left: 40vw;
}

#hexagon3 {
    position: absolute;
    top: 17.1vw;
    left: 50vw;
}

#hexagon4 {
    position: absolute;
    top: 14.2vw;
    left: 45vw;
}

#hexagon5 {
    position: absolute;
    top: 22.9vw;
    left: 40vw;
}

#hexagon6 {
    position: absolute;
    top: 25.8vw;
    left: 45vw;
}

#hexagon7 {
    position: absolute;
    top: 22.9vw;
    left: 50vw;
}

#hexagon1 .top {
    float: left;
    border-right: 1.5vw solid green;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon1 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: green;
}

#hexagon1 .bottom {
    float: left;
    border-left: 1.5vw solid green;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon2 .top {
    float: left;
    border-right: 1.5vw solid red;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon2 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: red;
}

#hexagon2 .bottom {
    float: left;
    border-left: 1.5vw solid red;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon3 .top {
    float: left;
    border-right: 1.5vw solid indigo;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon3 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: indigo;
}

#hexagon3 .bottom {
    float: left;
    border-left: 1.5vw solid indigo;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon4 .top {
    float: left;
    border-right: 1.5vw solid orange;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon4 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: orange;
}

#hexagon4 .bottom {
    float: left;
    border-left: 1.5vw solid orange;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon5 .top {
    float: left;
    border-right: 1.5vw solid blue;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon5 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: blue;
}

#hexagon5 .bottom {
    float: left;
    border-left: 1.5vw solid blue;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon6 .top {
    float: left;
    border-right: 1.5vw solid violet;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon6 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: violet;
}

#hexagon6 .bottom {
    float: left;
    border-left: 1.5vw solid violet;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon7 .top {
    float: left;
    border-right: 1.5vw solid yellow;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

#hexagon7 .middle {
    text-align: center;
    line-height: 5.2vw;
    font-size: 2vw;
    font-family: 'Roboto Slab', serif;
    float: left;
    width: 3vw;
    height: 5.2vw;
    background-color: yellow;
}

#hexagon7 .bottom {
    float: left;
    border-left: 1.5vw solid yellow;
    border-top: 2.6vw solid transparent;
    border-bottom: 2.6vw solid transparent;
}

.topButtons {
    line-height: 1.25vw;
    text-align: center;
    position: absolute;
    top: 9vw;
    border-radius: 10vw;
    font-size: 1vw;
    width: 5vw;
    height: 2.5vw;
    outline: none;
    border: none;
    color: white;
    background-color: black;
    font-family: 'Lato', sans-serif;
}

button:hover {
    cursor: pointer;
}

#arena {
    position: absolute;
    right: 1vw;
    top: 9.5vw;
    width: 32.4vw;
    border: solid .1vw gray;
    height: 35vw;
    border-radius: 7px;
    background-color: rgb(136, 136, 136);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 1vw;
}

.overlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 4;
}

.infoPage {
    display: none;
    position: absolute;
    left: 28.5vw;
    top: 2vw;
    height: 44vw;
    width: 40vw;
    border-radius: 2vw;
    background-color: lightgray;
    border: ridge 3px gray;
    padding: 1vw;
    z-index: 5;
}

.infoPage h1 {
    text-align: center;
}

#cardHolder {
    position: absolute;
    left: 5.86vw;
    top: 13.2vw;
    border: solid 2px black;
    height: 7vw;
    width: 7vw;
    background-color: rgb(136, 136, 136);
}

.bar {
    left: 4vw;
    border: solid 2px black;
    width: 11vw;
    height: 1.5vw;
    background-color: rgb(136, 136, 136);
}

#health {
    position: absolute;
    background: linear-gradient(rgb(224, 129, 129) 100%, rgb(136, 136, 136) 0%);
    top: 26vw;
}

#energy {
    position: absolute;
    background: linear-gradient(rgb(111, 111, 218) 100%, rgb(136, 136, 136) 0%);
    top: 30vw;
}

#healthInfo {
    position: absolute;
    left: 4vw;
    font-size: .75vw;
    top: 25vw;
    font-family: 'Lato', sans-serif;
}

#energyInfo {
    position: absolute;
    left: 4vw;
    font-size: .75vw;
    top: 29vw;
    font-family: 'Lato', sans-serif;
}

#repository {
    position: absolute;
    left: 20vw;
    top: 13.2vw;
    height: 20vw;
    width: 15vw;
    border: solid 2px black;
    background-color: rgb(136, 136, 136);
}

#game {
    position: absolute;
    left: 0.6vw;
    top: 3vw;
    height: 33vw;
    width: 33vw;
    border: solid 2px black;
    background-color: rgb(136, 136, 136);
}

#arena h2 {
    position: absolute;
    font-size: 1.2vw;
    top: 0vw;
    font-family: 'Lato', sans-serif;
    color: white;
}

.infoBlock {
    position: absolute;
    left: 3vw;
    width: 2vw;
    height: 2vw;
    border: solid 2px black;
}

.clickToCont {
    position: absolute;
    font-size: 1vw;
    color:rgb(255, 255, 255);
    font-family: 'Roboto Slab', serif;
    top: 43vw;
    left: 15vw;
}

.infoRight {
    font-size: 0.7vw;
    position: absolute;
    left: 7vw;
    font-family: 'Lato', sans-serif;
}

.cardBlock {
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    border: solid 1.5px black;
}

.blockRight {
    font-size: 0.7vw;
    position: absolute;
    font-family: 'Lato', sans-serif;
}

.square {
    position: absolute;
    background-color: rgb(170, 170, 170);
    outline: 1px solid rgb(40, 40, 40); 
    height: 3vw;
    width: 3vw;
}

.character {
    color: white;
    position: absolute;
    width: 2.3vw;
    height: 2.3vw;
    border-radius: 1.15vw;
    font-family: 'Lato', sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: 1.4vw;
    text-align: center;
    line-height: 2.3vw;
}

#player {
    background-color: black;
    left: 15.35vw;
    top: 30.35vw;
}

#trophy {
    background-image: url(https://previews.123rf.com/images/sanek13744/sanek137441707/sanek13744170700444/82985589-trophy-cup-flat-vector-icon-simple-winner-symbol-gold-illustration-on-isolated-background-simple-bus.jpg);
    background-color: white;
    left: 15.35vw;
    top: 0.35vw;
    background-size: cover;
    z-index: 2;
}

.resource {
    position: absolute;
    height: 2.3vw;
    width: 2.3vw;
    border-radius: 0.4vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
}

.enemy {
    font-size: 1vw;
    z-index: 3;
    position: absolute;
    width: 2.3vw;
    height: 2.3vw;
    border-radius: 1.15vw;
    font-family: 'Lato', sans-serif;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    line-height: 2.3vw;
    text-align: center;
}

.attackPage {
    display: none;
    position: absolute;
    left: 33.5vw;
    top: 7.5vw;
    height: 33vw;
    width: 30vw;
    border-radius: 2vw;
    background-color: lightgray;
    border: ridge 3px gray;
    padding: 1vw;
    z-index: 5; 
}

.attackPage h1 {
    text-align: center;
}

.attackPage h2 {
    position: absolute;
}

.battleBlock {
    position: absolute;
    height: 7vw;
    width: 28vw;
    border-radius: 1.5vw;
    background-color: rgb(170, 170, 170);
    outline: none;
    padding: 1vw;
}

#attackBlock {
    position: absolute;
    top: 15vw;
}

#defenseBlock {
    position: absolute;
    top: 25vw;
}

.attackChoices {
    text-align: center;
    line-height: 2vw;
    font-size: 1.2vw;
    position: absolute;
    top: 3.5vw;
    font-family: 'Lato', sans-serif;
    opacity: 0.5;
}

.defenseChoices {
    text-align: center;
    line-height: 2vw;
    font-size: 1.2vw;
    position: absolute;
    top: 3.5vw;
    font-family: 'Lato', sans-serif;
    opacity: 0.5;
}

.attackChoices:hover {
    cursor: pointer;
    opacity: 1.0;
}

.defenseChoices:hover {
    cursor: pointer;
    opacity: 1.0;
}

.battleBlockButtons {
    color: white;
    background-color: rgb(109, 107, 107);
    width: 4vw;
    height: 2vw;
    position: absolute;
    outline: none;
    font-family: 'Lato', sans-serif;
    border: none;
    font-size: 0.9vw;
    border-radius: 1.5vw;
    line-height: 2vw;
}

.battleBlockButtons:hover {
    background-color: rgb(70, 70, 70);
}

.warning {
    position: absolute;
    left: 1vw;
    font-size: 0.9vw;
    top: 6.8vw;
    font-family: 'Roboto Slab', serif;
    color: red;
    display: none;
    text-shadow: 0.5px 0.5px 1px #0000006c;
}

.card {
    width: 14vw;
    height: 4.0625vw;
    position: absolute;
    background-color: rgb(100, 100, 100);
    border-radius: 1vw;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
}

#restoreHealth {
    top: 0.75vw;
    left: 0.5vw;
}

#restoreEnergy {
    top: 5.5625vw;
    left: 0.5vw;
}

#increaseYellow {
    top: 10.375vw;
    left: 0.5vw;
}

#moreDamage {
    top: 15.1875vw;
    left: 0.5vw;
}

.card:hover {
    cursor: pointer;
    background-color: rgb(60, 60, 60);
}

.abilityName {
    position: absolute;
    top: 0.7vw;
    left: 0.5vw;
    color: white;
    font-size: 0.7vw;
    font-family: 'Lato', sans-serif;
}

.abilityDescript {
    position: absolute;
    top: 2.3vw;
    left: 0.5vw;
    color: rgb(218, 216, 216);
    font-size: 0.5vw;
    font-family: 'Roboto Slab', serif;
}

.abilityCost {
    position: absolute;
    top: 1vw;
    right: 2.5vw;
    color: rgb(218, 216, 216);
    font-size: 1.2vw;
    font-family: 'Open Sans', sans-serif;
}

.abilityCostBlock {
    position: absolute;
    top: 1vw;
    background-color: rgb(145, 144, 144);
    right: 0.5vw;
}

.endGame {
    display: none;
    position: absolute;
    z-index: 5;
    left: 30vw;
    font-size: 10vw;
    top: 20vw;
}

#win {
    color: green;
}

#lose {
    color: red;
    background-color: rgb(155, 207, 144)
}

.abilityNotif {
    display: none;
    position: absolute;
    left: 77vw;
    top: 25vw;
    font-size: 2vw;
    z-index: 5;
}