body{
   padding: 30px;
   background-image: url("https://i.pinimg.com/originals/ef/e4/91/efe4911c1514bd6da486c87cab240f60.gif");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 100%;
   overflow: scroll;
   overflow-x: hidden;
   cursor: url("assets/crosshair.png") 16 15, auto;
   font-family: "Source Code Pro", monospace;
}

.lines {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   z-index: 300;
   opacity: 0.1;
}
    
.lines:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
   background-size: 100% 4px;
   will-change: background, background-size; 
   animation: scanlines 0.2s linear infinite;
}
    
@keyframes scanlines {
   from {
      background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%);
      background-size: 100% 4px;
   }
   to {
      background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
      background-size: 100% 4px;
   }
}

@media only screen and (max-width: 600px) {
   .lines {
      opacity: 0.1;
   }
}

.title {
   background-image: url("https://i.pinimg.com/originals/f1/be/8e/f1be8e1c9e4e66196d63c9c0082a6dd3.gif");
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 3em;
   background-position: center;
   -webkit-text-stroke: 1px white;
   font-weight: bold;
}

.card {
   transition: transform 0.3s ease, filter 0.3s ease; 
}

.card:hover {
   filter: brightness(0.7);
   transform: scale(1.05);
}