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

hr{
	width:90%;
	border-color:#ffffff50;
}



select {
text-align:center;
  appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  width: 100%;
  font-size: 30px;
  padding: 20px;
  background-color: #00000377;
  border: solid 5px #32A32F;
  border-radius: 50px;
  color: #ffffff;
  cursor: pointer;
}

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #00000050;
  border-radius: 40px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #32a32f; 
  border-radius: 40px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #005a25; 
}


iframe{
	border:solid;
	border-color:#00000070;
	border-width:8px;
	
}

#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 {
	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;
}
:root {
  color-scheme: dark;
}
p{
	
	font-size: 4vmin;
}

.footer {
  bottom: 0;
  width: 100%;
  margin-bottom:30px;
  position: absolute;
  color: #FFFFFF55;
}


.tab{
	display: table-cell;
  vertical-align: bottom;
	white-space: nowrap;
	display: block;
	font-size:50%;
	background-color:#32a32f;
	border-radius:20px 20px 0px 0px;
	padding: 10px 40px 10px 40px;
	margin: 0px 10px 0px 10px;
	transition: 0.1s ease-out;
	text-decoration: none;
	color:white;
	outline-style: solid;
	outline-width:10px;
	outline-color:#0e0e14;
}

.tab.active{
	background-color:#0e0e14;
	color:#32a32f;
	
	transition: 0s ease;
}


.tab:hover{

	
	
}

.tab:active{

	transition: 0.01s ease;
	
	
}

.button{
	white-space: nowrap;
	display: block;
	font-size:90%;
	background-color:#32a32f;
	border-radius:100px;
	padding: 20px 80px 20px 80px;
	margin: 20px 20px 20px 20px;
	transition: 0.1s ease-out;
	text-decoration: none;
	color:white;
	outline-style: solid;
	outline-width:0px;
	outline-color:#32a32f;
}

.button:hover{
	
	color:#32a32f;
	background-color:#00000000;
	outline-width: 8px;
	transform: scale(0.95,1.05);
}

.button:active{
	background-color:#0d6938;
	outline-width: 0px;
	transition: 0.01s ease;
	
	transform: scale(1.05,0.95);
}

.buttonsmall{
	white-space: nowrap;
	display:block;
	color:white;
	font-size:70%;
	background-color:#3160a3;
	border-radius:100px;
	padding: 20px 50px 20px 50px;
	margin: 20px 20px 20px 20px;
	transition: 0.2s ease;
	text-decoration: none;
	outline-color:white;
	outline-style: solid;
	outline-width: 0px;
	outline-color:#3160a3
	
}

.buttonsmall:hover{
	color:#3160a3;
	background-color:#00000000;
	outline-width: 8px;
	transform: scale(0.95,1.05);
	
}

.buttonsmall:active{
	background-color:#30286b;
	outline-width: 0px;
	transform: scale(1.05,0.95);
	transition: 0.01s ease;
}

.buttondiscord{
	white-space: nowrap;
	display:block;
	color:white;
	font-size:70%;
	background-color:#5865f2;
	border-radius:100px;
	padding: 20px 50px 20px 50px;
	margin: 20px 20px 20px 20px;
	transition: 0.2s ease;
	text-decoration: none;
	outline-color:white;
	outline-style: solid;
	outline-width: 0px;
	outline-color:#5865f2
	
}

.buttondiscord:hover{
	color:#5865f2;
	background-color:#00000000;
	outline-width: 8px;
	transform: scale(0.95,1.05);
	
}

.buttondiscord:active{
	background-color:#30286b;
	outline-width: 0px;
	transform: scale(1.05,0.95);
	transition: 0.01s 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 { 

background-color:#161517;
width: 10%;

border-radius:40px;
width: 30%; margin: auto; padding-top: 2px;
margin-left: auto; margin-right: auto;

}
td {
    padding: 5px;
    position: relative;
    
    box-sizing: border-box;
  }
.infocontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius:40px;
    background-color: #00000377;
    box-sizing: border-box;
    overflow: hidden; /* or overflow: auto; */
    margin: 0; /* Reset margin */
    padding: 20px; /* Reset padding */
  }
  .infocontainer p {
    margin: 2px 0; /* Adjust margin for paragraphs */
  }
  .infocontainer ul {
    
    padding: 0; /* Remove default padding from the list */
    margin: 0; /* Reset margin for the list */
    font-size: 30px;
    overflow: hidden; /* Hide overflowing content */
  }



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

li{
	margin-left:60px;
}

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

.socialbutton2{
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:0px 0px 0px 0px;
}
h4{
	margin: 0px 0px 0px 0px;
	
	font-size: 100%;
}

a{
color:#32a32f;
}

input[type=text]{
	    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: #111111;
    color: white;
    border: 5px solid #32a32f;
    border-radius: 50px;
    font-size: 3vmin;
	
	
}

input[type="submit"] {
            background-color: #32a32f;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
			font-size:0.5em;
			outline-style: solid;


	outline-width: 10px;
	outline-color:#0d6938
        }