/* Light Mode */
:root[color-mode="light"] {
    --pageBackground: #ffffff; 
    --boxBackground: rgb(250, 250, 250);
    --boxBorder: rgb(225, 225, 225);
    --textColor: #000;
    --numericBackground: white;
    --numericBorder: rgb(182, 182, 182);
    --buttonBackground: white;
    --buttonBorder: rgb(225, 225, 225);
    --calcDarkBg: rgb(240, 240, 240);
    --calcLightBg: rgb(250, 250, 250);
    --calcBorder: rgb(225, 225, 225);
    --bitLabelColor: rgb(65, 65, 65);
    --colorBitColor: rgb(120, 0, 0);
    --setBitColor: rgb(130, 0, 0);
    --setBitPulseColor: rgb(255, 26, 26);
    --clearedBitColor: #d2d0d0;
    --linkColor: rgb(131, 83, 83);
    --tableEvenRowColor: rgb(240, 240, 240);
  }
  
  /* Dark Mode */
  :root[color-mode="dark"] {
    --pageBackground: #1d1d25;
    --boxBackground: #2b2b38;
    --boxBorder: #53536f;
    --textColor: rgb(214, 214, 214);
    --numericBackground: #424257;
    --numericBorder: #585874;
    --buttonBackground: #585874;
    --buttonBorder: #69698a;
    --calcDarkBg: #2b2b38;
    --calcLightBg: #333342;
    --calcBorder: #585874;
    --bitLabelColor: rgb(189, 189, 189);
    --colorBitColor: rgb(255, 56, 56);
    --setBitColor: rgb(255, 56, 56);
    --setBitPulseColor: rgb(255, 255, 255);
    --clearedBitColor: #131313;
    --linkColor: rgb(255, 88, 88);
    --tableEvenRowColor: #2e2e3b;
  }


html, body {
    width: 100%;
    height: 100%;
    background-color:#ffffff;
    background-color: var(--pageBackground, #ffffff);
    color: #000;
    color: var(--textColor, #000);
}

body {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    display:grid;
    grid-template-rows: [header] auto [maincontent] 1fr [footer] auto;
    margin:0;
}

p { 
    line-height: 1.75em;
}

a {
    color: rgb(131, 83, 83);
    color: var(--linkColor,rgb(131, 83, 83));
}


#header {
    border-bottom: 3px solid rgb(168, 0, 0);
    grid-row: header;
    padding: 1em;
}

#titlebar {
    display: grid;
    grid-template-columns: 1fr 3em 1em auto 4em 1fr;
    align-content: center;
    text-align: center;
}

h1#title {
  font-weight: 300;
  font-size: 2em;
  margin:0;
  grid-column-start: 4;
}

h2 {
    font-weight:200;
    font-size: 1.5em;
    text-align: center;
}

#logo {
    font-size: 2em;
    font-weight: 400;
    align-self: center;
    grid-column-start: 2;
}


#content {
    grid-row: maincontent;
    display: grid;
    grid-template-columns: 0.5em [midsect] auto 0.5em;
}

#content-inner {
    grid-column: midsect;
    display: grid;
    grid-template-areas: "calculator" "sidebar";
}

#calculator {
    
    padding: 0 1em;
}

input[type="text"]
{
    font-size:1em;
    box-sizing:border-box;
    color: black;
    color: var(--textColor, black);
}

input[type=checkbox] {
    transform: scale(1.25);
}

#sidebar {
    display:grid;
    justify-content: center;
    padding: 1em;
  
}

#quickRef {
    text-align: center;
    font-weight: 300;
    border-collapse: collapse;
    table-layout: fixed;
    
}

#quickRef td{
    min-width:4em;
    height: 1em;
    padding: 0;
}

#quickRef tr:nth-child(even){
    background-color:rgb(240, 240, 240);
    background-color:var(--tableEvenRowColor, rgb(240, 240, 240));
}

#calcSection {
    margin-bottom: 2.5em;
    padding: 1em;
}

#calcInput {
    display: grid;
    grid-template-rows: repeat(4, 1f);
    grid-gap: 1em;
    
}

#calcInput input, #calcInput label {
    display: block;
    width:100%;
}

#calcInput label {
    padding-left:0.25em;
}

.numericEntry {
    border: 1px solid rgb(225, 225, 225);
    border: 1px solid var(--calcBorder,rgb(225, 225, 225));
    border-radius: 0.5em;
    background-color: rgb(250, 250, 250);
    background-color: var(--numericBackground,rgb(250, 250, 250));
    padding:0.25em;
    margin-top:0.25em;
}

.numericEntry:not(.numericEntryInvalid) {
    -webkit-transition: 0.25s ease all;
    -moz-transition: 0.25s ease all;
    -ms-transition: 0.25s ease all;
    transition: 0.25s ease all;
}

.numericEntryInvalid {
    outline-color: red;
    background-color:red;
    border-color: red;
    color:white;
}

#binInput {
    border: 1px solid rgb(225, 225, 225);
    border: 1px solid var(--calcBorder,rgb(225, 225, 225));
    
    border-radius: 0.5em;
    overflow: hidden;
   /* background-color: rgb(250, 250, 250); */
    
    
    display:grid;
    grid-template-areas: 
    "byte" 
    "byte" 
    "byte";
    margin-top: 1.5em;
}

.byte {
    display:grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1.25em auto;
    align-items: center;;
    background-color:rgb(240, 240, 240);
    background-color: var(--calcDarkBg,rgb(240, 240, 240));
}

.byte:nth-child(even){
   background-color: rgb(250, 250, 250);
   background-color: var(--calcLightBg, rgb(250, 250, 250));
}

.l-msb { grid-column-start: 1;}
.l-lsb { grid-column-start: 8;}

