/* -- Copyright 2024 Corey Gossman -- */

html {
  height: 100%;
  width: 100%;
}
body {
  font-family: "arial";
  color: #665555 ;
  font-weight:600;
  background-image: url(https://jldesignlab.net/images/inspo/2x/14_Neils_RS@2x.jpg);
  background-size: cover;
  margin:0px;
}

h1{
  font-family: sans-serif;
  text-align: center;
  font-weight: 600;
  font-size: 52px;
  padding: 0px;
  margin: 0px;
}

label{
  text-align: center;
  border-radius: 0px;
}
input ~ label {
  filter: brightness(86%);
}
input:checked ~ label{
  filter: brightness(100%);
  box-shadow: 0px 2px 3px slategray;
  position: relative;
  z-index: 10;
}
label:hover{
  filter: brightness(94%)
}

.arm-style-button {
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-content:center;
}
.arm-style-button > input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.arm-style-button > label{
  background-color: peachpuff;
  margin : 1px 0px;
  align-content: center;
  border: black solid 0px;
  padding : 20px 10px 20px 10px;
}
  
.item-picker-box{
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-content:center;
}
.item-picker-box > input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.item-picker-box > input ~ label {
  background-color: #e0f1f6;
  margin : 0.5px;
  align-content: center;
  vertical-align: middle;
  padding : 20px 10px 20px 10px;
}
  
.seat-depth-button{
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-content:center;

}
.seat-depth-button > input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.seat-depth-button > input ~ label{
  background-color: lightblue;
  margin: 0.5px 0px;
  padding : 20px 10px 20px 10px;
}

.cushion-type-button{
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-content:center;
}
.cushion-type-button > input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.cushion-type-button > input ~ label{
  background-color: peachpuff;
  margin: 0.5px 0px;
  padding : 20px 10px 20px 10px;
}

.leg-style-button{
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-content:center;
}
.leg-style-button > input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.leg-style-button> input ~ label{
  background-color: cornsilk;
  height: 3em;
  padding: 10px;
  margin: 1px 0px;
  padding : 20px 10px 20px 10px;
}

.instruction-label{
  background: white;
  text-align:center;
  margin:0.5px;
  padding: 5px;
}
.instruction-label>h2{
  padding:0px;
  margin:0px;
  font-size: 42px;
}
.instruction-label>p{
  padding:0px;
  margin:0px;
}

.item-code{
  padding : 10px;
  margin: 0px 0px 0px 0px;
  color: #445566;
  background-color: white;
  border-color: #998877;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
  text-align: right;
  box-shadow: 0px 2px 3px slategray;
}
.item-code+.item-code{
  border-width: 0px 1px 1px 0px;
}
.item-name{
  padding : 10px;
  margin : 0px 0px 0px 0px;
  background-color: #ddeeff;
  border-color: #998877;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
  box-shadow: 0px 2px 3px slategray;
}
.item-name+.item-name{
  border-width: 0px 0px 1px 1px;
}

#app-title{
  background-color: white;
  position: sticky;
  padding: 0px;
  top:0;
  width: 100%;
  border: 1px solid #998877;
  z-index: 100;
  box-shadow: 0px 0px 5px slategray;
}

#app-container{
  display:flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 2% 4% 4% 4%;
}

#JLApp{
  max-width: 760px;
  min-width: 320px;
  flex-grow: 1;
  padding: 1px;
  background-color: #998877;
  box-shadow: 0px 2px 3px slategray;
}

#code-container{
  flex-grow: 1;
  max-width: 760px;
  min-width: 320px;
}

#code-instructions{
  border: 1px solid #998877;
  box-shadow: 0px 2px 3px slategray;
  margin-bottom: 0px;
}
  
#code-display{
  justify-content: center;

  margin-top: 0px;
  display: grid;
  grid-template-columns: 50% 50%;
}

#arm-style{
  display:grid;
  grid-template-columns: 16% 17% 17% 17% 17% 16%;
  margin: 0px 1px
}
#item-picker{
  display:grid;
  grid-template-columns: 16% 17% 17% 17% 17% 16%;
  margin: 1px 0px;
}
#seat-and-cushion-block{
  display:grid;
  grid-template-columns: 50% 50%;
}
#seat-depth{
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0px 1px 0px 1px;
}
#seat-depth > div > input:checked ~ label{
  filter: brightness(105%);
}
#cushion-type{
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0px 1px 0px 1px;
}
#leg-style{
  display:grid;
  grid-template-columns: 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.2% ;
}

@media screen and (max-width: 550px){
  #arm-style{
    display:grid;
    grid-template-columns: 33% 34% 33%;
    margin: 0px 1px
  }
  #item-picker{
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin: 1px 0px;
  }
  #leg-style{
    display:grid;
    grid-template-columns: 33% 34% 33%;
  }
  .cushion-type-button > input ~ label{
    background-color: peachpuff;
    height: 3em;
    margin: 0.5px 0px;
    padding : 20px 10px 20px 10px;
  }
  .seat-depth-button > input ~ label{
    background-color: lightblue;
    height:3em;
    margin: 0.5px 0px;
    padding : 20px 10px 20px 10px;
  }
  .instruction-label>p{
    padding:0px;
    margin:0px;
    height:1em;
  }
}