:root {
  color-scheme: dark;
  zoom:100%;
  
}

#horizontal{
	/* display:inline; */
	overflow: auto;
    white-space: nowrap;
	outline: 8px solid #161517;
}
#play-button {
    background-color: #32a32f;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMjYgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CgoJPGcgaWQ9IkJ1dHRvbi0vLVBsYXktQnV0dG9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDEuMDAwMDAwLCAtMzMuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CgkJPGcgaWQ9ImljX3BsYXlfYXJyb3ciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjAwMDAwMCwgMjIuMDAwMDAwKSI+CgkJCTxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIxOC4zMzMzMzMzIDExLjQ1ODMzMzMgMTguMzMzMzMzMyA0My41NDE2NjY3IDQzLjU0MTY2NjcgMjcuNSI+PC9wb2x5Z29uPgoJCTwvZz4KCTwvZz4KPC9zdmc+Cg==);
   
    background-size: 1%;
    text-align: center;
    text-transform: uppercase;
	

    width: 64px;
    height: 64px;
    
margin: auto;
    
    width: 80px;
    height: 80px;
    

    content: "\a";
   
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 50%;
    background-size: 40%;
}
#play-button:hover {
	background-color: #4ecf4a;
}
#tempo-slider input.input-number, #tempo-slider, #reset-button, #play-button, #bottom .clear-button, #bottom .button {
    /* background-color: #252426; */
    font-family: "Poppins",sans-serif;
    letter-spacing: .1ex;
}
body button, html button {
    cursor: pointer;
    border: none;
    font-family: "Quicksand",sans-serif;
}
user agent stylesheet
button {
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-weight: ;
    font-stretch: ;
    font-size: 200px;
    font-family: ;
    font-optical-sizing: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: center;
    cursor: default;
    writing-mode: horizontal-tb !important;
}
#bottom {
    border-top: 20px solid #252426;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 109px;
    font-size: 12px;
    text-align: center;
    background: #252426;
}
body, html {
	align-items: center;
	display:inline;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    /* overflow: hidden; */
    /* line-height: 1.89; */
    font-family: "Quicksand",sans-serif;
	font-size:50px;
	
    display: flex;
    background-color:#0f1014;
    align-items: center;
    flex-direction: column;
}
:root {
  color-scheme: dark;
}
p{
	
	font-size: 4vmin;
}

.button{
	font-size:0vmin;
	background-color:#32a32f;
	border-radius:2px;
	padding: 10px 10px 10px 10px;
	margin: 1px 10px 1px 10px;
	transition: 0s ease;
	text-decoration: none;
	color:white;
	
	border-radius:200px;
	
	
}
.buttonsave{
	font-size:0vmin;
	background-color:#32a32f;
	border-radius:2px;
	padding: 0px 0px 0px 0px;
	margin: 1px 10px 1px 10px;
	transition: 0s ease;
	text-decoration: none;
	color:white;
	
	border-radius:200px;
	
	
}

.buttonsmall{
	color:white;
	font-size:3vmin;
	background-color:#3160a3;
	border-radius:10px;
	padding: 20px 20px 20px 20px;
	margin: 20px 20px 20px 20px;
	transition: 0s ease;
	text-decoration: none;
	outline-color:white;
	outline-style: solid;
	outline-width:0px;
	
	outline-width: 10px;
	outline-color:#30286B
	
}
.footer {
  bottom: 0;
  width: 100%;
  margin-bottom:30px;
  position: absolute;
  color: #FFFFFF55;
}
.button:hover{
	
	background-color:#4ecf4a;
	outline-width: 5px;
	outline-color:#ffffff50;
}

.buttonsmall:hover{
	background-color:#4AAFE7;
	outline-width: 1px;
	outline-color:#ffffff50;
	
}

.buttonsmall:active{
	background-color:#30286b;
	outline-width: 0px;
	
	transition: 0s ease;
}

.button:active{
	background-color:#0d6938;
	outline-width: 0px;
	
	transition: 0s ease;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 256px 0px;
  }
}
#animate-area {
  width: 100%;
  height: 100%;
  background-image: url(/bg.png);
  background-repeat: true;
  animation: animatedBackground 10s linear infinite running;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;

}

span {
  color: #ffffff;
  font-size: 20px;
  margin-block-end: 1em;
  margin-block-start: 1em;
  width:90%;
}


/* .container>p{ */
	
	/* margin-left:40px; */
/* } */
.container>h3{
	
	margin-left:20px;
}

#main {
    position: absolute;
    top: 25px;
    right: 25px;
    bottom: 25px;
    left: 175px; /* width of #sidebar + extra margin */
}

.socialbutton{
filter: brightness(100%);
-webkit-filter: brightness(100%);
-webkit-transition: all 0.01s ease;

}

.socialbutton:hover{
filter: brightness(100%);
-webkit-filter: brightness(100%);
transition: 0.01s ease;
background-color:#ffffff10;
}

.socialbutton:active{
filter: brightness(70%);
-webkit-filter: brightness(70%);
transition: 0.01s ease;
}

