@charset "UTF-8";
   


body/*configurações gerais*/
{
    position: absolute;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.725);    
    color: white;     
} 
* 
{
    margin: 0;
    padding: 0;        
}
main/*Configurações do contorno do celular*/
{   
    position: relative;
    padding: 10px;
    width: 360px; /* Largura para manter a proporção 18:9 */
    height: 720px; /* Altura fixa */
    border: 16px solid black;
    border-radius: 36px;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);    
    overflow: hidden;
}

/*--------------------BARRA DE NOTIFICAÇÕES-----------------------*/
header
{
    background-color: rgba(0, 0, 0, 0.658);
    margin: -10px;
    padding: 10px;
    color: white;    
    width: fit-content;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    align-items: center;
    display: flex;       
    border-radius: 0px;
}
#hora/*Configurações da hora na barra de notificações*/
{
    text-align:left;    
}
#notificacao/*Configurações da barra de notificações*/
{   
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 5px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 95px;
    align-items: center;
    justify-content: center;
    height: 40px;
}
#notification-icons {
    display: flex;
    align-items: center;
}

/* Configurações do ícone de sinal na barra de notificações */
.fas.fa-wifi, .fas.fa-video, .fas.fa-microphone, .fas.fa-map-marker-alt{
    font-size: 18px;
    color: #ffffff;
    margin: 0 10px;
}
#intnotifica/*COnfigura lista de notificações*/
{
    padding: 5px;
    text-align: center;
}

/*-----------------------CORPO do Celular------------------------*/
section
{    
    z-index: -1;
    background-image:url(imagem1.jpg);   
    background-size: cover;
    margin-left: -10px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 655px;    
    width: 380px;              
}
#notifica/*Animação para abaixar as notificações no corpo do celular*/
{
    position: absolute;
    top: -100%;
    left: auto;      
    background-color: rgba(0, 0, 0, 0.8);
    color: white;     
    justify-content: center;
    align-items: center;
    transition: top 0.6s ease-in-out;    
    margin-top: 40px;
    margin-left: -10px;
    margin-bottom: 10px;
    height: 655px;    
    width: 380px;    
    z-index: 100;   
}
#configura
{
    position: absolute;
    bottom: -1700%;
    left: auto;      
    background-color: rgba(0, 0, 0, 0.85);
    color: white;     
    justify-content: center;
    align-items: center;
    transition: bottom 0.6s ease-in-out;    
    margin-top: 40px;
    margin-left: -10px;
    margin-bottom: 45px;
    height: 655px;    
    width: 380px;    
    z-index: 100;  
    text-align: center;
}
#brightness-overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    pointer-events: none;
    z-index: 999; /* Certifique-se de que o overlay esteja acima do conteúdo principal */
   }
#brightness-control 
{       
    position: absolute;
    top: 60px;     
    background: rgba(166, 163, 163, 0.427);   
    border-radius: 5px;
    z-index: 3; /* Certifique-se de que o controle esteja acima do overlay */
}
/* Estilo do controle de brilho */
#brightness-control 
{     
    padding: 10px;
    width: 90%;
}

/* Estilo do interruptor */
.toggle-switch 
{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;   
    top: 120px;         
    background: rgba(166, 163, 163, 0.427);   
    border-radius: 5px;
    width: 85%;
    padding: 20px;   
    text-align: center; /* Alinha o texto no centro do container */   
}

.switch-label {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    margin-left: 55px;
}

.switch-button {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 34px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.3s;
}
.switch-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}


#invert-toggle {
    display: none;
}

#invert-toggle:checked + .switch-label .switch-button {
    background-color: #5900ff;
}

#invert-toggle:checked + .switch-label .switch-button::before {
    transform: translateY(-50%) translateX(20px);
}
.switch-text {
    margin-left: 50px; /* Ajuste o valor conforme necessário */
    font-size: 15px;   
    color: #ffffff; /* Ajuste a cor conforme necessário */
}

/* Inverter cores para o conteúdo, mas não para o vídeo */
.invert-colors {
    filter: invert(1);
}

#appcamera {
    filter: invert(0); /* Garante que a câmera não seja afetada */
}

