body{
  background-color: rgb(30, 30, 30);
  color: #DCDCAA;
  font-family: 'Courier New', monospace;
  max-width: 1280px;
  min-width: 360px;
  max-width: 100%;
  width: 100%;
  margin: auto;
}

.border_r {
  border-top: 3px solid #C678DD;
  border-bottom: 3px solid #C678DD;
  box-shadow: 
    0 -6px 5px -5px #C678DD,
    0 5px 5px -5px #C678DD;
  /*background-color: transparent;*/
}

.btn-lilas {
  background-color: #C678DD;
  color: #F2F2F2; /* texto branco */
  border: none;
  /*border-top: 3px solid #C678DD;
  border-bottom: 3px solid #C678DD;*/
  /*box-shadow:
    0 -6px 5px -5px #C678DD,
    0 5px 5px -5px #C678DD;*/
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.btn-lilas:hover {
  background-color: #DCDCAA;
  color: #333333; /* texto escuro no hover pra contrastar com o amarelo */
  /*box-shadow: 0 2px 6px rgba(220, 220, 170, 0.6);*/
  /*border-top-color: #DCDCAA;
  border-bottom-color: #DCDCAA;*/
  /*box-shadow:
    0 -6px 5px -5px #DCDCAA,
    0 5px 5px -5px #DCDCAA;*/
}


.card{
  background-color: #2A2A2A;
  border-left: 3px solid #C678DD;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-right: 3px solid transparent;
  box-shadow: -4px 0px 6px -2px rgba(198, 120, 221, 0.4);
  transition: all 0.3s ease;
}

.card:hover {
  border-top: 3px solid #DCDCAA;
  border-bottom: 3px solid #DCDCAA;
  border-right: 3px solid #DCDCAA;
  box-shadow: 
    0 -4px 6px -3px rgba(220, 220, 170, 0.6),   /* top */
    0 4px 6px -3px rgba(220, 220, 170, 0.6),    /* bottom */
    4px 0 6px -3px rgba(220, 220, 170, 0.6);    /* right */
}

img{
  /*height: auto;*/
  filter: brightness(65%); /* ajusta entre 60% e 90% conforme o gosto */
  max-height: 180px; /* ou o valor que quiseres */
  object-fit: cover; /* corta a imagem para preencher sem distorcer */
  width: 100%;
}

.blue{color: #569CD6;}

.blue_claro{color: #9CDCFE;}

.amarelo{color: #DCDCAA;}

.vermelho{color: #CE9178;}

.cinza{color: #808080;}

.branco{color: white;}

.rosa{color: #C678DD;}

.rosa_antigo{color: #C586C0;}

.cursor {
  animation: blink 1s ease-in-out infinite;
  display: inline-block;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

p{font-size: 15px;}

@media (max-width: 576px){
  .border_r {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  #titulo{font-size: 25px !important;} 
}

#scroll{
  font-size: 26px;
  color: #DCDCAA;
  text-shadow: 0 2px 6px rgba(220, 220, 170, 0.8);
  cursor: pointer;
}
#scroll:hover{
  color: #C678DD;
  text-shadow: 0 2px 6px rgba(198, 120, 221, 0.8);
}

#titulo{
  font-size: 30px;
  color: #DCDCAA;
  text-shadow: 0 2px 6px rgba(220, 220, 170, 0.8);
  cursor: pointer;
}
#titulo:hover{
  color: #C678DD;
  text-shadow: 0 2px 6px rgba(198, 120, 221, 0.8);
}

#simbolo{
  color: #C678DD;
  text-shadow: 0 2px 6px rgba(198, 120, 221, 0.8);
  cursor: pointer;
}
#simbolo:hover{
  color: #DCDCAA;
  text-shadow: 0 2px 6px rgba(220, 220, 170, 0.8);
}