* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body {
    min-width: 400px;
    width: 100vw;
    height: 100vh;
    background-color:maroon;
    background-image: url("public/image.png");
    background-size: 20vw 20vw;
    background-repeat: repeat;
    background-position: 0 0, 10vw 10vw;
    background-image: url("public/image.png"), url("public/image.png");
    animation: scroll-bg 5s linear infinite;
}

@keyframes scroll-bg {
    from {
      background-position: 0 0, 10vw 10vw;
    }
    to {
      background-position: -20vw -20vw, -10vw -10vw;
    }
  }

main {
    background-color:bisque;
    width: 70%;
    border-radius: 20px;
    overflow: auto;
    max-height: 80%;
}

/* Base Button Styles */
.btn {
  color: #fff;
  background-color: #5cb85c;
  border-color: #198754;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  display: inline-block;
  border: 1px solid transparent;
  margin: 5px;
}

/* Hover Effect */
.btn:hover {
  background-color: #449d44;
  border-color: #146c43;
}

/* Active (Pressed) Effect */
.btn:active {
  background-color: #146c43;
  border-color: #13653f;
  transform: scale(0.98); /* Slight press effect */
}

p {
  white-space: pre-wrap;
  font-size: 1.5em;
}

a {
  text-decoration: none;
}

video {
  width: 100%;
}

/* tablets and desktop */
@media only screen and (min-width: 768px) {
    main {
      width: 50%;
    }
}