#widthhora/*Configura width de hora*/
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 60px;
    font-size: 60px;
    text-align: center;   
    justify-content: center; 
    display: flex;
    margin-left: -10px;
}
#widthdata/*Configura o width de data*/
{    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;   
    padding-bottom: 50px; 
    margin-left: -10px;
}
#icones1/*Configura tamanho e posição dos icones na pagina inicial*/
{    
    margin: 10px;
    padding: 23px;    
    display: flex;    
    align-items: center;        
    gap: 45px;
}/*Configura propriedades dos icones*/
#iconecalculadora
{
   width: 70px;
   height: 70px;      
   border-radius: 30%;   
   background-color: transparent;    
   display: flex;
   flex-direction: column;
   align-items: center; /* Centraliza o conteúdo dentro do contêiner */
   text-align: center; /* Centraliza o texto */
   color: rgb(255, 255, 255);
   border: none;
}/*COnfigura animação nos icones*/
#iconecalculadora:hover
{
    transform: scale(1.1);   
    transition: transform 0.2s;
}

/*-------------------------APP-------------------------*/


/*-----------------------CAMERA------------------------*/
#appcamera
{
    position: relative;
    height: 100%;
    width: auto;    
    border-radius: 10px;
    transform: scaleX(-1);
    z-index: 10;          
}
#camera
{    
    display: flex;
    justify-content: center;
    align-items: center;       
    height: 655px;    
    width: 380px;          
}
#capture-button/*Botão de captura da camera*/
{
    position: absolute;
    bottom: 30px; /* Ajuste conforme necessário */
    left: 50%;
    transform: translateX(-50%);    
    border: none;
    border-radius: 50%;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10; /* Certifique-se de que o botão esteja acima do vídeo */
    background-color: transparent;
    width: 60px;
}
#flip-button/*Botão de captura da camera*/
{
    position: absolute;
    bottom: 70px; /* Ajuste conforme necessário */
    left: 20%;
    justify-content: center; /* Alinha os botões horizontalmente ao centro */
    gap: 10px; /* Espaço entre os botões */      
    transform: translateX(-50%);     
    border-radius: 50%;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 11; /* Certifique-se de que o botão esteja acima do vídeo */
    background-color: transparent;
    width: 40px;
}
#capture-button:hover
{
    width: 65px;   
      
}
#flip-button:hover
{
    width: 41px;   
      
}
#fullscreen-photo 
{        
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100vh; /* Usa a altura total da tela */
    width: 100vw; /* Usa a largura total da tela */
    background: #000;  
    overflow: hidden; /* Garante que nada saia dos limites */
}  
#captured-photo 
{
    width: 100%; /* Faz a largura da imagem ocupar toda a largura do container */
    height: 100%; /* Faz a altura da imagem ocupar toda a altura do container */
    object-fit: cover; /* Faz a imagem cobrir todo o container, mantendo a proporção */
    transform: scaleX(-1); /* Inverte a imagem horizontalmente */
    position: relative;
    z-index: 30;
}  
#baixar 
{
    position: absolute;
    bottom: 20px; /* Ajuste conforme necessário */
    left: 50%;
    transform: translateX(-50%);
    border: none;
    border-radius: 50%;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10; /* Certifique-se de que o botão esteja acima do vídeo */
    background-color: transparent;
    width: 60px; /* Ajuste conforme necessário */
    height: 60px; /* Ajuste conforme necessário */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
    margin-bottom: 50px;    
    z-index: 40;
}
#baixar i 
{
    font-size: 35px; /* Ajuste o tamanho do ícone conforme necessário */
    margin-right: 8px; /* Espaço entre o ícone e o texto */
}
#baixar span
 {
    font-size: 25px; /* Ajuste o tamanho do texto conforme necessário */
}
#baixar>i:hover
{
    font-size: 45px;
}

