@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100vh;
    background: linear-gradient(120deg, #ffe53bd8, #ff2525da);
    display: flex;
    align-items: center;
    justify-content: center;
}

.relogio {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100px;
    width: 480px;
    background: transparent;
    border-radius: 3px;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, .5);
    position: relative;
    top: -350px;  /* Move para cima */
    left: 950px;  /* Move para a direita */
}

.relogio div {
    height: 170px;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.0);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .0);
    border-radius: 7px;
    letter-spacing: 3px;
}

.relogio span {
    font-weight: bolder;
    font-size: 60px;
}

.relogio span.tempo {
    font-size: 10px;
}



#cursor {
    width: 32px;
    height: 27px;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
    background: url('../images/cursor-roxo.png') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.6));
}

#trail-container {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9998;
}

.trail {
    width: 16px;
    height: 16px;
    background: rgba(0, 255, 255, 0.2);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
     
      
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: flex-end; /* Alinha os itens à direita */
    align-items: flex-start; /* Mantém os itens no topo */
}

.container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens se movam para a linha seguinte */
    justify-content: flex-end; /* Alinha os itens à direita */
    margin-top: 10px;
}

.foto-botao {
    display: flex;
    flex-direction: column; /* Organiza a imagem e o texto em coluna */
    align-items: center; /* Centraliza a imagem e o texto */
    text-decoration: none; /* Remove o sublinhado do link */
    margin: 5px; /* Ajuste o espaço entre os botões */
    height: 150px; /* Defina uma altura fixa para o botão */
    position: relative; /* Permite o uso de top e left */
    top: 100px;  /* Move para cima */
    left: 170px;  /* Move para a direita */
}

.imagem {
    width: 50px; /* Ajuste o tamanho da imagem */
    height: 50px; /* Torna a imagem quadrada */
    object-fit: cover; /* A imagem vai cobrir toda a área do quadrado */
    position: relative; /* Permite o uso de top e left */
    top: -100px;  /* Move para cima */
    right: 44px;  /* Move para a direita */
}

.texto {
    margin-top: 5px; /* Espaço entre a imagem e o texto */
    font-size: 14px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    font-weight: bold; /* Texto em negrito (opcional) */
    text-align: center;
    word-wrap: break-word; /* Quebra o texto longo, se necessário */
    position: relative; /* Permite o uso de top e left */
    top: -100px;  /* Move para cima */
    right: 44px;  /* Move para a direita */
}

body {
    overflow: hidden;
}

  
.frase-container
{   margin-top: 5px; /* Espaço entre a imagem e o texto */
    font-size: 14px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    font-weight: bold; /* Texto em negrito (opcional) */
    text-align: center;
    word-wrap: break-word; /* Quebra o texto longo, se necessário */
    position: relative; /* Permite o uso de top e left */
    top: -350px;  /* Move para cima */
    left: 999px;  /* Move para a direita */
}
@font-face {
    font-family: 'GlassTTY';
    src: url('../fonts/Glass_TTY_VT220.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  .frase {
    font-family: 'GlassTTY', sans-serif;
    font-size: 28px;
    color: white;
    text-align: center;
    margin-top: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  
  
  
body {
    font-family: 'Montserrat', sans-serif, 'lato'
  }