body {
    background-image: url(https://miiaqa.neocities.org/16.png);
}

.container {
  max-width: 1000px;  
  margin: 20px auto;
  display: grid;
  grid-gap: 00px;
  grid-template-columns: 200px minmax(0, 1fr);
  font-family: monospace;
}

::selection {
background: #cc3030;
/* Change highlight text color */
color: #ffffff;
}

/*HEADER*/

header {
    border-bottom: rgb(53, 51, 51) 1px solid;
    grid-row:  1 / 2;
    grid-column: 1 / 3;
   box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
   background-color: #000000;

}


/*SIDEBAR*/

nav {
    border-left: rgb(53, 51, 51) 1px solid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background-color: #000000;
    color:#f4f4f4;
    padding: 10px;
  box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);

}


/*MAIN CONTENT*/

main {
    border-left: rgb(53, 51, 51) 1px solid;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    padding: 10px;
    background-color: #000000;
    color: #f4f4f4;
   box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
}

.secondcon {
    display: flex;
    border: #27291f 1px solid;
    background-image: url(https://files.catbox.moe/vm86ff.jpg);
    text-shadow: 5px 2px 4px rgba(0,0,0,0.76);
}

.fotomia {

    float: left;
    padding-right: 100px;
}


.infobox {
    border: #000000 0px solid;
    padding: 20px;
    margin: 20px;
    text-align: justify;
    text-indent: 25px;
}

.statuscafe {
    border: #27291f 0px ridge;
    margin: 10px;
    border-radius: 5px;
    background-image: url(https://datoxicwaltz.neocities.org/img/bgs/brainnnnnnzzz.png);
    background-size: cover;
    height: max-content;
}

/*FOOTER*/

footer {
    border-top: #353333 1px solid;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    background-color: #000000;
    color: #f4f4f4;
    padding: 10px;
    box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
    
}

/*TEXT*/

h1 {
  text-align: center;
  color: #ff0000;
}

h2 {
  text-align: center;
  color: #2cc50a;
}

h3 {
  text-align: center;
  color: #837777;
}

hr.new1 {
  border: 1px solid rgb(80, 76, 76);
}

hr.new2 {
  border: 10px solid rgb(3, 3, 3);
}

@keyframes slide {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 300vw;
}
}

.text {
background-size: 300vw 300vw;
text-align: -webkit-center;
background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, #0f0 14.28%, #0ff 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);

-webkit-animation: 'slide' 10s infinite linear forwards;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

/*LINKS*/

a {
    text-decoration: none;
    display: block;
  color: rgb(255, 255, 255);
  padding: 8px 16px;
}

a:hover {
  color: #ff0000;
}

ul {
    padding: 0%;
}

ul li::marker {
    content: none;
}

li a {
  display: block;
  color: rgb(255, 255, 255);
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover{
    color: #ff0000;
}

 #text {
    color: #000000;
    animation: blinkingText 1.2s infinite;
  }

  @keyframes blinkingText {
    0% {
      color: #000000;
    }

    49% {
      color: #000000;
    }

    60% {
      color: white;
    }

    99% {
      color: white;
    }

    100% {
      color: #000000;
    }
  }


/*TEXT N IMAGE HOVER*/

/*Tooltip Follow Start*/
.contents {
  cursor: pointer;
  display: inline-block;
}

.contents:hover .contentstooltip {
    opacity: 1;
}

.contents h1 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 2px;
  color: black;
  font-size: 14px;
  text-align: right;
  font-family: serif;
}

.contentstooltip {
  opacity: 0;
  margin-top: -5px;
  margin-left: 32px;
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  max-width: 300px;
  height: auto;
  font-size: 13px;
  line-height: 1.5em;
  text-align: left;
  padding: 0.5em;
  padding-bottom:0.2em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius:5px;
  pointer-events: none; /* This prevents the box from appearing when hovered. */
  -webkit-transition: opacity .1s linear, top .1s ease-in-out;
  transition: opacity .1s linear, top .1s ease-in-out; 
}

.contentstooltip.arrow-left:after {
  content: " ";
  position: absolute;
  left: -10px;
  top: 5px;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,0.8);
  border-left: none;
  border-bottom: 10px solid transparent;
}

.contentstooltip h1 {text-align: left;}

.max {width: max-content;}
/*Tooltip Follow End*/



/*IMAGENES*/


.blinkies {

  width: 160px;
  padding: 10px;

}


.marquee-container {
  overflow: hidden; /* Hides content outside the box */
  white-space: nowrap;
  width: 100%;
}

.marquee-content {
  display: flex;
  width: fit-content;
  animation: scroll 20s linear infinite; /* Key to the loop */
}

.item {
  padding: 0 1rem;
}

/* The magic: translate exactly 50% (the width of one set) */
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Optional: Pause on hover for better UX */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}