/*-----------------------GRAVADOR-------------------------*/
#gravador 
{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 655px;
    width: 380px;
    position: relative;
    z-index: 60;
    padding-left: -10px;
    margin-left: -10px;
}
#recordingTime 
{
    margin: auto;
    font-size: 80px;
    margin-top: 80px; /* Espaço entre o tempo de gravação e os botões */
}
#recordingProgress 
{
    width: 60%;
    height: 30px;
    margin-bottom: 150px; /* Espaço entre o progresso e os botões */       
}
#audioPlayback
{    
    margin-bottom: 180px;    
    width: 90%;    
    margin-left: -15px;
}
#buttonsContainer 
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaço entre os botões */
}
button 
{
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
button:disabled 
{
    opacity: 0.5;
    cursor: not-allowed;
}
#recordIcon 
{
    width: 60px;
    height: auto;
    border-radius: 50%;    
    margin-bottom: 15px;     
}
#recordBtn img,
#stopBtn img 
{
    transition: width 0.2s; /* Transição suave para o hover */
}
#recordBtn:hover img,
#stopBtn:hover img 
{
    width: 65px; /* Manter o tamanho durante o hover */
}

/*-------------------------CALCULADORA-------------------------*/
#appcalculadora
{    
    margin-left: -10px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 655px;    
    width: 380px;              
  }  
  #display 
  {
    background-image: url('frame.png');
    background-size: contain;
    width: 98%;
    height: 73px;
    margin-bottom: 40px;        
    padding: 10px;
    margin-top: 70px;    
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    padding-right: 20px; /* Espaço entre o texto e a borda direita */
    box-sizing: border-box;     
    font-weight: 800;
    margin-left: -8px;
    
  }  
  .texto-calculadora
  {
    color: white; 
    text-align: right;   
    font-size: 30px; 
  }
  
  #calculadora/*Configura tamanho e posição dos icones na pagina inicial*/
  {    
      margin: 10px;
      padding: 10px;    
      display: flex;    
      align-items: center;        
      gap: 45px;
      margin-left: 3px; 
      
  }/*Configura propriedades dos icones*/
  #calculadora-icones
  {
     width: 50px;
     height: 50px;      
     border-radius: 30%;   
     background-color: transparent;    
     display: flex;
     flex-direction: column;
     align-items: center; /* Centraliza o conteúdo dentro do contêiner */
     text-align: center; /* Centraliza o texto */
     color: rgb(255, 255, 255);
     border: none;
  }/*COnfigura animação nos icones*/
  #calculadora-icones:hover
  {
      transform: scale(1.1);   
      transition: transform 0.2s;
  }

/*------------------------CONFIGURAÇÃO------------------------*/
#appconfiguracao
{
    
    margin-top: 10px;
    margin-bottom: 10px;
    height: 655px;    
    width: 380px;   
    
}
#textconfig
{
    padding-top: 20px;
    text-align: center;
    font-size: 25px;
}
#config1 {
    margin-left: -5px;
    display: inline;    
    margin-top: 20px;     
    background: rgba(0, 0, 0, 0.754);   
    border-radius: 5px;
    z-index: 60; /* Certifique-se de que o controle esteja acima do overlay */
    width: 98%;
    border-radius: 5px;
    padding: 25px;
    color: white;
    text-align: left;    
    transform: scale(0.90);       
    transition: transform 0.5s ease; 
    font-size: 18px;
}
#appconfiguracao i
{
    margin: auto;
}
#config1:hover {
    
    transform: scale(1.1); /* Leve aumento ao passar o mouse */
    transition: transform 0.5s ease;
     /* Ajuste o padding para criar o efeito de aumento */
    
}

