body {
  background-color: #282c34;
  color: #61dafb;
  font-family: "Courier New", Courier, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #282c34; /* Cor de fundo da tela de carregamento */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que a tela de carregamento fique sobre o conteúdo */
  }
  
  .loader {
    display: flex;
    gap: 10px;
  }
  
  .loader div {
    width: 20px;
    height: 20px;
    background-color: #61dafb; /* Cor das barras */
    border-radius: 4px;
    animation: pulse 1.2s infinite ease-in-out;
  }
  
  .loader div:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .loader div:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(-1);
    }
    50% {
      transform: scale(-0.5);
    }
    100% {
      transform: scale(-1);
    }
  }
  
  .hidden {
    display: none;
  }

#terminal {
  width: 80%;
  max-width: 800px;
  background-color: #1c1f24;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  overflow: auto;
  z-index: 100;
}
#terminal-output {
  white-space: pre-wrap;
  margin-bottom: 20px;
}
#terminal-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #61dafb;
  outline: none;
  font-size: 1rem;
}
.command-line {
  display: flex;
  align-items: center;
}
.command-line::before {
  content: "andev@portfolio:~$ ";
  margin-right: 10px;
}
.suggestions {
  background: #ffffff00;
  color: white;
  display: none;
}
.suggestions div {
  cursor: pointer;
}
.suggestions div:hover {
  background-color: #444;
}
.btn-command {
  background-color: #61dafb;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  color: #282c34;
  cursor: pointer;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 1rem;
}
.btn-command:hover {
  background-color: #4ec0eb;
}

a {
  color: #00c8ff;
  text-decoration: none;
}

@import url("https://fonts.googleapis.com/css?family=Carrois+Gothic");

@font-face {
  font-family: "matrix-code";
  src: url("http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix")
      format("embedded-opentype"),
    url("http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff")
      format("woff"),
    url("http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf")
      format("truetype"),
    url("http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName")
      format("svg");
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  filter: blur(5px);
}

/* Media Queries para dispositivos móveis */
@media (max-width: 768px) {
  #terminal {
    width: 90%; /* Ajusta a largura para telas menores */
    padding: 15px; /* Reduz o padding para telas menores */
  }

  #terminal-output {
    margin-bottom: 15px; /* Ajusta o espaço para telas menores */
  }

  #terminal-input {
    font-size: 0.9rem; /* Ajusta o tamanho da fonte para telas menores */
  }

  .command-line::before {
    margin-right: 8px; /* Ajusta o espaço para telas menores */
  }

  .btn-command {
    padding: 8px 12px; /* Ajusta o padding para telas menores */
    font-size: 0.9rem; /* Ajusta o tamanho da fonte para telas menores */
  }
}

@media (max-width: 480px) {
  #terminal {
    width: 95%; /* Ajusta ainda mais a largura para telas muito pequenas */
    padding: 10px; /* Reduz ainda mais o padding */
  }

  #terminal-output {
    margin-bottom: 10px; /* Ajusta o espaço para telas muito pequenas */
  }

  #terminal-input {
    font-size: 0.8rem; /* Reduz o tamanho da fonte para telas muito pequenas */
  }

  .command-line::before {
    margin-right: 5px; /* Ajusta o espaço para telas muito pequenas */
  }

  .btn-command {
    padding: 6px 10px; /* Ajusta o padding para telas muito pequenas */
    font-size: 0.8rem; /* Ajusta o tamanho da fonte para telas muito pequenas */
  }
}

.container {
    display: flex; /* Usando flexbox para alinhamento horizontal */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    padding: 20px;
  }
  
  .responsive-image {
    width: 20%; /* Largura padrão da imagem */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 20px; /* Espaço entre a imagem e o texto */
    border: 2px solid #61dafb; /* Borda azul no estilo terminal */
    filter: brightness(90%) contrast(110%) grayscale(50%) opacity(0.8); /* Ajusta brilho, contraste e escala de cinza */
    border-radius: 4px; /* Bordas arredondadas */
    pointer-events: none; /* Desativa todos os eventos do ponteiro, como arrastar */
    user-drag: none; /* Desativa o arrasto da imagem */
    -webkit-user-drag: none; /* Para navegadores baseados em WebKit, como o Chrome */
  }
  
  .text {
    flex: 1; /* Faz com que o texto ocupe o espaço restante */
    color: #61dafb; /* Cor do texto no estilo do terminal */
    font-family: "Courier New", Courier, monospace; /* Fonte de estilo de terminal */
    user-select: none; /* Desativa a seleção de texto */
    -webkit-user-select: none; /* Para navegadores baseados em WebKit */
    -moz-user-select: none; /* Para navegadores Firefox */
    -ms-user-select: none; /* Para navegadores Internet Explorer/Edge */
  }
  
  /* Media Query para telas com largura de até 768px */
  @media (max-width: 768px) {
    .responsive-image {
      width: 15%; /* Ajuste a largura para telas menores */
    }
  }
  
  /* Media Query para telas com largura de até 480px */
  @media (max-width: 480px) {
    .responsive-image {
      width: 25%; /* Ajuste a largura para telas muito pequenas */
    }
  
    .container {
      flex-direction: column; /* Muda a direção do layout para coluna em telas menores */
      align-items: center; /* Centraliza os itens verticalmente */
    }
  
    .responsive-image {
      margin-right: 0; /* Remove a margem quando o layout estiver em coluna */
      margin-bottom: 10px; /* Espaço entre a imagem e o texto */
    }
  }