* {
  margin:          0px;
  padding:         0px;
  border:          0px;
  border-collapse: collapse;
  color:           #ffffff;
}

body {
  background-color: #161616;
}

body::-webkit-scrollbar {
  display: none;
}

div#sidebar {
  width: 460px;
  height: 100%;
  position: fixed;
  overflow-y: scroll;
}

div#sidebar::-webkit-scrollbar {
  display: none;
}

div#main {
  margin-left: 460px;
}

div.image-outer {
  width: 300px;
  display: inline-block;
  position: relative;
  float: left;
}

div.image {
  height: 450px;
}

div.image-old {
  position: absolute;
  width: 300px;
  top: 0px;
}

div.image-bg-blur {
  background-repeat: round;
  background-size: cover;
  width: 300px;
  vertical-align: top;
  background-color: rgba(0, 0, 0, 0.75);
  background-blend-mode: color;
  display:  inline-block;
  margin:   0px;
  display: block;
  height: 450px;
  filter: blur(5px);
}

div#filter {
  position: fixed;
  inset: 0;

  z-index: 9999;

  width: 100%;
  height: 100%;
  pointer-events: none;
}

div#filter-inner {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  /* Optional styling */
  background: rgba(0, 0, 0, 0.13);
}

input#filterBox {
  color: #999;
  background: rgba(0,0,0,0.80);
  border: #111111 1px solid;
  padding: 0.5em;
  font-size: 2em;
  pointer-events: auto;
  
  &:focus-visible {
    color: #BBB;
    border: #111111 1px solid;
    outline: #242424;
    border-radius: 3px;
  }
  
  &::selection {
    color: #BBB;
    background: rgba(100,100,100,0.50);
  }  

  &::placeholder {
    color: #666;
  }
}

a.a-old {
  width:  300px;
  height: 310px;
  display: block;
  padding-top: 140px;
}

h1 { /* Headers */
  font-family: monospace;
}

h2 { /* Sale/Discount */
  position:        absolute;
  top:                  0px;
  text-align:        center;
  font-size:           32px;
  background-color: #2255bb;
  color:            #aaff33;
  width:               100%;
}

h3 { /* Special K logo */
  height:           96px;
  width:            96px;
  bottom:            0px;
  right:             0px;
  position:     absolute;
  /*
  transform: translate(-5%,5%);
  opacity:          100%;
  background-color: none;
  animation-name: wobble; 
  animation-duration: 2.8s;
  animation-iteration-count: infinite;
  */
}

h4 { /* Blame Denuvo... /s */
  position:        absolute;
  bottom:               0px;
  left:                 0px;
  text-align:        center;
  font-size:           24px;
  background-color: #111111;
  color:            #ffee22;
  font-family:      "Comic Sans MS", "Comic Sans", cursive;
}

@keyframes wobble {
  0%   {right:98%;  top:58%;}
  25%  {right:99%;  top:59%;}
  50%  {right:100%; top:60%;opacity: 90%}
  75%  {right:99%;  top:59%;}
  100% {right:98%;  top:58%;}
}