header, nav, main, side, footer {
    border: white 4px solid;
      border-radius: 7px;
}
body {
    font-family: 'Courier New', monospace;
    	font-size: 18px;
    background-image: url(imgs/brick2.png);
}
.container {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; 
    border: 50px solid transparent;
    border-image: url("imgs/border3.png") 15% round;
    background-image: linear-gradient(to right, #ffffff, #ffffff);
     background-repeat: no-repeat;
}
header {
    grid-row: 1 / 1;
    grid-column: 1 / 5;
    padding: 75px 10px;
    background-image: url("imgs/marcropped.png");
    background-position: top;
    background-size: cover;
    background-position: center;
}
nav {
    grid-row: 2/3;
    grid-column: 1/2;
    height: max-content;
    padding: 15px 10px;
    background-color: floralwhite;
}
main {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
    height: max-content;
    padding: 15px 10px;
    background-image: url("imgs/bg.jpg");
    background-size: cover;
    background-position: center;
}

side {
    grid-row: 2 / 3;
    grid-column: 4 / 5;
    height: max-content;
    padding: 15px 10px;
    background-color: floralwhite;
}

footer {
    grid-row: 4;
    grid-column: 1 / 5;
    padding: 15px 10px;
    background-image: url("imgs/BegoniaTerminado.png");
    background-position: bottom;
    background-size: cover;
    background-position: center;
}
img {
    max-width: 100%;
}
ul {
    padding: 5px;
    list-style: none;
}
.marquee-container {
  overflow: hidden;
  width: 100%;
  max-width: 600px; /* Adjust to match your layout width */
  background: transparent;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scrollLinear 30s linear infinite;
}

.marquee-track img {
  width: 150px; /* Give all images a uniform width */
  height: auto;
    object-fit: scale-down;
}

/* Pause the animation when a user hovers over it */
.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scrollLinear {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Moves exactly half the total track length */
  }
}

/*status.cafe*/
#statuscafe {
    padding: .5em;
    background-image: url(imgs/waferbg.jpg);
    background-size: cover;
    border: 1px solid white;
}
#statuscafe-username {
    margin-bottom: .5em;
    font-size: 12px;
    color: darksalmon;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    color: chocolate;
}