.oscuro{ 
    background-color: rgba(63,63,63,1.00);
    color: #ccc;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
    }
#acces{
	position: fixed;
	top: 100px;
	right: 5px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: rgba(255, 255, 255, 1);
	padding: 5px;
	border-radius: 100px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
#aumentar, #disminuir, #modo {
	background-color: rgba(255,255,255,0.0);
	box-shadow: none;
}
#modo{
  padding: 10px;
  float: right;
  position: relative;
  z-index: 100;
  font-weight: 700;
  border-radius: 0px;
    }
#aumentar:hover, #disminuir:hover, #modo:hover{
	background-color: #007bff;
	color: #eee;
	border-radius: 30px;
    }

html {
      font-size: 100%;
    }
    body {
      font-size: 1rem;
    }
    h1 {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.4rem;
    }
    h5{
    	font-size: 1.3rem;
    }
    li {
      font-size: 0.8rem;
    }
   
    button{
      font-size: 1rem;
    }
    audio{    	
    	position: relative;
      transform: rotate(270deg);
      transform-origin: left top 0;
      float: left;
      z-index: 100;

    }


    .f0 {
      font-size: 0.7rem;
    }
    .f1 {
      font-size: 0.9rem;
    }
    .f2 {
      font-size: 1.1rem;
    }
    .f3 {
      font-size: 1.2rem;
    }
    .f4 {
      font-size: 1.4rem;
    }
    #aumentar, #disminuir{
      padding: 10px;
      border-radius: 2px;
      font-weight: bold;
      float: right;
      color: rgba(30,0,180,1);
	  position: relative;
	  z-index: 100;
    }
#aumentar:hover, #disminuir:hover{
	color: #eee;
}