html{
    background-color: #4a141c;
    cursor: url("cursors/beeep.png"), auto;
}


@font-face {
    font-family:font0;
    src: url("fonts/ITC Avant Garde Gothic Book Condensed.otf");
    font-style: normal;
}

::-moz-selection { /* Code for Firefox */
  color: hsl(0, 0%, 100%);
  background: hsla(0, 0%, 0%, 0.6);
}

::selection {
  color: hsl(0, 0%, 100%);
  background: hsla(0, 0%, 0%, 0.6);
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #2e090f;
  background: hidden;
}

::-webkit-scrollbar-thumb {
  background: #000000; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(106, 11, 11); 
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.6) inset;
  z-index: -5;
}

@keyframes vinyl {
 100% {transform: rotate(360deg);}
}

.music {
    z-index: 0;
    top: 10px;
    right: 100px;
    mix-blend-mode: difference;
    animation: vinyl 5s infinite;
    animation-timing-function: linear;
    position: fixed;
}

.help {
    z-index: 10;
    position: absolute;
    right: 20px;
    top: 310px;
    width: 200px;
    height: 55px;
    color: hsl(0, 0%, 100%);
    background-color: rgba(0, 0, 0, 0.9);
    padding: 8px 15px 10px 20px;
    font-size: large;
    border-radius: 0 20px 20px 20px;
    visibility: hidden;
}

#vinyl:hover .help {
    visibility: visible;
}

#overlay {
    display: block;
    margin: 55px;
    margin-right: 300px;
    margin-left: 100px;
    height: 550px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: auto;
    background-image: url("for_website/overlay.jpg");
    mix-blend-mode: multiply;
}

h2 {
    font-size: 2em;
}

#content {
    display: block;
    position: absolute;
    margin-right: 300px;
    top: 80px;
    left: 120px;
    color: #b7b7b7;
    text-shadow: 2px 2px 5px #000000;
    height: 500px;
    overflow: auto;
    font-size: 1.2em;
    width: 1100px;
}

footer {
    display: block;
    margin: 55px;
    margin-right: 300px;
    margin-left: 100px;
    height: 200px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: auto;
    background-image: url("for_website/overlay.jpg");
    mix-blend-mode: multiply;
}

#laura {
    filter: drop-shadow(0 0.5px 10px rgba(71, 6, 6, 0.5))
            brightness(115%);
    mix-blend-mode: exclusion;
}

#bluerose {
    filter: drop-shadow(0 0.5px 5px rgb(75, 190, 255))
            sepia(0.4)
            brightness(0.8)
}