*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Fonts */
.device {
  font-family: 'Unica One', cursive;
}

.screw.top.left { grid-area: screwtopleft; }
.screw.bottom.left { grid-area: screwbottomleft; }
.screw.top.right { grid-area: screwtopright; }
.screw.bottom.right { grid-area: screwbottomright; }
.device .header { grid-area: header; }
.wbmpc .display { grid-area: display; }
.wbmpc .wbmpclogo { grid-area: wbmpclogo; }

/* wbmPC Grid */
.wbmpc {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 30px;
  grid-template-rows: 30px auto auto auto auto 30px;
  grid-template-areas: 
    "screwtopleft header header header header header header header header screwtopright"
    ". tab1 tab2 tab3 tab4 display display display display ."
    ". tab5 tab6 tab7 tab8 info info info info ."
    ". tab9 tab10 tab11 tab12 info info info info ."
    ". tab13 tab14 tab15 tab16 . . wbmpclogo wbmpclogo ."
    "screwbottomleft . . . . . . . . screwbottomright";
}

.tab1 { grid-area: tab1; }
.tab2 { grid-area: tab2; }
.tab3 { grid-area: tab3; }
.tab4 { grid-area: tab4; }
.tab5 { grid-area: tab5; }
.tab6 { grid-area: tab6; }
.tab7 { grid-area: tab7; }
.tab8 { grid-area: tab8; }
.tab9 { grid-area: tab9; }
.tab10 { grid-area: tab10; }
.tab11 { grid-area: tab11; }
.tab12 { grid-area: tab12; }
.tab13 { grid-area: tab13; }
.tab14 { grid-area: tab14; }
.tab15 { grid-area: tab15; }
.tab16 { grid-area: tab16; }



.tab, .screw, .display, .wbmpclogo { justify-self: stretch;}

/* wbmPC Layout */
.device {
  background-color: white;
  margin: auto;
  width: calc(100vw-20px);
  max-width: 1200px;
  padding: 10px;
}

.screw { 
  background-image: url("screw.png");
  background-repeat: no-repeat;
  background-size: cover;
} 

.wbmpc .header {
  font-size: 1.5em;
  color: white;
  text-shadow: rgba(78, 78, 78, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.637) 0 2px 1px;
  text-align: left;
  padding-left: 10px;
}

.wbmpc {
  background-color: rgb(36, 59, 85);
  background-image:linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
}

.wbmpc .tab {
  position: relative;
  font-size: 1em;
  color: black;
  text-shadow: rgba(78, 78, 78, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.637) 0 2px 1px;
  line-height: 2em;
  text-align: left;
  cursor: pointer;
  border: none;
  background-color: #b9c4c7;
  background-image: linear-gradient(315deg, #b9c4c7 0%, #a4adb4 74%);
  border-radius: 10px;
  padding: 5px 10px;
  margin: 3px;
  box-shadow: 
    inset #262626 0 0px 0px 1px, 
    inset rgba(38, 38, 38, 0.8) 0 -1px 2px 1px, 
    inset rgba(0, 0, 0, 0.25) 0 -1px 0px 1px, 
    inset rgba(255, 255, 255, 0.7) 0 2px 1px 3px, rgba(0, 0, 0, 0.15) 0 -1px 2px 3px, rgb(67, 87, 110) 0 1px 1px 1px;
}

.wbmpc .tab:after {
  content: "";
  display: block;
  padding-bottom: 85%;
}

.green:active, .green.press {
  background-color: #30ec1f !important;
  background-image: linear-gradient(315deg, #30ec1f 0%, #50db43 74%) !important;
}

.red:active, .red.press {
  background-color: #f14932 !important;
  background-image: linear-gradient(315deg, #f14932 0%, #e92b0a 74%) !important;
}

.blue:active, .blue.press {
  background-color: #2357e7 !important;
  background-image: linear-gradient(315deg, #2357e7 0%, #1580c7 74%) !important;
}

.orange:active, .orange.press {
  background-color: #ec7b1f !important;
  background-image: linear-gradient(315deg, #ec7b1f 0%, #e7650f 74%) !important;
}

.wbmpc .tab {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}

.display {
  font-family: 'Press Start 2P', cursive;
  margin: 4px;
  padding: 10px;
  border-radius: 4px;
  background: linear-gradient(45deg, #286dc2 0%, #2462ad 20%, #3d90d4 60%, #3f8efd 100%);
  box-shadow: inset -1px 3px 8px 5px #2261ad;
  border: 4px solid black;
  color: #06172c;
  text-align: right;
}

.wbmpclogo {
  background-image: url("wbmpclogo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}


@media only screen and (max-width: 700px) {
  .wbmpc {
    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
    grid-template-rows: 20px auto auto auto auto 20px;
  }
  .wbmpc .header {
    font-size: 1.0em;
  }
  .wbmpc .tab {
    font-size: 0.7em;
  }
}

@media only screen and (max-width: 550px) {
  .wbmpc .header {
    font-size: 0.8em;
  }
  .wbmpc .tab {
    font-size: 0.5em;
  }
}