.bitlabel {
    font-size: small;
    text-align: center;
    font-style: italic;
    color:rgb(65, 65, 65);
    color: var(--bitLabelColor,rgb(65, 65, 65));
}



@keyframes bitSet {
    from {border-bottom-color: rgb(255, 26, 26);
        border-bottom-color: var(--setBitPulseColor,rgb(255, 26, 26) );}
    to {border-bottom-color: rgb(130, 0, 0);
        border-bottom-color: var(--setBitColor,rgb(130, 0, 0) );}
  }

@keyframes bitUnset {
    from {border-bottom-color: rgb(105, 105, 167);}
    to {border-bottom-color: #d2d0d0;
    border-bottom-color: var(--clearedBitColor,#d2d0d0 );}
}

.bit {
    align-content: center;
    text-align: center;
    margin: 0;
    padding: 0.3em 0;
    font-size:1.5em;
    font-weight: 400;
    font-family: sans-serif;
    display:block;
    cursor: pointer;
    user-select: none;
    border-bottom: solid 0.2em #d2d0d0;
    border-bottom: solid 0.2em var(--clearedBitColor, #d2d0d0);
    -webkit-transition: ease 0.25s border-color;
    -moz-transition: ease 0.25s border-color;
    -ms-transition: ease 0.25s border-color;
    transition: ease 0.25s border-color;   
}

.clearBit {
    border-bottom-color:#d2d0d0;;
    border-bottom-color: var(--clearedBitColor,#d2d0d0 );
    -webkit-animation: bitUnset 0.5s ease-in-out !important ;
    -moz-animation: bitUnset 0.5s ease-in-out !important;
    -ms-animation: bitUnset 0.5s ease-in-out !important;
    animation: bitUnset 0.5s ease-in-out !important;
}

.setBit {
    border-bottom-color:rgb(130, 0, 0);
    border-bottom-color: var(--setBitColor,rgb(130, 0, 0) );
    /* border-bottom: solid 0.2em rgb(77, 0, 0) !important;*/
    -moz-animation: bitSet 0.5s ease-in-out;
    -webkit-animation: bitSet 0.5s ease-in-out;
    -ms-animation: bitSet 0.5s ease-in-out;
    animation: bitSet 0.5s ease-in-out;
    
 }
 






.bit:nth-child(n+7){
    color: rgb(120, 0, 0);
    color: var(--colorBitColor,rgb(120, 0, 0));
}

.box {
    padding-bottom:0.75em;
    margin-bottom: 0.75em;
    border: 1px solid rgb(225, 225, 225);
    border: 1px solid var(--boxBorder, gb(225, 225, 225));
    border-radius: 0.5em;

    background-color: rgb(250, 250, 250);
    background-color: var(--boxBackground, rgb(250, 250, 250));

    transition: 0.25s ease background-color, 0.25s ease border-color;
}

#shift {
    display:flex;
    justify-content: center;
    align-content: center;
    padding:1em;
    margin:0;
}

#shift p{
    margin: 0.2em;
}

.shiftButton {
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
  font-size: 1em;
  color: black;
  color: var(--textColor, black);
  background-color:white;
  background-color:var(--buttonBackground, white);
  border-color: inherit;
  border-color: var(--buttonBorder, inherit);
  -webkit-transition: 0.25s linear outline;
  -moz-transition: 0.25s linear outline;
  -ms-transition: 0.25s linear outline;
  transition: 0.25s linear outline;
}

#shiftAmount {
    opacity: 0;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

#shiftAmount:not(.visibleShift){
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
}

.visibleShift {
    opacity:1 !important;
}

.boxHeading {
    text-align: center;
    font-size: 1.2em;
    margin: 0.25em 0;
}

.boxInner {
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5em;
}

.boxInner p{
    flex-grow: 1;
    text-align:center;
    margin: 0.5em;
}

.setting {
    padding: 1em 2em;
}

.setting input {
    vertical-align: bottom;
    position:relative;
    margin-right: 1em;
}

#footer {
    border-top: 2px solid rgb(168, 0, 0);
    grid-row: footer;
}

#footer p {
    font-size: 0.75em;
    text-align: center;
}

.colorTransition {
    -webkit-transition: 0.25s ease background-color, ease 0.25s border-color;
    -moz-transition: 0.25s ease background-color, ease 0.25s border-color;
    -ms-transition: 0.25s ease background-color, ease 0.25s border-color;
    transition: 0.25s ease background-color, ease 0.25s border-color;
}

.center {
    text-align: center;

}

.smallText {
    font-size:0.75em;
}



/* 1008px */
@media (min-width: 80em){
    #content {
        width: 90%;
        max-width: 108em;
        margin: 0 auto;
    }
   
    #content-inner {
        grid-template-areas: "calculator sidebar";
    }
    #quickRef td{
        font-size:smaller;
    }
    

    h2 {
        text-align: left;
    }
}

@media (min-width: 62em){
    #binInput{
        grid-template-areas: "byte byte byte byte" !important;
    }
}

/* 704 px */
@media (min-width: 56em){
    #calcInput {
        grid-template-rows: 1fr;
        grid-template-columns: repeat(3, 1fr) 2fr;
        grid-gap:1em;
    }

    .shiftButton {
       padding: 0.5em 2em;
    }
  
    #binInput{
        grid-template-areas: "byte byte";
    }
}

/* 512 px */
@media (min-width: 40em){
    #content {
        grid-template-columns: 2em [midsect] auto 2em;
    }

    .boxInner {
        flex-direction: row;
    }

    .setting {
        padding: 0em 2em;
    }

    .shiftButton {
        margin: 0 1em;
    }

    #calculator{
        padding: 0 1em;
    }

}