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

.ocean-background {
    background-image: url('8bit-island.gif');
    background-size: cover; /* or 'contain', or specific pixel values */
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* Example: full viewport height */
}

.beach-background {
  background-image: url('8bit-beach.png');
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

h2 {
  text-align: center;
}

body {
    font-family: 'neophyte';
    /* Set the GIF as the background image */
    /*background-image: url('heart-love.gif'); */
    /* Control how the GIF repeats */
    /* background-repeat: repeat; /* Default: repeats both horizontally and vertically */
    /* Other options for background-repeat: */
    /* background-repeat: repeat-x; /* Repeats horizontally only */
    /* background-repeat: repeat-y; /* Repeats vertically only */
    /* background-repeat: no-repeat; /* Displays the GIF once */
    /* background-repeat: round; /* Scales the image to fit the container without clipping */
    /* background-repeat: space; /* Evenly distributes the image with spacing */

    /* Optional: Set a background color as a fallback or for areas not covered by the GIF */
    /*background-color: #f0f0f0; */
}

/* HTML: <div class="one-piece"></div> */
.one-piece {
  height: 300px;
  aspect-ratio: 1;
  background: 
    radial-gradient(#000 70%,#0000 73%) 50% 57%/7% 7%,
    radial-gradient(#000 70%,#0000 73%) 39% 48%/14% 14%,
    radial-gradient(#000 70%,#0000 73%) 61% 48%/14% 14%,
    linear-gradient(#000 0 0) 50% 39%/69% 2px,
    linear-gradient(#000 0 0) 50% 35.8%/59% 2px,
    linear-gradient(#000 0 0) 50% 31%/42% 2px,
    radial-gradient(50% 100% at 50% 134%,#f0b114 98%,#0000 )50% 15%/44% 19%,
    radial-gradient(50% 84% at 50% 100%,#cf091a 98%,#0000 )50% 24%/44% 16%,
    radial-gradient(50% 23% at 50% 100%,#F0B114 98%,#0000 )50% 24%/68% 20%,
    radial-gradient(#fff 67.5%,#000 68.5% 70%,#0000 71%) 50% 34%/47% 47%;
  background-repeat: no-repeat;
  position: relative;
}
.one-piece:before {
  content: "";
  position: absolute;
  background: 
    linear-gradient(#000 0 0) 78% 50%/4% 43%,
    linear-gradient(#000 0 0) 22% 50%/4% 43%,
    linear-gradient(#000 0 0) 50% 50%/4% 47%,
    radial-gradient(75% 57% at 50% 0,#0000 91%,#000 93% 98%,#0000 ),
    radial-gradient(85% 76% at 50% 0,#0000 93%,#000 95% 98%,#0000 )#fff;
  background-repeat: no-repeat;
  inset: 55% 37% 20%;
  border-radius: 14% 14% 30px 30px/50% 50% 30px 30px;
  border: 2px solid #000;
  z-index: -1;
}
.one-piece:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  padding: 10%;
  background: 
    radial-gradient(#fff 66%,#0000 71%) 10% 97%/10% 11%,
    radial-gradient(#fff 66%,#0000 71%) 3% 90%/10% 11%,
    radial-gradient(#fff 66%,#0000 71%) 97% 91%/10% 11%,
    radial-gradient(#fff 66%,#0000 71%) 89% 98%/10% 11%,
    radial-gradient(#fff 66%,#0000 71%) 89% 2%/10% 11%,
    radial-gradient(#fff 66%,#0000 71%) 98% 9%/12% 10%,
    radial-gradient(#fff 66%,#0000 71%) 2% 10%/11% 10%,
    radial-gradient(#fff 66%,#0000 71%) 9% 2%/10% 11%,
    linear-gradient(45deg,#0000 47%, #fff 0 53%,#0000 0) content-box,
    linear-gradient(-45deg,#0000 47%, #fff 0 53%,#0000 0) content-box,#000;
  background-repeat: no-repeat;
  /*filter: blur(4px) contrast(10);*/
}

@font-face {
  font-family: 'neophyte'; /* Give your font a unique name */
  src: url('neophyte.ttf') format('truetype'); /* Adjust the path to your font file */
  font-weight: normal; /* Optional: define weight */
  font-style: normal; /* Optional: define style */
}