{
  box-sizing: border-box;
}

body {
  background-image: url(https://open-window.neocities.org/I_G/bands.png);
  margin: 0;
  cursor: url(https://open-window.neocities.org/I_G/normhand.png), auto;
  font-family: "rainyhearts"; 
}

@font-face {
    font-family: "rainyhearts"; 
    src: url("https://open-window.neocities.org/I_G/rainyhearts.woff"); 
}

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 20px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }

.cbox {
  
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #ecf2f9 white;
}

a:hover {
  cursor: url(https://open-window.neocities.org/I_G/linkhand.png), auto;
}


mark { 
  background-color: #ecf2f9;
  color: black;
}
<!--
Source - https://stackoverflow.com/a/43289339
Posted by shaochuancs, modified by community. See post 'Timeline' for change history
Retrieved 2026-03-15, License - CC BY-SA 3.0
-->

#thumbnail{
  width: 100px;
  height: 100px;
  display:block;
  z-index:999;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
#thumbnail:hover {
    transform: scale(1.1);
}

.feature {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-row-gap: 0px;
}

.div11 { grid-area: 1 / 1 / 2 / 2; }
.div22 { grid-area: 1 / 2 / 2 / 3; }
.div33 { grid-area: 1 / 3 / 2 / 4; }

@font-face {
    font-family: "Chalkiez-Regular"; 
    src: url("https://open-window.neocities.org/I_G/Chalkiez-Regular.woff"); 
}