#config2
{
    color: #d8d8d8;
    padding-left: 20px;
    
}
#creditos
{   
    position: absolute;
    padding-top: 200px;
    font-size: 18px;
    text-align: center;
    bottom: 80px;
    left: 20px;
    color: #989898;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/*-----------------sobre---------------------*/
#sobre{
    text-align: center;

}
#titulo-sobre
{
    margin-bottom: 20px;
}
/*----------pagina de configurações de tela----------*/
#appconfigtela
{     
    margin-top: 10px;
    margin-bottom: 10px;
    height: 655px;    
    width: 380px; 
}
#configtela1
{  
    display: flex;           
    background: rgba(0, 0, 0, 0.648);   
   
    z-index: 60; /* Certifique-se de que o controle esteja acima do overlay */
    width: 100%;
    height: 100%;           
    color: white;      
    font-size: 18px;           
}
#configtela1>#brightness-control {
    margin-left: 7px;
    display: flex;
     /* Alinha itens em coluna */
    justify-content: center; /* Alinha itens verticalmente ao centro */
    align-items: center; /* Alinha itens horizontalmente ao centro */
    
}
#configtela1>.toggle-container
{
    margin-left: 7px;    
}
#wallpaper
{
    margin-left: -5px;
    color: white;
    position: absolute;
    top: 280px;     
    left: 19px;
    width: 90%;
    text-align: center;    
    border-radius: 5px;
    z-index: 3; /* Certifique-se de que o controle esteja acima do overlay */
}
#wallpaper>span
{      
 font-size: 15px;
 color: rgb(255, 255, 255);   
}
#protecao-de-tela
{
    margin-top: -265px;
    padding: 23px;
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre as fotos */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}
#protecao-de-tela img {
    max-width: 100px; /* Largura máxima das fotos */
    height: 200px; /* Mantém a proporção das fotos */
    border-radius: 8px; /* Adiciona bordas arredondadas (opcional) */
    opacity: 100%;
    transition: opacity 0.3s ease;
    transition: transform 0.5s ease 0.1s;; 
}
#protecao-de-tela img:hover 
{
    opacity: 90%;    
    transform: scale(1.1, 1.1); /* Leve aumento ao passar o mouse */
    transition: transform 0.5s ease 0.1s;; 
}
.disable-hover img {
    pointer-events: none; /* Desabilita eventos de ponteiro */
    opacity: 0.3; /* Opcional: reduz a opacidade das imagens desativadas */
}
/*----------pagina de configurações | Sobre o projeto----------*/

#sobre
{
    
}
/*-------------------------CALENDARIO-------------------------*/
main#calendario-cor {
    --body-color: #ffffff00;
    --header-color: #ffffff;
    --header-button: #ffffff;
    --color-weekdays: #ffffff;
    --box-shadow: #000000;
    --hover: #000000;
    --current-day: #ffffff8a;
    --event-color: #f2ff00;
    --modal-event: #000000d6;/*Cor da caixa de Novo evento*/
    --color-day: rgba(0, 0, 0, 0.785);/*Cor fundo dos quadrados do calendraio*/
    --holiday-color: red; /* Cor para os feriados */
  }  
  #appcalendario/*appcalendario*/ 
  {
    display: flex;   
    justify-content: center;    
    height: 655px;
    width: 380px;    
    z-index: 60;      
  }
  #monthDisplay
  {
    font-size: 40px;
    text-transform: uppercase;     
  }
  #botoes
  {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 100px;
    left: -10px;
    padding: 10px;     
  }
  
  #backButton/*appcalculadora button*/ {
    width: 180px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    border: none;
    outline: none;
    padding: 5px;
    border-radius: 5px;    
    background-color: var(--color-day);
    color: var(--color-weekdays);
     }

  #nextButton/*appcalculadora button*/ {
    width: 180px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    border: none;
    outline: none;
    padding: 5px;
    border-radius: 5px; 
    background-color: var(--color-day);   
    color: var(--color-weekdays);
  }
  #backButton:hover {
    background-color: var(--hover);    
  }
  #nextButton:hover {
    background-color: var(--hover);
  }
  
  #appcalendario2 {
    padding: 10px;
    color: var(--header-color);
    font-size: 26px;
    font-family: sans-serif;
    display: flex;
    justify-content: space-between;
  }
  

  #appcalendario1 {
    width: 95%;
    height: auto;
    margin-top: 30px;
    margin-left: -5px;
    text-align: center;    
    
  }
  
  #weekdays {
    
    width: 100%;
    display: flex;
    color: var(--color-weekdays);
    margin: auto;   
    margin-left: -10px;
    margin-top: 75px;
    
    
  }
  
  #weekdays div {
    width: 30px;
    padding: 10px;
    font-size: 12px;
    text-align: center;
  }
  
  #calendar {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;        
  }
  
  .day {   
    width: 36px;
    padding: 10px;
    height: 45px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--color-day);
    margin: 5px 7px;
    box-shadow: 0px 0px 3px var(--box-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 15%;
  }
  
  .day:hover {
    background-color: var(--hover);
  }
  
  .day + #currentDay {
    background-color: var(--current-day);
    color: black;
  }
  
  .day.holiday {
    background-color: var(--holiday-color); /* Cor de fundo para feriados */
    color: white; /* Cor do texto para garantir legibilidade */
  }
  
  .event {
    font-size: 10px;
    padding: 3px;
    background-color: var(--event-color);
    color: white;
    border-radius: 5px;
    max-height: 1px;
    max-width: 25px;
    margin: auto;
    overflow: hidden;
    margin-left: -7px;
  }
  
  .padding 
  {
    cursor: default !important;
    background-color: var(--body-color) !important;
    box-shadow: none !important;
  }
  
  #newEventModal, #deleteEventModal 
  {    
    text-align: center;
    top: 150px;
    width: 280px;
    height: 230px;
    display: none;
    z-index: 20;
    padding: 30px;
    background-color: var(--modal-event);
    box-shadow: 0px 0px 3px rgb(0, 0, 0);
    border-radius: 5px;        
    position: absolute;
    font-family: sans-serif;    
    margin-left: -5px;
  }
  
  #eventTitleInput {
    margin-top: 30px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 25px;
    border-radius: 3px;
    outline: none;
    border: none;
    box-shadow: 0px 0px 3px gray;
    font-size: 20px;
  }
  
  #eventTitleInput.error {

    border: 2px solid red;
  }
  
  #cancelButton, #deleteButton {
    background-color: var(--header-color);
    padding: 18px;
  }
  
  #saveButton, #closeButton {
    background-color: var(--header-button);
    padding: 18px;    
    
  }
  #botoes1
  {   
    padding-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
  }
  
  #eventText {
    margin-top: 30px;
    font-size: 20px;
    white-space: pre-wrap; /* Mantém a quebra de linha no texto */
    word-wrap: break-word; /* Quebra linhas longas */
}
  
  #modalBackDrop {
    display: none;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
  }

