/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*Cursor - https://www.rw-designer.com/cursor-set/wii-light-green*/

body {
    cursor: url("cursor/wii-pointer-ccw.png"), auto;
}

a, button, .hover-target {
    cursor: url("cursor/wii-open-ccw.png"), pointer;
}
/*Cursor - https://www.rw-designer.com/cursor-set/wii-light-green*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
  font-family: 'JetBrains Mono', monospace;
  overflow-x: hidden;
  cursor: url("cursor/wii-pointer-ccw.png"), auto;
}


h2 {
  font-size: 28px;
  margin: 0 0 10px 0;
}

p {
  font-size: 14px;
  margin: 0 0 10px 0;
}

p:last-child{
  margin: 0;
}

#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#principal {
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 60px auto;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 20px;
  border: 5px solid #0F0;
  display: table;
}

#centro {
  z-index: 1;
  display: table-cell;
  width: 750px;
}

#derecha {
  z-index: 1;
  display: table-cell;
  width: 250px;
  padding-top: 1px;
  vertical-align: top;
}

.seccion {
  padding: 30px;
  margin: 30px 15px;
  background: black;
  border: 2px solid #0F0;
  border-radius: 20px;
}

a {
  color: #0F0;
}

#MII {
  width: 250px;
  position: absolute;
  top: 285px;
  left: 20px;
  z-index: 10;
  opacity: 100%;
  transform: rotate(-7.5deg);
  transition: transform 0.3s ease; 
}

#MII:hover {
  transform: scale(1.05) rotate(-5deg); 
}

.menu {
  background: black;
  border-radius: 20px;
  margin: 30px 15px;
}

h3 {
  background-color: #00c800;
  border-radius: 10px 10px 0 0;
  padding: 5px 0 5px 5px;
  border: 1px solid #00c800;
}

ul {
  border: 2px solid #0F0;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

li {
  padding: 5px 0 5px 0;
  border-bottom: 1px dashed white;
  list-style-position: inside;
  padding-left: 5px;
  font-weight: bold;
  font-size: 14px;
}

li:last-child {
  border-bottom: 0px dashed white;
}

li:last-child:hover {
  border-bottom: 0px dashed white;
  border-radius: 0 0 8px 8px;
}

li::marker {
  color: #0F0;
  content: "⫸ ";
}

#marca, li:hover {
  cursor: url("cursor/wii-open-ccw.png"), pointer;
  background: #FFF;
}


/* Widget de Last.fm */
#LastFM {
  margin: 30px 15px;
  border: 2px solid #00c800;
  border-radius: 10px;
  overflow: hidden;
  background: #00c800;
}

.lfm-container {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 10px;
}

#lfm-cover {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid #00c800;
  object-fit: cover;
}

.lfm-info {
  flex: 1;
  overflow: hidden; /* Necesario para el scroll */
  display: flex;
  flex-direction: column;
}

.lfm-status {
  font-size: 9px;
  color: #0F0;
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* Contenedores para el texto que se mueve */
.lfm-scroll-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.lfm-text {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
}

.lfm-artist {
  font-size: 11px;
  color: #b3b3b3;
}

/* Animación de texto*/
@keyframes lfm-marquee {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  90% { transform: translateX(calc(-100% + 110px)); } /* 110px es el espacio visible aprox */
  100% { transform: translateX(0); }
}

.animate-lfm {
  animation: lfm-marquee 7s linear infinite;
}

/*---*/

.gif {
  margin: 30px 15px;
  background: black;
  border: 2px solid #0F0;
  border-radius: 20px;
  background-color: #0F0;
}

.gif img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

#visitas {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 30px 15px;
  background: black;
  border: 2px solid #0F0;
  border-radius: 20px;
}

#visitas p {
  display: inline;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.ascii {
  color: #FFF;
  z-index: 10;
  position: fixed;
}

#yoda{
  font-family: monospace;
  font-weight: 900;
  font-size: 16px;
  left: 0;
  bottom: -20px;
}