header {
  font-size: 1.5em;
}

body {
  text-align: center;
  cursor: url('images/fruit_0031.gif'), auto;
  background-image: url("images/POOL.png");
  font-size: 1.5em;
}

main {
  min-height: calc(100vh - 211px);
  grid-area: main;
}


/*marquee animation*/
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .moving-text {
    animation: marquee 15s linear infinite;
  }
}
.moving-text:hover {
  animation-play-state: paused;
}


/*word art*/
.wordart {
  font-family: Arial, sans-serif;
  font-size: 3.2em;
  font-weight: bold;
  position: relative;
  z-index: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wordart.blues .text {
  font-family: Impact, sans-serif;
  color: #24c0fd;
  -webkit-text-stroke: 0.01em #0000aa;
  filter: progid:DXImageTransform.Microsoft.Glow(Color=#0000aa, Strength=1);
  text-shadow: 0.13em -0.13em 0px #0000aa;
  letter-spacing: -0.05em;
}


/*image positioning*/
.top-left-image { position: absolute; top: 25px; left: 25px; } 
.top-right-image { position: absolute; top: 25px; right: 25px;}


/*layout*/
.container {  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px 4px;
}

.header {
  grid-area: 1 / 1 / 2 / 6;
}

.footer {
  grid-area: 5 / 1 / 6 / 6;
  border: 1px solid rgb(189, 84, 173);
}

.sidebar { 
grid-area: 2 / 1 / 5 / 2; 
border: 1px solid rgb(189, 84, 173);
}

.body {
grid-area: 2 / 2 / 5 / 6;
border: 1px solid rgb(189, 84, 173);
}