/*-------------------------APP-CLIMA-------------------------*/
#appclima 
{        
    text-align: center;      
    justify-content: center;    
    height: 655px;
    width: 380px;    
    z-index: 60;
    padding-left: -10px;
    margin-left: -10px;    
 
}

#clima
 {
    margin-top: 30px;
    padding: 20px;
    background-color: #000000ee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    border-radius: 8px;
    font-size: 20px;    
    margin-left: 10px;
    margin-bottom: 30px;
}

#inputclima 
{
    padding: 10px;
    font-size: 16px;
    margin: 10px;
    width: calc(100% - 22px);
    box-sizing: border-box;
}

#buttonclima 
{
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#weatherInfo 
{
    margin-top: 20px;
    white-space: pre-wrap; /* Para lidar com quebras de linha */
}
#textclima
{
    margin-top: -10px;
    font-size: 30px;
    padding-top: 20px;
    text-align: center;
}
#img-div {
    margin-top: 20px;
    width: 100%;
    height: auto;
    overflow: hidden; /* Garante que a imagem não transborde da div */
}

#img-clima1 {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta a imagem dentro da div sem distorcer */    
}
#img-div-final
{
    
    margin: 10px auto;
    padding: 10px;
    background-color: #000000ee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 320px;
    border-radius: 8px;
    font-size: 20px;    
    margin-left: 10px;
    
}
#img-clima2
{
    width: 150px;    
}
.hidden {
    display: none;
}
/*-------------------------APP-DESPERTADOR-----------------*/
#despertador01 
{
    display: flex;   
    justify-content: center;    
    height: 655px;
    width: 380px;    
    z-index: 60; 
}

#appdespertador {
    background-color: rgba(0, 0, 0, 0.72);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 60px;
    text-align: center;
    margin-left: -16PX;
}

.despertador {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hora-despertador {
    font-size: 48px;
    margin-top: 50px;
    margin-left: -5px;

}

.frame-despertador {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    margin-top: 20px;
    margin-left: -5px
    
}

.alarm-controls {
    flex: 1;       
}

.alarm-controls select {
    padding: 10px;
    font-size: 16px;
    width: 100%;    
}

#btnSetAlarmDespertador {
    
    padding: 10px 20px;
    font-size: 16px;
    background-color: #7f7f7f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 30PX;
    margin-top: 30PX;
    margin-left: 18px;
}

