/*Universal Styles*/
* {
    margin:0;
    box-sizing: border-box;
}
/*Randomizing*/
button.randomize {
    width: 100px;
    height: 100px;
    z-index:15;
    border-radius: 100px;
    position:absolute;
    left:100px;
}

#imgHex, #used,.portHex {
    z-index:3;
    opacity:1;
    font-size:20px;
    width: calc(104px * 0.95);
    height: calc(120px * 0.95);
    overflow: hidden;
    shape-outside: polygon(50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
    clip-path:polygon(50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}

/*Opening Section*/
body {
    background-image: linear-gradient(to bottom right, rgb(196, 207, 255), rgb(205, 204, 255));
}

h1 {
    font-size: 30px;
    padding-bottom: 0;
    margin-bottom: 0;
    color: red;
}

h2 {
    font-size: 25px;
    padding-top: 0;
    margin-top: 10px;
    color: orange;
}

#opening {
    text-align: center;
    font-family: 'Reggae One';
    width:100vw;
    position:relative;
    top:40px;
    margin-bottom:55px;
}

/*Variables*/
:root {
    --brick:url('../images/brick.jpg');
    --lumber:url('../images/lumber.jpg');
    --ore:url('../images/ore.jpg');
    --sheep:url('../images/sheep.jpg');
    --wheat:url('../images/wheat.jpg');
    --desert:url('../images/desert.jpg');
}
.brick {
    background: var(--brick);
}

.sheep {
    background: var(--sheep);
}

.wheat {
    background: var(--wheat);
}

.lumber {
    background: var(--lumber);
}

.ore {
    background: var(--ore);
}

.desert {
    background: var(--desert);
}

#imgHex, #used,.portHex {
    z-index:3;
    opacity:1;
    font-size:20px;
    width: calc(104px * 0.95);
    height: calc(120px * 0.95);
    overflow: hidden;
    clip-path:polygon(50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
}

.imgBoard .hex-row .hex {
    background: url('../images/question.png') !important;
}
/*The Board*/
center {
    position:relative;
    top:25px;
}
#roadBoard {
    margin: 0 auto 110px auto;
    position: absolute;
    top:115px;
    left:100px;
}
.imgBoard {
    margin: 0 10px 110px auto;
    position: absolute;
    top:17px !important;
    left:-14px !important;
    z-index:1;
}
.hex,.portHex {
    float: left;
    margin-left: 0;
    margin-bottom: -30px;
    position: relative;
    z-index: 0;
}

.imgBoard * * {
    float: left;
    margin-left: calc(3px*3.1) !important;
    margin-bottom: calc(-30px * 0.3 - 4px) !important;
}
/*104px by 120px*/
.hex .top-left {
    width: 0;
    border-bottom: 30px solid transparent;
    border-left: 52px solid transparent;
    border-right: 0 solid transparent;   
    display:inline-block;
    margin:0 !important;
    padding: 0 !important;
}
.hex .top-right {
    width: 0;
    border-bottom: 30px solid transparent;
    border-left: 0 solid transparent;
    border-right: 52px solid transparent;
    display: inline-block;   
    margin: 0 !important;
    padding: 0 !important;
}
.hex .middle-left {
    width: 52px;
    height: 60px;
    background: transparent; 
    display: inline-block;  
}
.hex .middle-right {
    width: 52px;
    height: 60px;
    background: transparent;
    display: inline-block;   
}
.placeholder {
    width:0;
    height: 0;
}
.hex .bottom-left {
    width: 0;
    border-top: 30px solid transparent;
    border-left: 52px solid transparent;
    border-right: 0 solid transparent;
    display:inline-block;
    margin:0 !important;
    padding: 0 !important;
}
.hex .bottom-right {
    width: 0;
    border-top: 30px solid transparent;
    border-left: 0 solid transparent;
    border-right: 52px solid transparent;
    display:inline-block;
    margin:0 !important;
    padding: 0 !important;
}
.hex-row {
    clear: left;
}

.hex-row.first, .hex-row.fifth {
    margin-left: 106px;
}

.hex-row.second, .hex-row.fourth {
    margin-left: 53px;
}
.imgBoard .hex-row * {
    display: flex;
    justify-content: center;
    align-items: center;
}
#propacircle,#usedCirc {
    background-color: burlywood;
    z-index:100;
    width: 40px;
    height:40px;
    border-radius:20px;
}
.settlement {
    position: absolute;
    width: 50px;
    height: 60px;
    display: inline-block;
    margin: 0 !important;
    clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
    z-index:100;
}
.road {
    position: relative;
    z-index:0;
}
.hex,.portHex {
    z-index: 0;
}
#settlementBoard {
    margin: 0 auto 110px auto;
    position: absolute;
    top:115px;
    left:100px;
    width:540px;
    height:510px;
}
.settleHex {
    width: 108px;
    height: 132px;
}
.portHex {
    position: relative !important;
}
.houseWrap {
    filter: drop-shadow(0 0 1px black);
}
/*Ports*/
.port {
    position:absolute;
    top:57px;
    transform-origin: top;
    background-color:greenyellow;
    width:60px;
    height:57px;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    overflow: hidden;
    background-color: black;
}
#port1 {
    transform: rotate(30deg);
}
#port2 {
    transform: rotate(90deg);
}
#port3 {
    transform: rotate(150deg);
}
#port4 {
    transform: rotate(210deg);
}
#port5 {
    transform: rotate(270deg);
}
#port6 {
    transform: rotate(330deg);
}
.label {
    position:absolute;
    width:100%;
    top:5px;
    text-align: center;
    color: lightgreen;
    text-shadow: 0 0 1px red;
}
.image {
    width:60px;
    height:55px;
}
/*.portHex {
    background-color: blue;
}*/