/* ===== RESET BÁSICO ===== */
body {
  margin: 40px auto;
  max-width: 1500px;
  background-image: url(/recursos/Fondos/fondo.png);
  background-position-x: center;
  background-repeat: no-repeat;
  color: rgb(253, 253, 253);
  font-family: 'vhs';
  zoom: 80%;
}

/* ===== FUENTE ===== */
@font-face {
  font-family: 'vhs';
  src: url('../recursos/fuente/vhs.ttf') format('truetype');
}

/* ===== TEXTO ===== */
h1 {
  text-align: center;
  font-size: 100px;
}

p {
  font-size: 20px;
}

/* ===== MARCOS ===== */
.exterior {
  border: 5px solid rgb(47, 20, 130);
}

.medio {
  border: 5px solid rgb(131, 69, 237);
}

.interior {
  border: 5px solid rgb(47, 20, 130);
  background-color: rgb(4, 6, 27);
}


/* ===== BANNER ===== */
#interiorBanner {
  border: 5px solid rgb(47, 20, 130);
  background-image: url(/recursos/Fondos/BannerPrincipal.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ===== NAVEGACIÓN ===== */
#navegacionGeneral {
  display: flex;
  gap: 10px;
  padding: 10px;
  text-align: center;
}

.navItem {
  width: 20%;
}

/* ===== LAYOUT PRINCIPAL ===== */
#main {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.col.izquierda { width: 25%; }
.col.centro    { width: 50%; }
.col.derecha   { width: 25%; }

/* ===== BLOQUES ===== */
#BloqueIzquierdo,
#BloqueIzquierdo1,
#BloqueIzquierdo2,
#BloqueMedio,
#BloqueMedio1,
#BloqueDerecho,
#BloqueDerecho1 {
  border: 5px solid rgb(47, 20, 130);
  background-color: rgb(4, 6, 27);
}

#BloqueIzquierdo  { height: 200px; }
#BloqueIzquierdo2 { height: 105px; }

#BloqueIzquierdo1 {
  height: 445px;
  display: flex;
  flex-direction: column;
}

#BloqueMedio  { height: 600px; padding: 10px; display: flex; }
#BloqueMedio1 { height: 175px; text-align: center; }

#BloqueDerecho  { height: 360px; }
#BloqueDerecho1 { height: 435px; }

#Dibujo { width: 340px; margin-top: 20px; }

/* ===== PERFIL / STATUS ===== */
#contacMe {
  display: inline-flex;
  height: 200px;
}

#Perfil {
  margin-top: 15px;
  margin-left: 10px;
  width: 160px;
  height: 160px;
  border: 5px solid rgb(131, 69, 237);
  border-radius: 5px;
}

#perfil1 {
  width: 160px;
  image-rendering: pixelated;
}

#info {
  width: 200px;
  height: 170px;
  margin: 10px;
  margin-top: 15px;
}

#statuscafe {
  padding: .5em;
  background-color: rgb(4, 6, 27);
  border: 5px solid rgb(131, 69, 237);
  width: 125px;
  height: 80px;
  border-radius: 5px;
  font-size: 15px;
}

#statuscafe-username {
  margin-bottom: .5em;
}

#statuscafe-content {
  margin: 0 1em 0.5em 1em;
}

/* ===== LINK ME ===== */
#linkme {
  text-align: center;
  font-size: 15px;
}

#link1 {
  text-align: center;
  margin-left: 120px;
  width: 100px;
  height: 50px;
}

/* ===== LAST UPDATE (SCROLL) ===== */
#textoEnlace {
  height: 105px;
  width: 320px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-left: 10px;
  background-color: rgb(4, 6, 27);
  border: 2px solid rgb(131, 69, 237);
  line-height: 1.4;
}

#textoEnlace::-webkit-scrollbar {
  width: 8px;
}

#textoEnlace::-webkit-scrollbar-track {
  background: rgb(47, 20, 130);
}

#textoEnlace::-webkit-scrollbar-thumb {
  background: rgb(131, 69, 237);
  border-radius: 4px;
}

.carousel {
  width: 710px;
  overflow: hidden;
}

.track {
  display: flex;
  width: max-content;
  animation: scroll 12s linear infinite;
}

.set {
  display: flex;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* tus imágenes */
#LOCO {
  margin: 15px;
  width: 150px;
  height: auto;
}

/* ===== MAIN (CENTRO) ===== */
#organizarMain {
  flex-direction: column;
  width: 50%;
}

#prueba  { height: 295px; }
#prueba1 { height: 600px; width: 700px; }

#yo { margin-left: 140px; }

/* ===== REPRODUCTOR ===== */
#reproductor { flex-direction: column; }

#vinilo { position: relative; }

#albumes {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
}

#TituloCancion {
  border: 5px solid rgb(131, 69, 237);
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
  height: 80px;
}

#botones {
  margin: 5px;
  height: 20px;
  display: flex;
  padding: 5px;
}

#play,
#stop,
#next,
#prev {
  width: 50%;
  margin-bottom: 20px;
  text-align: center;
  height: 20px;
  border: 5px solid rgb(131, 69, 237);
  border-radius: 5px;
  margin-left: 10px;
}

#cdImage {
  position: absolute;
  top: 20px;
  left: 120px;
  height: 180px;
  z-index: 1;
  animation: girar 4s linear infinite;
  animation-play-state: paused;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#contador {  padding-top: 5px; padding-left: 30px;}

#contador1 { padding-top: 10px; text-align: center; width: 150px;}

a {
color: rgb(192, 156, 255);

}