#btnSetAlarmDespertador:hover {
    background-color: #0056b3;
}

#alarmListDespertador {
    list-style-type: none;
    padding: 0;
}

#alarmListDespertador li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#alarmListDespertador li button {
    padding: 5px 10px;
    font-size: 14px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#alarmListDespertador li button:hover {
    background-color: #c82333;
}
/*-------------------------ALARME--------------------------*/
#paginaalarme
{
    display: flex;
    justify-content: center;
    align-items: center;      
    font-family: Arial, sans-serif;
    margin-left: -10PX;
}
.paginalarme1
{
    text-align: center;
    
    
}
.circle {
    margin-left: -18px;
    width: 250px;
    height: 155px;
    background-color: #ffffffc8;
    border-radius: 50%;    
    animation: pulse 2s infinite;
    font-size: 45px;
    padding-top: 95px;
    color: rgba(0, 0, 0, 0.458);
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}
/*--------------------JOGO----------------------*/
#jogo
{
    display: flex;         
    font-family: Arial, sans-serif;
    margin-left: -10PX;
    box-sizing: border-box;    
}
.game-board
{
    width: 100%;
    height: 95%;
    border-bottom: 35px solid rgb(0, 98, 0);
    position: relative;
    overflow: hidden; 
    background: linear-gradient(rgb(149, 179, 253),rgb(217, 255, 253));
}
#pipe
{
    position: absolute;
    bottom: 0;
    width: 90px;    
    animation: pipe-animation 1.35s infinite linear;
}
#personagem
{
    position: absolute;
    width: 190px;
    bottom: 0;
    left: -20px;
    
}
.jump
{
    animation: jump 800ms ease-out;
}
.clouds
{
    position: absolute;
    margin-top: 50px;
    width: 500px;
    animation: clouds 30s infinite linear;
}
.clouds1
{
    position: absolute;
    margin-top: 50px;
    width: 750px;
    animation: clouds1 50s infinite linear;
}
@keyframes clouds
{
    
        from{
            right: -600px;
        }
        to{
    
            right:  100%;}
    }
    @keyframes clouds1
{
    
        from{
            right: -750px;
        }
        to{
    
            right:  100%;}
    }
@keyframes pipe-animation
{
    from{
        right: -90px;
    }
    to{

        right:  100%;}
}
@keyframes jump 
{
    0%{bottom: o;}
    40%{bottom:190px}
    50%{bottom: 190px;}
    60%{bottom: 190px;}
    65%{bottom: 190px;}
    100%{bottom: o;}
}
#startButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
}
.botaooff
{
    display: none;
}
#countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
}
#restartButton {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    display: none;
}
#botao-jogo-inicio
{
    color: black;
    position: absolute;
    width: 200px;
}
#botao-jogo-reiniciar
{
    position: absolute;
    width: 200px;
    margin-left: -95px;
    margin-top: -110px;
}
#pontuacao
{
    text-align: center;
    font-size: 25px;    
    background-color: rgba(0, 0, 0, 0.357);
    padding: 20px      
}
#countdown
{
    color: black;     
}

/*-------------------------NAVEGAÇÂO-------------------------*/
footer/*Configura espaço*/
{
    background-color: rgba(0, 0, 0, 0.658);
    padding: 10px;
    margin-top: -10px;
    margin-left: -10px;
    color: white;
    width: 100%;
    height: 25px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative; /* Posiciona o footer relativamente ao layout */
}
.nav-button/*Configura tamanho e posição dos botões de navegação*/
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #555;
    border: none;
    color: white;
    cursor: pointer;    
    outline: none;
}
.back-button::before/*VOLTAR*/
{
    content: "◀"; /* Triângulo para voltar */
    font-size: 35px;    
}

.home-button::before/*INICIO*/
{
    content: "●"; /* Círculo para voltar à tela inicial */
    font-size: 40px;
}

.history-button::before /*HISTORICO*/
{    
    content: "■"; /* Quadrado para ver o que estava utilizando */
    font-size: 30px;    
}
.nav-button:hover/*Configura animação dos botões de navegação*/
{
    background-color: #6b6b6b;
}