body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #fff;
    text-align: center;
    background-image: url(https://mudskipper.neocities.org/skulls1.gif);
    background-attachment: scroll;
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

mark {
    background-color: #26272e;
    color: #ffffff;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 3px;
}

iframe {
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    overflow: scroll;
    height: auto;
    width: 140px;
}

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 8px;
    margin: 5px;
}
    
.div1 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    background-color: #000000;
    padding: 15px;
    width: 140px;
    height: 140px;
}

.div2 {
    grid-row: span 5 / span 5;
    grid-column-start: 2;
    grid-row-start: 3;
    background-color: #000000;
    width: 140px;
    padding: 15px;
}

.div3 {
    grid-column: span 3 / span 3;
    grid-row: span 7 / span 7;
    grid-column-start: 3;
    grid-row-start: 1;
    background-color: #000000;
}

.myButton {
	box-shadow:inset -3px 2px 10px 0px #1f2642;
	background:linear-gradient(to bottom, #b4b4b4 5%, #50525f 100%);
	background-color:#838383;
	border-radius:7px;
	border:1px solid #00000073;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Georgia;
	font-size:12px;
	font-weight:bold;
	padding:8px 19px;
	text-decoration:none;
	text-shadow:2px 0px 2px #2b5066;
    margin-top: 10px;
}
.myButton:hover {
	background:linear-gradient(to bottom, #6e6e74 5%, #8d8e96 100%);
	background-color:#858585;
}
.myButton:active {
	position:relative;
	top:1px;
}

.notebook {
    margin-top: 20px;
    color: #000000;
    text-align: center;
    font-size: 12px;
    line-height: 1.1;
    justify-content: center;
    background-color: #9898a3;
    overflow-y: auto;
    overflow-x: hidden;
    height: 170px;
    width: 130px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
    box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #d8d6df, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.hr {
    border-top-style: dashed;
    border-width: 2px;
    border-color: #4e4e4e;
}

#notebook::-webkit-scrollbar {
    width: 0; /* remove scrollbar space */
    background: transparent; /* to make scrollbar invisible */
}

#notebook::-webkit-scrollbar-thumb {
    background: transparent;
}

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

    ::-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%);
    }

    ::-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%);
    }

    ::-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;
    }

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

    ::-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;
    }

    ::-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;
    }

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

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

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

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

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

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

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

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

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

    ::-webkit-scrollbar-button:active,
    .scroll::-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;
    }

#lol,
    .img2 {
      /* album's cover image u can change the size! */
      position: relative;
      width: 70px;
      height: 70px;
      background-color: black;
      color: black;
      z-index: 999;
      box-shadow: #00000073 0px 0px 4px;
    }
  
    .img1 {
      /* cd image u can change the size too */
      position: absolute;
      width:auto;
      height:65px;
      left: 35px;
      z-index: 800;
      -webkit-animation: spin 2s linear infinite;
      -webkit-animation: spin 4s linear infinite;
      -moz-animation: spin 4s linear infinite;
      animation: spin 4s linear infinite;
    }
  
    .img1 hover {
      cursor: help;
    }
  
    @-moz-keyframes spin {
      100% {
        -moz-transform: rotate(360deg);
      }
    }
  
    @-webkit-keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
  
    @keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  
    .img1:hover {
      /* this makes the cd stop spinning when hovering! */
      -webkit-animation: pop 0.3s ease;
      animation: pop 0.3s ease;
    }