<!DOCTYPE html>
<html>
<meta name="viewport" content="width=700">
<title>Julius Caesar - Blocks</title>
<style>
body {
margin: 40px;
background-color: slategray;
color: white;
text-align: center;
}
div.list {
display: grid;
width: calc(66px * 7 + 8px * 6);
margin: 0 auto;
grid-template-columns: repeat(7, 66px);
gap: 8px;
}
.block {
width: 60px;
height: 60px;
border-width: 3px;
border-radius: 8px;
border: 3px solid blue;
box-shadow: 0 0 2px 1px #0004;
}
.block { background-size: 360px 360px; }
.Cleopatra.block { background-size: 60px 60px; }
.Caesar.block { background-image: url(../blocks_caesar.1x.webp); }
.Cleopatra.block { background-image: url(../blocks_cleopatra.1x.webp); }
.Pompeius.block { background-image: url(../blocks_pompeius.1x.webp); }
@media (min-resolution: 97dpi) {
.Caesar.block { background-image: url(../blocks_caesar.2x.webp); }
.Cleopatra.block { background-image: url(../blocks_cleopatra.2x.webp); }
.Pompeius.block { background-image: url(../blocks_pompeius.2x.webp); }
}
.block.Caesar { background-color: hsl(358, 69%, 47%); }
.block.Caesar { border-color: hsl(358, 69%, 32%); }
.block.Pompeius { background-color: hsl(43, 87%, 44%); }
.block.Pompeius { border-color: hsl(43, 87%, 30%); }
.block.Cleopatra { background-color: hsl(187, 100%, 35%); }
.block.Cleopatra { border-color: hsl(187, 100%, 23%); }
.block_1_1{background-position:0px 0px}
.block_1_2{background-position:-60px 0px}
.block_1_3{background-position:-120px 0px}
.block_1_4{background-position:-180px 0px}
.block_1_5{background-position:-240px 0px}
.block_1_6{background-position:-300px 0px}
.block_2_1{background-position:0px -60px}
.block_2_2{background-position:-60px -60px}
.block_2_3{background-position:-120px -60px}
.block_2_4{background-position:-180px -60px}
.block_2_5{background-position:-240px -60px}
.block_2_6{background-position:-300px -60px}
.block_3_1{background-position:0px -120px}
.block_3_2{background-position:-60px -120px}
.block_3_3{background-position:-120px -120px}
.block_3_4{background-position:-180px -120px}
.block_3_5{background-position:-240px -120px}
.block_3_6{background-position:-300px -120px}
.block_4_1{background-position:0px -180px}
.block_4_2{background-position:-60px -180px}
.block_4_3{background-position:-120px -180px}
.block_4_4{background-position:-180px -180px}
.block_4_5{background-position:-240px -180px}
.block_4_6{background-position:-300px -180px}
.block_5_1{background-position:0px -240px}
.block_5_2{background-position:-60px -240px}
.block_5_3{background-position:-120px -240px}
.block_5_4{background-position:-180px -240px}
.block_5_5{background-position:-240px -240px}
.block_5_6{background-position:-300px -240px}
.block_6_1{background-position:0px -300px}
.block_6_2{background-position:-60px -300px}
.block_6_3{background-position:-120px -300px}
.block_6_4{background-position:-180px -300px}
.block_6_5{background-position:-240px -300px}
.block_6_6{background-position:-300px -300px}
</style>
<body>
<div class="list">
<div class="block Caesar block_1_1"></div>
<div class="block Caesar block_1_2"></div>
<div class="block Caesar block_1_3"></div>
<div class="block Caesar block_1_4"></div>
<div class="block Caesar block_1_5"></div>
<div class="block Caesar block_1_6"></div>
<div class="block Caesar block_2_1"></div>
<div class="block Caesar block_2_2"></div>
<div class="block Caesar block_2_3"></div>
<div class="block Caesar block_2_4"></div>
<div class="block Caesar block_2_5"></div>
<div class="block Caesar block_2_6"></div>
<div class="block Caesar block_3_1"></div>
<div class="block Caesar block_3_2"></div>
<div class="block Caesar block_3_3"></div>
<div class="block Caesar block_3_4"></div>
<div class="block Caesar block_3_5"></div>
<div class="block Caesar block_3_6"></div>
<div class="block Caesar block_4_1"></div>
<div class="block Caesar block_4_2"></div>
<div class="block Caesar block_4_3"></div>
<div class="block Caesar block_4_4"></div>
<div class="block Caesar block_4_5"></div>
<div class="block Caesar block_4_6"></div>
<div class="block Caesar block_5_1"></div>
<div class="block Caesar block_5_2"></div>
<div class="block Caesar block_5_3"></div>
<div class="block Caesar block_5_4"></div>
<div class="block Caesar block_5_5"></div>
<div class="block Caesar block_5_6"></div>
<div class="block Caesar block_6_1"></div>
<div class="block Cleopatra block_1_1"></div>
<div class="block Pompeius block_1_1"></div>
<div class="block Pompeius block_1_2"></div>
<div class="block Pompeius block_1_3"></div>
<div class="block Pompeius block_1_4"></div>
<div class="block Pompeius block_1_5"></div>
<div class="block Pompeius block_1_6"></div>
<div class="block Pompeius block_2_1"></div>
<div class="block Pompeius block_2_2"></div>
<div class="block Pompeius block_2_3"></div>
<div class="block Pompeius block_2_4"></div>
<div class="block Pompeius block_2_5"></div>
<div class="block Pompeius block_2_6"></div>
<div class="block Pompeius block_3_1"></div>
<div class="block Pompeius block_3_2"></div>
<div class="block Pompeius block_3_3"></div>
<div class="block Pompeius block_3_4"></div>
<div class="block Pompeius block_3_5"></div>
<div class="block Pompeius block_3_6"></div>
<div class="block Pompeius block_4_1"></div>
<div class="block Pompeius block_4_2"></div>
<div class="block Pompeius block_4_3"></div>
<div class="block Pompeius block_4_4"></div>
<div class="block Pompeius block_4_5"></div>
<div class="block Pompeius block_4_6"></div>
<div class="block Pompeius block_5_1"></div>
<div class="block Pompeius block_5_2"></div>
<div class="block Pompeius block_5_3"></div>
<div class="block Pompeius block_5_4"></div>
<div class="block Pompeius block_5_5"></div>
<div class="block Pompeius block_5_6"></div>
<div class="block Pompeius block_6_1"></div>