h1,h2{
  font-size: 1rem;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  height: 100vh;
 background:rgba(50,50,50,0.8);
 color:rgba(255,255,255,0.9);
}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:1.2rem 2rem auto auto;
}
header{
  width:100%;
  display: grid;
  place-items:center;
  color:rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.8);
}
footer{
  width:100%;
  display: grid;
  place-items:center;
  color:rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.8);
  font-size: 0.75rem;
}
.header {
  background:rgba(0,0,0,0.7);
}

.sidebar {
  overflow-y: auto;
  background:rgba(50,50,50,0.2);
  scrollbar-color: rgb(20,20,20) rgb(50,50,50);
}

.content {
  min-height:240px;
  overflow-y: auto;
  background:rgba(25,25,25,0.3);

  scrollbar-color: rgb(20,20,20) rgb(50,50,50);
  display: grid;
  place-items:center;
}

.content textarea {
  width:80%;
  height:2fr;
  padding: 4px;
}

@media screen and (max-width: 610px) {
  .body {
    display: grid;

    overflow: hidden;
  }
  .content {
    width:100% !important;
  }
  input[type="text"]{
    font-size:1.1rem;
    padding:0.2rem;
  }
}
@media screen and (min-width: 611px) {
  body{
    height: 100vh;
  }
  .body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /*  overflow: hidden;*/
  }
  .container{
    height: 100%;
    overflow: hidden;
  }
}


/*Universal Styles - works on rows & columns*/
.tabContainer {
  display: grid;
  width: 100%;
  height: 100%;
}
/* Panel Style */
.tabContainer .panels{
  background: rgba(20,20,20,0.5);
}
.tabContainer .panel{
  display:none;
  animation: fadein .4s;
}
.tabContainer .panel textarea{
  width:100%;
  height: 100%;
  padding: 4px;
  background:transparent;
  color:rgba(255,255,255,0.8);
  border: 0px;
}
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
.tabContainer *:checked + .panel{
  display: grid;
  padding: 8px 6px;
  grid-gap: 2rem;
}
/* Tab Styles */
.tabContainer .tab{
  padding:8px;
  color:rgba(180,180,180,0.9);
  display:grid;
  place-items:center;
  box-shadow:0px 1px 0px 0px rgba(0,0,0,0.2), 0px 0px 2px 0px rgba(0,0,0,0.2);
}
.tabContainer .tab.checked {
  background-color: rgba(0,0,0,0.8);
  color:rgba(255,255,255,0.9);
  box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.2);
  outline: 0;
  transition: 0.4s;
}
.tabContainer input[type='radio']{
  display:none;
}
/* END Universal Styles */

/*.tabContainer.rows */
.tabContainer.rows{
  grid-template-rows: 2.5rem auto;
}
.tabContainer.rows .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}

/* Tabs above panels */
.tabs.top{
  grid-row: 1 / span 1;
}
.panels.bottom{
  grid-row: 2 / -1;
  background-color: rgba(0,0,0,0.8);
}
/* END .tabContainer.rows */

/*.tabContainer.columns */
.tabContainer.columns{
  grid-template-columns: repeat(12, auto);
}
.header{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.header > a {
    padding:8px;
    color:rgba(255,255,255,0.8);
    text-decoration: none;
    display: grid;
    align-items: center;
    text-align: center;
}
.header > a:hover {
    background-color: rgba(200,200,255,0.5);
    color:rgba(255,255,255,1);
}
.header > a:active {
    background-color: rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.9);
}

.slider {

-webkit-appearance: none;

height: 26px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.8);
outline: none;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 10%;
background: rgba(150,150,150,0.5);
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 10%;
background: rgba(150,150,150,0.5);
cursor: pointer;
}
canvas{
  touch-action: none;
}