@viewport {
  zoom: 2.0;
}

html {
  --grid: 16;
}

html,body{
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
}

body{
  background-color:#123;
}

.main {
  display:grid;
  height:100vh;
  width:100vw;
  grid-template-areas:
      'top top top'
      'left app right';
  grid-template-rows:minmax(min-content, max-content) auto;
  grid-template-columns: auto auto auto;
  background-color: #555;
}

.top-bar {
  grid-area: top;
  display:grid;
  box-sizing: border-box;
  height:4rem;
  background:#222;
  width:100vw;
  grid-template-columns: minmax(min-content, max-content) auto minmax(min-content, max-content);
}

.top-bar div {
  padding:0 1rem;
  line-height:3.5rem;
  border:0.25rem solid #222;
  box-sizing: border-box;
}

.right-bar  {
    grid-area: right;
    background-color:#555;
    color:#eee;
	border-left:2px solid #022;
    box-sizing: border-box
}
.right-bar input{
    box-sizing: border-box;
    width:100%;
    padding:1rem;
}

.left-bar {
    grid-area: left;
    background-color:#555;
    color:#eee;
	border-right:2px solid #022;
}

.left-bar div {
    line-height:2rem;
    border-top:2px;
    border-bottom:2px;
}

.grid {
    grid-area: app;
    display: grid;
    grid-template-columns: repeat(var(--grid), 1fr);
    grid-auto-rows: 1fr;
    height:calc(100vmin - 4rem);
    width:calc(100vmin - 4rem);
	margin:0 auto;
}


.grid div {
  border:1px solid #444;
  box-sizing: border-box;
}

#colorGrid {
    display:grid;
    grid-template-columns: auto auto;
}


#colorGrid div:hover {
    text-shadow: 0px 0px 2px #fff;
}


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.dropbtn {
  color: black;
  text-shadow: 0px 1rem 0rem #FFF;
  font-size: 16px;
  border: none;
  margin-top:-.5rem
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content button {
  color: black;
  padding: 1rem;
  text-decoration: none;
  width:100%;
}

.dropdown:hover .dropdown-content {display: block;}

.block{
    display: block;
    width:100%;
}