@font-face {
font-family: romantic;
src: url(https://dl.dropbox.com/s/xp4bpca59ftih9n/ROMANTIC.TTF);
}
body {
  font-family: Kosugi Maru; }
.romantic {
font-family: romantic;
font-size: 20px;
}
.scroll {
width: 650px;
font-family: Kosugi Maru;
height: 500px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
 border: 3px dashed black;
    border-radius: 8px;
}
.scroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}

.scroll::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

.scroll::-webkit-scrollbar-corner {
background-color: #cccccc;
}

.scroll::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

.scroll::-webkit-scrollbar-button, .scroll::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

.scroll::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

.scroll::-webkit-scrollbar-button:horizontal:increment, .scroll::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:decrement, .scroll::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:increment, .scroll::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:increment:start, .scroll::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:decrement:end, .scroll::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
    <link rel="icon" type="image/x-icon" href="https://i.pinimg.com/originals/bb/15/ba/bb15ba629af0334110f767e053c47b9f.gif">
  img.sticky {
  position: sticky;
  top: 0;
  width: 200px;
}
  body {
  background-image: url('https://i.pinimg.com/1200x/e7/00/37/e700372e28952680e1fd1d34f00a2ce1.jpg');
}
  #container {
  border:3px dashed black;
    border-radius: 20px;
  min-height:650px;
  width:750px;
  margin:0 auto;
  margin-top:20px;
    background-color: #FFF5DE;
}
  #float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 
 font-size:3em;
 font-family: Darumadrop One;
 font-weight:bold; 
 color: #fff;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}
.corner-img {
  position: absolute;
  width: 120px;                   /* Size of the image */
  top: -5px; left: 230px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.corner-img5 {
  position: absolute;
  width: 100px;                   /* Size of the image */
  top: -500px; left: 200px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.corner-img6 {
  position: absolute;
  width: 80px;                   /* Size of the image */
  top: -505px; left: 300px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.corner-img2 {
  position: absolute;
  width: 130px;                   /* Size of the image */
  top: -10px; right: 230px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.corner-img4 {
  position: absolute;
  width: 100px;                   /* Size of the image */
  top: 90px; right: 200px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.corner-img3 {
  position: absolute;
  width: 100px;                   /* Size of the image */
  top: 80px; right: 275px;                 /* Overflow at the corner */
  z-index: 10;                   /* Keeps it on top */
  border-radius: 30%;            /* Optional styling */
}
.balls {
  width: 100px;                   /* Size of the image */        /* Optional styling */
}
.top-header {
  width: 100%;
  overflow: hidden;
}

.top-img {
  width: 100px;
  display: block;
  top: -5px; 
  height: 75px;
}
   .button-group {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .button-group button {
            padding: 10px 20px;
             font-family: Kosugi Maru;
    font-size: 16px;
            cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1028.gif) auto;
            border-radius: 8px;
             color: white;
               background-color: #9e1616;
             border: dashed 3px black;
              margin: 4px 2px;
        }

body::-webkit-scrollbar {
width: 16px;
height: 16px;
}

body::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

body::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

body::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

body::-webkit-scrollbar-corner {
background-color: #cccccc;
}

body::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

body::-webkit-scrollbar-button, body::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

body::-webkit-scrollbar-button:active, body::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

body::-webkit-scrollbar-button:horizontal:decrement, body::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

body::-webkit-scrollbar-button:horizontal:increment, body::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

body::-webkit-scrollbar-button:vertical:decrement, body::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

body::-webkit-scrollbar-button:vertical:increment, body::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

body::-webkit-scrollbar-button:horizontal:increment:start, body::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

body::-webkit-scrollbar-button:horizontal:decrement:end, body::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

body::-webkit-scrollbar-button:vertical:increment:start, body::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

body::-webkit-scrollbar-button:vertical:decrement:end, body::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1034.ani), url(https://cur.cursors-4u.net/nature/nat-11/nat1034.gif), auto !important;} /* End https://www.cursors-4u.com */
.gallery {
      display: flex;
      flex-wrap: wrap;        /* wrap to next line on small screens */
      gap: 80px;              /* space between images */
      justify-content: center;
      padding: 50px;
      box-sizing: border-box;
    }

    /* Each item keeps its aspect and is responsive */
    .gallery-item {
      flex: 1 1 100px;        /* grow, shrink, base width 200px */
      max-width: 100px;       /* don't get too wide on large screens */
      box-sizing: border-box;
    }

    .gallery-item img {
      width: 100px;
      height: auto;
      display: block;
      border-radius: 8px;     /* small rounding, remove if you prefer */
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }