@import url('https://fonts.googleapis.com/css2?family=Barriecito&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Freckle+Face&family=Outfit:wght@100..900&family=Prata&family=Young+Serif&display=swap');

body {
  font-family: "Fraunces", serif;
  background-image: url("/images/backgroundsign.jpg");
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Scales the image to cover the entire container */
  background-position: center; /* Centers the image */
  background-attachment: fixed; /* Fixes the image position during scroll */
        
}

h1{
  color: #f0e7d8ff;
}

.sideTroughLeft{
  position: sticky;
  align-self: flex-start;
  left: 0;
  top: 20;
  width: 250px;
  height: 100vh;
  padding: 20px;
}

.sideTroughRight{
  position: sticky;
  align-self: flex-start;
  right: 0;
  top: 20;
  width: 250px;
  height: 100vh;
  padding: 20px;
}

#content{
  width: 1000px;
  margin: 0 auto;
  padding: 5px;
}

#header {
  text-align: left;
  padding: 15px;
  width: 1000px;
}

.strokeme {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.siteTitle{
  display: inline;
  font-family: "Barriecito";
  color: rgb(179, 53, 25);
  font-size: 68px;
}

.headerNav{
  /*display: inline-block;*/
  text-decoration: none;
  list-style: none;
}

.headerNav li {
  display: inline;
  padding: 5px;
  background-color: rgb(240, 231, 216, .6);
}

#splootches{
  width: 400px;
  min-height: 100vh;
  padding: 20px;
}

.primarySplootch{
  background-color: rgb(227, 222, 222, .8);
  padding: 5px;
  font-family: "Courier";
  color: rgb(10, 10, 10);
  font-size: 12px;
  margin: 30px 0;
}

.splootch1{
  width: 30%;
}

.splootch2{
  width: 70%;
}

.splootch3{
  width: 10%;
}

.splootch1{
  width: 40%;
}

.splootch1{
  width: 30%;
}

.float-animation {
  /* Ensure smooth animation */
  animation: float-up-down 3s ease-in-out infinite; 
  /* Set initial position for relative movement */
  position: relative; 
}

/* Define the animation */
@keyframes float-up-down {
  0% {
    transform: translateY(0); /* Start at the original vertical position */
  }
  50% {
    transform: translateY(-20px); /* Move up by 20 pixels */
  }
  100% {
    transform: translateY(0); /* Return to the original position */
  }
}