::-webkit-scrollbar {
   width: 10px;
   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-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: 10px;
   height: 16px;
 background-color: #cccccc;
 z-index: 1;
 }
 
 ::-webkit-scrollbar-corner {
 background-color: #cccccc;
 }
 
 ::-webkit-resizer {
   width: 10px;
   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, ::-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: 10px;
   height: 16px;
 background-color: #cccccc;
 image-rendering: pixelated;
 background-repeat: no-repeat;
 background-position: center center;
 }
 
 ::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
 background-position: 2px 2px;
 }
 
::-webkit-scrollbar-button:horizontal:decrement, ::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}
 
::-webkit-scrollbar-button:horizontal:increment, ::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}
 
::-webkit-scrollbar-button:vertical:decrement, ::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}
 
::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}
 
::-webkit-scrollbar-button:horizontal:increment:start, ::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}
 
::-webkit-scrollbar-button:horizontal:decrement:end, ::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}
 
::-webkit-scrollbar-button:vertical:increment:start, ::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}
 
::-webkit-scrollbar-button:vertical:decrement:end, ::-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;
}

h2 {
   font-size: 18px;
   margin:0;
}

body {
    overflow: hidden;
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: MS UI Gothic;
   font-weight: bold;
   flex-direction: column;
   justify-content: center;
    align-items: center;
}

#pw {
   width:600px;
   height:auto;
   weight:700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
   box-shadow:0px 0px 20px white;
}

.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: opacity 1.5s ease-in-out;
}

/* Start with one visible */
#bg1 { opacity: 1; }
#bg2 { opacity: 0; }

#music-player {
    position: absolute;
    z-index: 2;
    top: 300px;
    left: 40%;
    transform: translateX(-50%);
}
#music-player {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gee {
    animation-name: bounce;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    display: inline-block;
    z-index: 9;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  
}
#wont img{
position: absolute;
z-index: 1;
top: 153px;
    left: 50%;
transform: translateX(-50%);
    width: 300px;
}

#help {
z-index: 5;
   top: 330px;
    left: 50%;
transform: translateX(-50%);
position: absolute;
}

#poka {
   z-index: 5;
   top: 390px;
    left: 44%;
transform: translateX(-50%);
position: absolute;
}

header {
   position: absolute;
z-index: 10;
top: 100px;
    left: 49.5%;
transform: translateX(-50%);
    width: 300px;
filter: saturate(65%);
opacity:0.7;
}