html {
    background-color: #003D4C;
    background-image: url("BG_Star.svg");
    background-size: auto;
    background-size: 75px 75px;
  background-repeat: repeat; /* Repeats the image horizontally */
  animation: scrollBackground 5s linear infinite;
}

@media (max-width: 768px) {
  h1 {
    font-size: smaller;
  }

  p {
    font-size: smaller;
  }

  img {
    width: 90%;
  }

  .content {
    margin: 5px 5px 5px 5px;
  }
}

img {
  overflow: hidden;
  border-radius: 15px;
  transition: ease;
  transition-duration: 0.25s;
}
img:hover {
  transform: scale(1.025);
  filter: drop-shadow(7px 5px 3px #003D4C);
}

.header {
    background-image: url("BG_Orange.svg");
    background-size: 75px 75px;
    margin: auto;
    max-width: 75%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 10px solid #003D4C;
    color: #003D4C;

    animation: scrollHorizontal 5s linear infinite;
}

.nav {
    background-image: url("BG_Orange.svg");
    background-size: 75px 75px;
    margin: auto;
    float: left;
    padding: 10px;
    height: auto;
    border-radius: 10px;
    border: 10px solid #003D4C;


    animation: scrollHorizontal 20s linear infinite;
}

.nav a {
  text-decoration: none;
  font-size: 16px;
  color:#003D4C;
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  transition: ease;
  transition-duration: 0.25s;
  
}

.nav a:hover {
  background-color:#003D4C;
  color: orange;
  font-size: 20px;
}

@media (min-width: 768px) {
  .nav {
    float:none;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  .nav a {
    font-size: 32px;
  }

  .nav a:hover {
    font-size: 38px
  }
}

.content {
  background-color: rgba(255, 255, 255, .75);
  border: 10px solid #003D4C;
  position:unset;
  float: left;

  color: #003D4C;

  padding-left: 10px;
  padding-right: 10px;
  margin: 10px;
  font-size: larger;
}
.content a {
  text-decoration: none;
  color: orange;
}

@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 150px 75px; /* Adjust this value based on image width */
  }
}

@keyframes scrollHorizontal {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 75px 0;
  }
}