html, body {
    margin:0;
    padding:0;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    overflow:hidden;
  }
  
  @media all and (orientation: landscape) {

    #board {
        width: 100vh;
        height:100vh;
        /* height: calc(100vw * (9/16)); */
        position: absolute;
        right:0;
        /* top: 50%;
        transform: translate(-50%, -50%); */

      }

      h2 {
        font-size: 5vh;
        padding:0;
        margin:0;
        color: black;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      h3 {
        font-size: 2.5vh;
        padding:0;
        margin:0;
        color:black;
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translate(-50%, -50%);
      }


      #options {
        position: absolute;
        /* height: calc(100vh*(3/4)); */
        height:65%;
        width: calc(100vw - 100vh);
        left:0;
        top:35%;

  }
  #title {
        position: absolute;
        /* height: calc(100vh*(1/4)); */
        height:35%;
        width: calc(100vw - 100vh);
        left:0;
        top:0;
        text-align: center;
}
#test-outer {
  /* -webkit-clip-path: polygon(75% 0, 100% 49%, 75% 100%, 25% 100%, 0 50%, 25% 0);;
  clip-path: polygon(75% 0, 100% 49%, 75% 100%, 25% 100%, 0 50%, 25% 0); */
  width:98vh;

  height: calc(98vh * 1.732050808 / 2);
  height:98vh;
  background: rgb(74, 83, 87);
  background: rgb(0,153,211);
  position: absolute;
  left: 50%;
  overflow: hidden;
  top: 50%;

  transform: translate(-50%, -50%);/*rotate(30deg); */
  overflow-x: hidden;
  background-size: 100% 100%;
  background: url(/static/images/catan/background_new3.png);
}

#border-normal {
  width:99vh;
  height: calc(99vh * 1.732050808 / 2);
  background: rgb(0,153,211);
  position: absolute;
  left: 50%;
  overflow: hidden;
  top: 50%;
  transform: translate(-50%, -50%);/*rotate(30deg); */
  overflow-x: hidden;
  background: url(/static/images/catan/background_new3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat
}

#borderExpanded {
  width:99vh;
  height: calc(99vh * 1.732050808 / 2);
  background: rgb(0,153,211);
  position: absolute;
  left: 50%;
  overflow: hidden;
  top: 50%;
  transform: translate(-50%, -50%);/*rotate(30deg); */
  overflow-x: hidden;
  /* background: url(/static/images/catan/background.png); */
  background-size: 100% 100%;
  background-repeat: no-repeat
}




.button {
  /* width:80%;
  height:20%;
  position: absolute;
  left: 10%;
  top:10%;
  font-size: 30px; */

  width:50%;
  height:20%;
  position: absolute;
  left: 40%;
  top:10%;
  font-size: 30px;

}

.select {
  width:25%;
  height:20%;
  position: absolute;
  left: 10%;
  top:10%;
  font-size: 30px;
}

.selecttwo {
  width:25%;
  height:20%;
  position: absolute;
  left: 10%;
  top:30%;
  font-size: 30px;
}

}
  
@media all and (orientation: portrait) {

    #board {
        width: 100vw;
        height:100vw;
        /* height: calc(100vw * (9/16)); */
        position: absolute;
        left: 50%;

        transform: translate(-50%, 0);
        top: 15.5%;
        /* top: calc(100vh - 100%); */


    }

    #options {
      height: calc((100vh - 100vw)/2.5);
      /* height:30%; */
      width: 100vw;
      position: absolute;
      bottom:0;
  }

  #title {
      /* height: calc((100vh - 100vw)/2); */
      height:15%;
      width: 100vw;
      position: absolute;
      top:0;
      text-align: center;
      /* border: 2px solid black */
  }


    h2 {
      font-size: 5vw;
      padding:0;
      margin:0;
      color:black;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    h3 {
      font-size: 2.5vw;
      padding:0;
      margin:0;
      color:black;
      position: absolute;
      left: 50%;
      top: 75%;
      transform: translate(-50%, -50%);
    }



    #test-outer {
      -webkit-clip-path: polygon(75% 0, 100% 49%, 75% 100%, 25% 100%, 0 50%, 25% 0);;
      clip-path: polygon(75% 0, 100% 49%, 75% 100%, 25% 100%, 0 50%, 25% 0);
      width:98vw;

      height: calc(98vw * 1.732050808 / 2);
      background: rgb(74, 83, 87);
      background: rgb(0,153,211);
      position: absolute;
      left: 50%;
      overflow: hidden;
      top: 50%;

      transform: translate(-50%, -50%);/*rotate(30deg); */
      overflow-x: hidden;
      /* background-size: 100% 100%; */
      /* background: url(/static/images/catan/background.png); */
    }

    #test-outer::after {
      background: rgb(200,153,211);
    }

    #border-normal {
      width:99vw;
      height: calc(99vw * 1.732050808 / 2);
      background: rgb(0,153,211);
      position: absolute;
      left: 50%;
      overflow: hidden;
      top: 50%;
      transform: translate(-50%, -50%);/*rotate(30deg); */
      overflow-x: hidden;
      background: url(/static/images/catan/background.png);
      background-size: 100% 100%;
      background-repeat: no-repeat
    }
    .button {
      width:50vw;
      height:40%;
      position: absolute;
      left: 40%;
      top:10%;
      font-size: 15px;

    }

    .select {
      width:25%;
      height:40%;
      position: absolute;
      left: 10%;
      top:10%;
      font-size: 15px;
    }

}
  
    .hex-normal {
  
      -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      height:17.5%;
      width: calc(17.5% * 1.732050808 / 2);
      background: rgb(71, 70, 70);
      /* POSITIONING */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .hex-expanded {
  
      -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      height:15.5%;
      width: calc(15.5% * 1.732050808 / 2);
      background: rgb(71, 70, 70);
      /* POSITIONING */
      position: absolute;
  
      /* transform: rotate(30%); */
  
  
      transform-origin: 50% 50%;
      left: 50%;
      top: 50%;
      transform:  translate(-50%, -50%) rotate(90deg);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .circle-normal {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: calc(40% * 1.73205 / 2);
      width: 40%;
      border: 1px solid black;
      background:rgb(227, 197, 134);
      border-radius: 50%;
  
    }
  
    .circle-expanded {
      position: absolute;
      left: 50%;
      top: 50%;
      transform:  translate(-50%, -50%) rotate(-90deg);
      height: calc(40% * 1.73205 / 2);
      width: 40%;
      border: 1px solid black;
      background:rgb(227, 197, 134);
      border-radius: 50%;
  
    }
  
  
  
   .high-prob h2
    {
      color: red;
    }
  
  
  
  /* mess with tile width calc or no repeat on the tiles */
  
    .sheep
    {
      background: url(/static/images/catan/sheep.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .wheat
    {
      background: url(/static/images/catan/wheat.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .wood
    {
       background: url(/static/images/catan/wood.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .brick
    {
      background: url(/static/images/catan/brick.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
    .ore
    {
      background: url(/static/images/catan/ore.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
  
    .desert
    {
      background: url(/static/images/catan/desert.png);
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
  .port
    {
      background: url(/static/images/catan/wood-port.png);
      background-size: auto 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height:vw;
      width: 6vw;
      background-size: auto 100%;
      background-repeat: no-repeat
    }
  
  
    .desert-chit {
      background: transparent;
      border: transparent;
  
    }
  
  
  
    h1 {
      padding-bottom: 0;
      font-size:30px;
      font-style: bold;
      margin-bottom:0;
    }
  
    h4 {
      padding-top: 0;
      margin-top:0;
    }