a:visited {
  color:cornflowerblue;
  text-decoration:none; /* ou a cor desejada */
  color:#fff;
}

 
 
 @font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}


.input-container {
  margin-bottom: 20px;
  width:100%;
}

input::placeholder {
    color: rgba(0, 0, 0, 0.5); /* Ajusta a cor e a transparência */
    font-style: italic; /* Estilo em itálico */
    font-size:15px;
    
}

.modal {
  display:none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:80%;
 height: 90%;
  background-color: rgba(0, 0, 0, 0.9);
  border: 5px solid #0066FF;
  border-radius: 10px;
  z-index: 9999;	
  align-items: center;
  justify-content: center;

   }
   
   
   @media (max-width: 900px) {
		.modal {
		width:90%;
		height: 100%
		}
		}
		
.result-number {
  color: yellow;          /* Define a cor do texto como amarelo */
  font-size: 2em;        /* Define o tamanho da fonte como 20px */
  display: inline-block;  /* Alinha os números em uma linha */
  margin: 10px 10px ;          /* Espaçamento entre os números */
}
   
  

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
    align-items: center;
    justify-content: center;

}

#resultNumber {
  font-size:200px;
  color: #FFCC00;
  width:400px;
  height:100px;
  margin-top:100px;
  font-family:Arial, Helvetica, sans-serif; 
  
}



/*#toggleSoundButton{

 padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
  border:2px cornflowerblue solid;
  border-radius:5px;
  background-color:#006600;
color:#fff;
	
}*/

.restartButton{
    background-color:#0066FF !important;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px 5px;

	
}


 .restartButton:hover { 
    background-color: #3a6fd9 !important;
     transform: translateY(-2px); /* Levanta o botão */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}


.startButton {
    background-color:#0066FF;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px 5px;
    
    }
    
 .startButton:hover { 
    background-color: #3a6fd9 !important;
     transform: translateY(-2px); /* Levanta o botão */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

    
  /* Estilo do label/checkbox personalizado */
    .option-label {
       
        align-items: center;
        cursor: pointer;
        font-size: 1rem;
        color:#292929;
        position: relative;
        padding-left: 30px;
        user-select: none;
    }  
     .option-checkbox {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0px;
        width: 0px;
    }
     .checkmark {
        position: absolute;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #6699FF;
        border-radius: 4px;
        transition: all 0.3s;
    }

    .option-label:hover .checkmark {
        background-color: #003300;
    }

    .option-checkbox:checked ~ .checkmark {
        background-color: cornflowerblue;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .option-checkbox:checked ~ .checkmark:after {
        display: block;
    }
    
    
    
     .sound-button {
        background-color:#6699FF;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s;
        align-items: center;
        gap: 8px;
        width: fit-content;
    }

    .sound-button:hover {
        background-color:#0066CC;
        transform: translateY(-1px);
    }

    .sound-icon {
        font-size: 1.1rem;
    }

    /* Texto descritivo */
    .option-description {
        font-size: 0.85rem;
        color: #fff;
        margin: 5px 0 0 0;
        font-style: italic;
    }

    @media (max-width: 900px) {
        .option-label {
            font-size: 0.9rem;
        }
        
        .sound-button {
            padding: 8px 12px;
            font-size: 0.9rem;
        }
    }
    




#shareButton{

    background-color:#0066FF;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px 5px;
	
}

#box-resultado{
	color:#fff;
	height:250px;
	width:70%;
	margin-top:50px;
}



#startButton:hover {
  background-color: #f5f5f5;
}
/* Estilos anteriores (mantidos) */

@keyframes rollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.roll {
  animation: rollAnimation 5s linear infinite;
}

  .titulo {
	 font-size: 50px;
	 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
	 line-height:1em;
	 color:#595959; !important
 }
 

  .auto-style9 {
	 font-size: 30px;
	 color: #6495ED;
 }
 
    
    
  .logo-cel{
 font-size:30px;

	
}

 
    
  .auto-style11 {
	 text-align: center;
 }

    
  .auto-style13 {
	 font-size: 12px;
	 margin-top: 1px;
 }

  .auto-style14 {
	 color: #FFFFFF;
	 font-size:50px;
 }
   .auto-style15 {
	 color: #FFFFFF;
	 font-size:30px;
 }