style.css

/*Scrollbar*/

::-webkit-scrollbar {									/* Scrollbars */
	width: .875em;
	height: .875em;
	background: #282C34;
}



::-webkit-scrollbar-track-piece {						/* Fond */
	background: transparent none;
	border: solid .25em transparent;
	border-right-width: .5em;
	margin: .25em;
	box-shadow: inset .0625em .0625em 0 0 rgb(137,131,117), inset -.0625em -.0625em 0 0 rgb(224,220,210);
}
::-webkit-scrollbar-thumb {								/* Barre */
	border: solid 0 transparent;
	border-right-width: .25em;
	border-radius: .3125em;
	box-shadow: inset 0 0 0 .0625em rgb(79,79,79), inset 0 0 0 .375em rgb(102,102,102);
}
::-webkit-scrollbar-thumb:hover {						/* Barre */
  box-shadow: inset 0 0 0 .0625em rgb(90,90,90), inset 0 0 0 .375em rgb(110,110,110);
}

::-webkit-scrollbar-corner {							/* Coin de la fenêtre */
	background: #bfb6a3 ;
}

/*---------------------*/


@media (prefers-color-scheme: dark) {
  body {
    background-color: #282C34;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
  }

div{
  position: relative;
}

 label {
  font-weight: bold;
  padding-left: 3%;
  }
  
.button{
  background-color: #B0E0E6;
  border-radius: 10px;
  border-style: none;
  font-weight: bold;
}

.infoDot{
  font-weight: bold;
  font-size: 500%;
  color: orange;
}

button{
  background-color: #B0E0E6;
  border-radius: 10px;
  border-style: none;
  font-weight: bold;
}

input {
  text-align:center; }

input[type=text], input[type=number], select{
  border-radius: 10px;
  border-style: none;
  -webkit-border-radius: 10px;
  appearance: textfield;
}

.form {
  border: solid #47496c;
  padding: 0.001px;
}

.table{
    border: solid #47496c;
}

table{
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}
.hiddenTd{
  visibility: hidden;
}
.little{
  font-size: x-small;
}

#add1,#add2,#add3{
  color: #ccc;
  font-style: italic;
  font-size: smaller;
}

#oscAddr, #manualEmberPath {
  padding-left: 10%;
  min-width: 60%;
}

caption{
  font-weight: bold;
  background-color: black;
}

/*slider-checkboxes*/

#switcher{
/* top: 25%;*/
  left: 3%; 
  width: 40px;
  height: 20px;
}

#switcher1{
  /* top: 25%;*/
  left: 3%; 
  width: 40px;
  height: 20px;
}

.toggle{
  position: absolute;
  border: 2px solid #444249;
  border-radius: 20px;
  -webkit-transition: border-color .6s  ease-out;
  transition: border-color .6s  ease-out;
  box-sizing: border-box;
}

.toggle.toggle-on{
  border-color: rgba(137, 194, 217, .4);
  -webkit-transition: all .5s .15s ease-out;
  transition: all .5s .15s ease-out;
}

.toggle-button{
  position: absolute;
  top: 3px;
  width: 10px;
  bottom: 3px;
  right: 20px;
  background-color: #444249;
  border-radius: 50%; 
  cursor: pointer;
  -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
  transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}

.toggle-on .toggle-button{
  top: 3px;
  width: 30px;
  bottom: 3px;
  right: 3px;
  border-radius: 23px;
  background-color: #89c2da;
  box-shadow: 0 0 16px #4b7a8d;
  -webkit-transition: all .2s .1s, right .1s;
  transition: all .2s .1s, right .1s;
}


/* used for streak effect */
.glow-comp{
  position: absolute;
  opacity: 0;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border-radius: 6px;
  background-color: rgba(75, 122, 141, .1);
  box-shadow: 0 0 12px rgba(75, 122, 141, .2);
  -webkit-transition: opacity 4.5s 1s;
  transition: opacity 4.5s 1s;
}

.toggle-on .glow-comp{
  opacity: 1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

/*Menu*/
#menu {
  background-color: #47496c;
  border-radius: 10px;
  width: 50%;
  margin: 0 auto;
  
}

#menu .button {
  margin-bottom: 15px;
  margin-top: 15px; 

}