html,body{
    height:100%;
    width:100%;
    min-width:1400px;
    min-height:1000px;
}
body{
    background-image:url("../img/background_skyline.jpg");
    background-size:cover;
    font-family:"Futura PT Heavy";
}
#information{
    position:absolute;
    right:10px;
    bottom:10px;
    text-align:right;
    font-size:20px;
}
#left_information{
    position:absolute;
    left:10px;
    bottom:10px;
    font-size:20px;
}
a{
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color:red;
}
.content{
    display:flex;
    align-items:center;
    text-align:center;
    justify-content:center;
    height:100%;
    width:100%;
}
#game{
    float:left;
    background-image: url("../img/Monopoly_Blank_Board_FINAL.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    border:3px solid black;
}
#setup_div, #resume_div{
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size:18px;
}
#setup_div input{
    color:black;
}
#game_div{
    width:1550px;
}
.hidden {
    display: none !important;
}
.float33{
    float:left;
    width:33%;
}
input[type=text], select{
    padding:12px 20px;
    margin:8px 0;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing:border-box;
    width:100%;
}
.handicap{
    text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight:600;
}
.player{
    font-family:"copperplate_gothic_boldRg";
}
.settings_div{
    margin-top:-10px;
}
.filter-option-inner-inner{
    font-size:32px;
    text-align:center;
}
.handicap-0{color:#FDFFFC;}
.handicap-10{color:#F9FBFB;}
.handicap-20{color:#FAF4DF;}
.handicap-30{color:#F5E288;}
.handicap-40{color:#E4B100;}
.handicap-50{color:#F98309;}
.handicap-60{color:#DF7900;}
.handicap-80{color:#BA2C00;}
.handicap-100{color:#DE0300;}
.handicap-125{color:#D7020B;}
.handicap-150{color:#C0050D;}
.handicap-200{color:#AE0219;}
.handicap-300{color:#AB0224;}

.owned_characters{
    font-size:18px;
}
.character_card{
    margin-top:3px;
    border:3px solid black;
    color:black;
    padding:5px;
    line-height:1;
}

.character_card img{
    width:30px;
    height:30px;
}

.owned_station{
    object-fit:cover;
    object-position:0 90%;
}
.pointer{
    cursor:pointer;
}

/* CSS */
.button-1 {
    background-color: #1fb25a;
    border-radius: 8px;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 20px;
    list-style: none;
    margin: 0 auto;
    outline: none;
    padding: 10px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color 100ms;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-1:hover,
.button-1:focus {
    background-color: #0072bb;
}
#top_board{
    position:absolute;
    top:130px;
    left:0;
    right:0;
    margin:0 auto;
    width:300px;
    font-size:20px;
    /*border:1px solid black;*/
    height:200px;
    z-index:10;
}
#match_settings{
    position:absolute;
    top:240px;
    left:0;
    right:0;
    margin:0 auto;
    width:300px;
    font-size:20px;
    height:120px;
}
#match_settings .text{
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
#bottom_board{
    position:absolute;
    bottom:130px;
    left:0;
    right:0;
    margin:0 auto;
    width:212px;
    /*border:1px solid black;*/
    height:200px;
}
#left_board{
    position:absolute;
    bottom:0;
    top:0;
    left:400px;
    right:0;
    margin:auto 0;
    width:212px;
    /*border:1px solid black;*/
    height:212px;
    font-size:18px;
}
#right_board{
    position:absolute;
    bottom:0;
    top:0;
    right:400px;
    margin:auto 0;
    width:212px;
    /*border:1px solid black;*/
    height:212px;
    font-size:18px;
}
#2roll_dice{
    position:absolute;
    bottom:300px;
    left:0;
    right:0;
    margin:0 auto;
    width:100px;
}
.die_face{
    display:grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
    flex:0 0 auto;
    padding:10px;
    width:100px;
    height:100px;
    background-color:#e7e7e7;
    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
    border-radius: 10%;
}
.pip {
    display: block;
    align-self: center;
    justify-self: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #333;
    box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

.pip:nth-child(2) {
    grid-area: b;
}
.pip:nth-child(3) {
    grid-area: c;
}
.pip:nth-child(4) {
    grid-area: d;
}
.pip:nth-child(5) {
    grid-area: e;
}
.pip:nth-child(6) {
    grid-area: f;
}
/* This selects the last pip of odd-valued dice (1, 3, 5) and positions the pip in the center */
.pip:nth-child(odd):last-child {
    grid-area: g;
}