body {
  text-transform: lowercase;
  text-align: justify;
  letter-spacing: 0.1rem;
  background-image: url(image/background.png);
  background-repeat: repeat;
}

/* MAIN */

body, main {
  cursor:url(image/cursor.gif), auto;
}

main {
  width: 1000px;
  margin: auto;
}

main img {
  width: 100%;
}

/* TOP */

.carouseltop {
  position: relative;
  z-index: 4;
  margin-bottom: -85px;
}

/* MIDDLE */
  
.carouselmiddle {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 80px auto;
  width: 80%;
  margin: auto;
  background-image: url(image/grassybackground.png);
  background-size: cover;
}

.left {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.middle {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  padding: 10px 10px 0 10px;
  background-color: #ffccea;
  background-image: url(image/carouselmiddlebg.png);
  background-repeat: repeat;
}

.right {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  height: 100%;
  background-color: #ffccea;
  background-image: url(image/carouselmiddlebg.png);
  background-repeat: repeat;
}

.topleft {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  height: 100%;
}

.topright {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  height: 100%;
}

#sidebar {
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent; 
  border-image: url(image/poleborder.png);
  border-image-slice: 40;
}

.sidebartextleft {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  padding: 20px 30px 220px 30px;
  text-align: center;
}

.sidebartextright {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  padding: 20px 30px 250px 30px;
  text-align: center;
}

.updatecontainer {
  background-color: white;
  border-radius: 10px;
  padding: 5px 10px 5px 10px;
  font-size: small;
  text-align: left;
  margin-bottom: 10px;
}

.date {
  font-weight: bold;
  text-align: right;
  color: white;
  background-color: pink;
  border-radius: 10px;
  padding: 3px 5px 3px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
}

.subheader {
  color: white;
  font-size: large;
  font-weight: bold;
  text-shadow: 0 0px 10px #d01f6f;
  text-align: center;
}

/* BOTTOM */

.carouselbottom {
  position: relative;
  z-index: 3;
  top: -20px;
}

/* Links */

link {
  cursor:url(image/cursoranim.gif), auto;
}

nav {
  position: relative;
  bottom: 360px;
  margin: auto;
}

#horse1 {
  width: 180px;
  top: -30px;
  left: 20px;
}

#horse2 {
  width: 220px;
  left: 190px;
  top:-30px;
}

#horse3 {
  width: 200px;
  left: 600px;
}

#horse4 {
  width: 160px;
  left: 830px;
  top:-50px;
}

#horse1, #horse2, #horse3, #horse4 {
  filter: drop-shadow(3px 3px 0px rgba(232,159,203,1));
  position: absolute;
}

#horse1:hover, #horse2:hover, #horse3:hover, #horse4:hover {
  filter: drop-shadow(3px 3px 0px rgba(255,248,223,1));
  cursor:url(image/cursorhover.gif), auto;
}

@keyframes bounceAnimation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}

.animation {
  animation-name: bounceAnimation;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

@keyframes bounceAnimation2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}

.animation2 {
  animation-name: bounceAnimation2;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-fill-mode: backwards;
}