/* 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." */


      body {
        background: linear-gradient (#fdf6e3, #9EE046);
        font-family: Arial Narrow, sans-serif
      }
      h1 {
        color: #91bf11;
        font-size: 50px;
      }
      p {
        color: #b65385
      }
      .intro {
        background: linear-gradient(white, #9EE046);
        border: 10px solid white;
        border-radius: 50px;
        padding:10px;
        max-width: 1500px;
        margin: 0 auto;
        text-align: center;
        font-family: Arial Narrow, sans-serif
      }
      .box1 {
                background: linear-gradient(white, #9EE046);
        border: 10px solid white;
        border-radius: 50px;
        padding:10px;
        max-width: 1500px;
        height: 200px;
        margin: 0 auto;
        text-align: center;
        font-family: Arial Narrow, sans-serif;
        overflow: scroll;
      }
            .box2 {
        background-color: ivory;
        border: 10px solid white;
        border-radius: 10;
        padding:10px;
        max-width: 950px;
        margin: 0 auto;
        text-align: left;
        font-family: Arial Narrow, sans-serif
      }
      .container1 {
       width: 200px;
       height: 200px;
      }
      a {
        color: hotpink
      }
      a:hover {
        color: black
      }
.music {
  position: relative;
  background: url('https://file.garden/ZRYtsnIP2EXOR4Kw/Site%20Files/musicplayer.png') top left no-repeat;
    background-size: auto;
  background-size: 100% 100%;
  overflow: hidden;
  height: 50px;
  max-width: 305px;
  border: 1px solid #000000;
}
.music iframe {
  position: absolute;
  top: 0px;
  height: 47px;
  opacity: 0.00000000000000000000000001;
  z-index: 0;
  left: 0px;
}
.music div {
  position: absolute;
  top: 10px;
  left: 55px;
  width: 51%;
  margin: 0;
}
.music span {
  display: block;
  color: #FFFFFF;
  font-weight: normal;
  text-align: left;
  font-size: 12px;
  width: 240px;
}

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.image2 {
  display: block;
  width: 50%;
  height: auto;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
}
.carousel {
  margin:100px auto;
  width: 90%;
  border: 5px solid white;
  display: flex;
  overflow-x: auto;
}
.group {
  width: 100%;
  height: auto;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 5s infinite linear;
}
@keyframes spin {
  from: {translate 0;}
  to: {translate -100%;}
}
.card {
  flex: 0 0 5em;
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}