html {

    background-color:black;
    max-width: 100%;
    overflow-x: hidden;
}
#main {
    padding-left:1%;
    padding-right:1%;
}
@font-face {
    font-family:BigBlue; src:url('/assets/css/bigblue.ttf');
}

h1 {

    font-size: clamp(100%, 1rem + 2vw, 140px);
    color: rgb(0, 179, 0);;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    margin-bottom: 15px;
    font-family:BigBlue, monospace;

}

h2 {

    font-size: clamp(100%, 1rem + 2vw, 35px);
    color: rgb(0, 179, 0);;
    font-weight: 300;
    text-align: left;
    margin-bottom: 15px;
    font-family:BigBlue, monospace;

}

h3 {

    font-size: clamp(100%, 1rem + 2vw, 25px);
    color: rgb(0, 179, 0);;
    font-weight: 300;
    text-align: left;
    margin-bottom: 15px;
    font-family:BigBlue, monospace;

}

h4 {

  font-size: clamp(100%, 1rem + 2vw, 13px);
  color: rgb(0, 179, 0);;
  font-weight: 300;
  text-align: left;
  margin-bottom: 15px;
    font-family:BigBlue, monospace;

}

.albumcontainer {

  display:grid;
  align-items: center; 
  justify-content: left;
  display:flex;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 15px;

}

.albumtext {

  font-size: 20px;
  padding-left: 20px;

}

a {

    font-size: clamp(100%, 1rem + 2vw, 15px);
    color: rgb(0, 179, 0);;
    font-weight: 300;
    text-align: left;
    margin-bottom: 15px;
    font-family:BigBlue, monospace;


}

p {

    font-size: clamp(100%, 1rem + 2vw, 20px);
    color: rgb(0, 179, 0);
    font-weight: 300;
    text-align: left;
    margin-bottom: 15px;
    font-family:BigBlue, monospace;


}

li {

  font-size: clamp(100%, 1rem + 2vw, 20px);
  color: rgb(0, 179, 0);
  font-weight: 300;
  text-align: left;
  margin-bottom: 15px;
  font-family:BigBlue, monospace;


}


  a:link {
    color: rgb(0, 179, 0);
  }
  

  /* mouse over link */
  a:hover {
    background-color: rgb(0, 179, 0);
    color: black;
  }
  
  /* selected link */
  a:active {
    color: rgb(0, 179, 0);
  }

  ::selection {
    font-size: 2em;
    color: black;
    background-color: rgb(0, 179, 0);; 
  }

  .embeds {

    text-align: center;
    margin: auto;

  }

  .projects {

    padding-left: 4%;
    padding-right: 4%;
    border-left: 4px solid rgb(0, 179, 0);
    border-right: 4px solid rgb(0, 179, 0);
    border-bottom: 4px solid rgb(0, 179, 0);
    padding-bottom:1%;

  }

  .infos {

    padding-left: 4%;

  }

  .projectcontainer {

    padding-bottom: 1%;
    padding-top: 1%;

  }

  #infocontainer {

    padding-bottom: 20%;

  }
  
  .projectimage {
    border: 4px solid rgb(0, 179, 0);
    
  }

  #cursor p::after {
    content: "";
    width: 7px;
    height: 14px;
    background: green;
    display: inline-block;
    animation: cursor-blink 1.5s steps(2) infinite;

  }

   #cursor p {
    align-items: center;
    gap: 2px;
  }

  @keyframes cursor-blink {
    0% {
      opacity: 0;
    }
  }

  @keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }
  @keyframes textShadow {
    0% {
      text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    5% {
      text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    10% {
      text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    15% {
      text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    20% {
      text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    25% {
      text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    30% {
      text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    35% {
      text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    40% {
      text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    45% {
      text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    50% {
      text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    55% {
      text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    60% {
      text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    65% {
      text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    70% {
      text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    75% {
      text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    80% {
      text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    85% {
      text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    90% {
      text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    95% {
      text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
    100% {
      text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
    }
  }
  .crt {
    animation: textShadow 20.6s infinite;
  }
    .crt:before,
    .crt:after {
      display: block;
      pointer-events: none;
      content: "";
      /* use fixed so the overlay covers the viewport even when scrolling */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000; /* reasonable, non-overflowing z-index */
    }
    .crt:before {
      /* thin moving scanline across the viewport */
      height: 2px;
      z-index: 10002;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0.75;
      animation: scanline 6s linear infinite;
    }
    .crt:after {
      z-index: 10001;
      background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 51%
      );
      background-size: 100% 4px;
      animation: scanlines 1s steps(60) infinite;
    }

  /* ANIMATE UNIQUE SCANLINE */
  @keyframes scanline {
      0% {
          transform: translate3d(0, 200000%, 0);
      }
  }
  @keyframes scanlines {
      0% {
          background-position: 0 100%;
      }
  }

  .large-image {
     box-shadow: 1px 1px 3px 3px rgb(255, 255, 255);;

 
  }

  .large {
    position: absolute;
    display:none;

  }

  .card:hover .large {
    max-width: 25%;
    min-width: 25%;
    padding-right: 10%;
    display:inherit;

  }

  .container{

  padding-right:15%;


  }

  
#boredring table {
  background-color: #0b0b0b; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  image-rendering: pixelated;
  color: white;
  border: 3px solid rgb(0, 179, 0);;
}

#boredring .webring-prev {
  text-align:right;
  font-family:BigBlue, monospace;
}

#boredring .webring-info {
   text-align:center;
   font-family:BigBlue, monospace;
  }

#boredring .webring-next {
  text-align:left;
  font-family:BigBlue, monospace;
}

#boredring a {
  color: rgb(0, 179, 0);;
}

#boredring p {
    font-family:BigBlue, monospace;
    font-size: clamp(100%, 0.75rem + 1.75vw, 10px);
}

.title {
  height: 20px;
}

.badge-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.badge-marquee .badge-track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  will-change: transform;
  animation: badge-marquee-slide-right linear infinite;
  animation-duration: var(--badge-marquee-duration, 100s);
}

.badge-marquee .badge-track img {
  flex: 0 0 auto;
  height: auto;
}



@keyframes badge-marquee-slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.box {
  background-color: #191919;
  border: 1px solid #ff4500;
  padding: 8px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}
img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

#contact {
  margin:auto;
  padding-top:1%;
}

.link {
  margin-right: 15px;
}

#breadcrumbs {
  font-size: clamp(100%, 1rem + 2vw, 25px);
  color: rgb(0, 179, 0);;
  font-weight: 300;
  text-align: left;
  margin-bottom: 15px;
  font-family:BigBlue, monospace;
}

#hit {

  display: grid;
  margin-left: auto;
  margin-right: auto;
  align-items:center;
  width:12.77rem;
  height:4.5rem;

}