.sidenav {
font-family: monospace;
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #00000377; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  font-size: 25px;
  color: #0B0B0E;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 60px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}
iframe{
	margin:20px 20px 0px 20px;
}
h4{
	margin: 0px 0px 0px 0px;
	
	font-size: 4vmin;
}

a{
color:#32a32f;
}
.navbar, .container{
   background-color:#23442c;
    width: 1000px;
    
}
.navbar{
   
    margin-bottom: 0.2em;
   
    justify-content: center;
    align-items: center;
	width:100%;
}
.btn{
	background-color: #00000000;
}
.btn, input{
    height: 35px;
    padding: 0 1em;
}
.color{
    padding: 0 .25em;
    width: 100px;
    margin: 0 1em;
}

.container{
	margin-top:100px;
    --size: 4;
    height: 700px;
    display: grid;
    grid-template-columns: repeat(var(--size), 1fr);
    grid-template-rows: repeat(var(--size), 1fr);
    gap: 2px;
    padding: 3px;
}
.pixel{
    background-color: #191c25;
    
}
#topbar{
	position: absolute;
    left: 0px;
    width: 100%;
    height: 81px;
    top: 0px;
    box-sizing: border-box;
    background-image: linear-gradient(#191c25,#173529);
    border-bottom: 4px solid #0d6938;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,.02);
	display: flex;
    justify-content: right;
    align-items: center;
}

#bottombar{
	border-top: 4px solid #0d6938;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
    font-size: 12px;
    text-align: center;
    background-image: linear-gradient(#173529,#191c25);
	
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-logo{
	color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    font-family: "Quicksand",sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    font-size: 20px;
    letter-spacing: 2px;
}

#palettePreview{
	margin-right:30px;
	
}

#resetbutton{
	background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIxcHgiIGhlaWdodD0iMjFweCIgdmlld0JveD0iMCAwIDIxIDIxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgoJPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OC4yICg0NzMyNykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+Cgk8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KCTxkZWZzPjwvZGVmcz4KCTxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgoJCTxnIGlkPSJTdGFydC1vdmVyIj4KCQkJPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuNTAwMDAwLCAxMC41MDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTEwLjUwMDAwMCwgLTEwLjUwMDAwMCkgIj4KCQkJCTxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMzM0IzRjIiIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjEwLjUiIGN5PSIxMC41IiByPSIxMC41Ij48L2NpcmNsZT4KCQkJCTxnIGlkPSJTdGFydG92ZXIiPgoJCQkJCTxwYXRoIGQ9Ik0xMC40OTY1NjA0LDUgQzcuNDU1OTA5OTQsNSA1LDcuNDYxMjUgNSwxMC41IEM1LDEzLjUzODc1IDcuNDU1OTA5OTQsMTYgMTAuNDk2NTYwNCwxNiBDMTMuMDYyNTM5MSwxNiAxNS4yMDIwMDEzLDE0LjI0Njg3NSAxNS44MTQyNTg5LDExLjg3NSBMMTQuMzgzMzY0NiwxMS44NzUgQzEzLjgxOTI2MiwxMy40NzY4NzUgMTIuMjkyMDU3NSwxNC42MjUgMTAuNDk2NTYwNCwxNC42MjUgQzguMjE5NTEyMiwxNC42MjUgNi4zNjg5ODA2MSwxMi43NzU2MjUgNi4zNjg5ODA2MSwxMC41IEM2LjM2ODk4MDYxLDguMjI0Mzc1IDguMjE5NTEyMiw2LjM3NSAxMC40OTY1NjA0LDYuMzc1IEMxMS42Mzg1MjQxLDYuMzc1IDEyLjY1NjY2MDQsNi44NDkzNzUgMTMuMzk5NjI0OCw3LjU5ODc1IEwxMS42MTE1ODkyLDkuMzg1NjY4MDUgQzExLjUxMzkyNzYsOS40ODMyNjg2IDExLjUxMzg3ODEsOS42NDE1NTk4NCAxMS42MTE0Nzg3LDkuNzM5MjIxNDMgQzExLjY1ODM2NzIsOS43ODYxMzkzMyAxMS43MjE5Nzk0LDkuODEyNSAxMS43ODgzMTA2LDkuODEyNSBMMTUuNzUsOS44MTI1IEMxNS44ODgwNzEyLDkuODEyNSAxNiw5LjcwMDU3MTE5IDE2LDkuNTYyNSBMMTYsNS42MDMyODY2NyBDMTYsNS40NjUyMTU0OCAxNS44ODgwNzEyLDUuMzUzMjg2NjcgMTUuNzUsNS4zNTMyODY2NyBDMTUuNjgzNzIzLDUuMzUzMjg2NjcgMTUuNjIwMTU4Miw1LjM3OTYwNDQzIDE1LjU3MzI3ODYsNS40MjY0NTQ3MyBMMTQuMzgzMzY0Niw2LjYxNTYyNSBDMTMuMzg1ODY2Miw1LjYxODc1IDEyLjAxNjg4NTYsNSAxMC40OTY1NjA0LDUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjUwMDAwMCwgMTAuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMC41MDAwMDAsIC0xMC41MDAwMDApICI+PC9wYXRoPgoJCQkJCTxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDAgMjEgMCAyMSAyMSAwIDIxIj48L3BvbHlnb24+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+Cjwvc3ZnPgo=);
	
    
    display: block;
    content: "\a";
    width: 23px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
	
}
.size{
	font-size:20px;
	
    font-family: "Quicksand",sans-serif;
}

.topbuttons{
	 float: right;
	 display: flex;
	
}

#instrument-toggle-button{
	border-style: solid;
	    background: #191c25;
    border-color: #0d6938;
    border-radius: 10px;
    border-width: 4px;
    color: #ffffff;
    font-size: 21px;
    width: 16ch;
	margin-right:10px
}

#colorpicker{
	border-style: solid;
	    background: #191c25;
    border-color: #0d6938;
    border-radius: 10px;
    border-width: 4px;
    color: #ffffff;
    font-size: 21px;
    width: 16ch;
}

#paletteSelector{
	border-style: solid;
	    background: #191c25;
    border-color: #0d6938;
    border-radius: 10px;
    border-width: 4px;
    color: #ffffff;
    font-size: 21px;
    width: 16ch;
}


input[type='file']{
	color:transparent;
	font-size:20px;
	width:120px;
}