@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&family=Jacquard+24&family=Jacquarda+Bastarda+9&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Press+Start+2P&family=VT323&display=swap');

html { 
  background-color: #000;
}

body { background: none; color: #1d960d; font-family: "Space Mono", monospace; font-weight: 400; font-style: normal;}
a { color: #1d960d; }

h1, h1 a { text-decoration: none; color: #fff!important; font-family: "Jacquard 12", system-ui; font-size: 30pt; text-shadow: 2px 2px 0px #1d960d;}

.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:visited {
    background-color: #1d960d !important;
    color: #FFF !important;
}

.btn-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:visited {
    background-color: #342894 !important;
	color: #FFF !important;
}

header {
  width: 100%;
  height: 70px;
  box-shadow: inset 0px 3px 15px 13px #150100;
  background: url('/img/advent-calendar/2025/pexels-pixabay-326333.jpg') repeat;
}

header nav { z-index: 8;}
header .btn { font-family: "VT323", monospace; font-size: x-large; text-transform: uppercase; } 

#about-modal .modal-content { background-color: #050505; color: #1d960d; }
#about-modal .modal-header { border-bottom: #1d960d 2px solid; }
#about-modal .modal-footer { border-top: 0; }
#about-modal h3 { color: #1d960d; font-family: "Jacquard 12", system-ui; }

#lights {
  position: absolute;
  top: 20px;
  width: 100%;
  z-index: -99;
}

#tabletop {
  bottom: 50px;
  z-index: 1;
}

.computer, .shelf { 
  width: 100%;
}

.ledge {
  border-bottom: 250px solid #000;
  border-left: 220px solid transparent;
  border-right: 220px solid transparent;
  height: 0;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: -9999;
}

.pane-left {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: -99999;
  width: 220px;
  height: 100%;
}

.pane-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: -99999;
  width: 220px;
  height: 100%;
}

#game-shelf .row {
  border-left: 15px #000 solid;
  border-right: 15px #000 solid;
  border-bottom: 15px #000 solid;
  background-image: url('/img/advent-calendar/2025/shelf-back.png');
}

#game-shelf .shelf-top {
  border-top: 15px #000 solid;
  background-image: url('/img/advent-calendar/2025/shelf-back.png');
}

.shelf-bottom {
  width: 100%;
  height: 15px;
  background-image: url('/img/advent-calendar/2025/shelf-grain.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  box-shadow: inset -5px 3px 5px 0px #150100;
}

.open-gift {
  cursor: pointer;
}

#computer-monitor { 
  position: fixed;
  margin: 50px 60px;
  max-width: 405px;
  max-height: 405px;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
  overflow: auto;
}

#computer-monitor::-webkit-scrollbar { padding-left: 5px; width: 9px; height: 3px; background: #050505; border: 1px solid #1d960d;}
#computer-monitor::-webkit-scrollbar-thumb {background-color:#1d960d ; border: 1px solid #1d960d;}

#computer-controls { 
  position: fixed;
  margin-top: 500px;
  margin-left: 60px;
  max-width: 405px;
  width: 100%;
}

#computer-controls .music {
  height: 70px;
  width: 100px;
}

#computer-controls .tuning {
  height: 30px;
  width: 60px;
  margin-top: 5%;
  margin-right: 20px;
}

#computer-controls .tuning .computer-btn {
  height: 30px;
  width: 30px;
}

#computer-controls .music:hover, #computer-controls .tuning .computer-btn:hover {
  background-color: rgba(52, 40, 148, 0.70);
  cursor: pointer;
}

#crt-header {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
  border-bottom: #1d960d 2px solid;
  background-color: #050505;
}

#game-name {
  font-family: "Jacquard 12", system-ui;
  font-size: 28pt;
  font-weight: 400;
  font-style: normal;
}

#game-genre {
  font-weight: 600;
}

#game-image {
  filter: saturate(1) contrast(250) hue-rotate(330deg);
  image-rendering: pixelated;
}

.gift-image {
  max-height: 80px;
}

.outside { 
  background: url('/img/advent-calendar/2025/background.gif') #000 no-repeat top center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 40%;
}

.black {
  background: #000;
}

.logo-glow {
	height: 40px;
}

.glass {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.glass-dark {
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.wood-pattern { 
	background: url('/img/advent-calendar/2025/pexels-pixabay-326333.jpg') repeat; box-shadow: inset 10px 10px 10px rgba(37, 24, 79, 0.6);}

.pause-animation {
   -webkit-animation-play-state: paused !important; 
   -moz-animation-play-state: paused !important; 
   -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}


.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

/* .crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
} */
.crt {
  animation: textShadow 1.6s infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@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;
  }
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@media screen and (prefers-reduced-motion) { 
	.flicker { animation: none; }
    .shake { animation: none; }
    .blink { animation: none; }
    .crt { animation: none; }
}

@media (max-width: 1399.98px) {
  #computer-monitor { 
    margin: 35px 45px;
    max-width: 360px;
    max-height: 360px;
  }
  #computer-controls { 
    margin-top: 420px;
    margin-left: 45px;
    max-width: 360px;
  }
}

@media (max-width: 1199.98px) {
  #computer-monitor { 
    margin: 30px 40px;
    max-width: 300px;
    max-height: 300px;
  }
  #computer-controls { 
    margin-top: 350px;
    margin-left: 35px;
    max-width: 300px;
  }
  #computer-controls .tuning {
    margin-top: 5%;
    margin-right: 5px;
  }
  .ledge {  border-left: 180px solid transparent;  border-right: 180px solid transparent;}
  .pane-left,.pane-right { width: 180px; }
}

@media (max-width: 991.98px) {
  #computer-monitor { 
    margin: 70px 100px;
    max-width: 500px;
    max-height: 500px;
  }
  #computer-controls { 
    margin-top: 670px;
    margin-left: 90px;
    max-width: 540px;
  }
  #computer-controls .tuning {
    margin-top: 5%;
    margin-right: 50px;
  }
  #lights {top: 50px;}
  #game-shelf {position:static !important; width:700px; }
  #tabletop.fixed-bottom { position: static; }
  .ledge {  border-left: 160px solid transparent;  border-right: 160px solid transparent;}
  .pane-left,.pane-right { width: 160px; }
}

@media (max-width: 767.98px) {
  #computer-monitor { 
    margin: 50px 60px;
    max-width: 400px;
    max-height: 400px;
  }
  #computer-controls { 
    margin-top: 490px;
    margin-left: 60px;
    max-width: 400px;
  }
  #computer-controls .tuning {
    margin-top: 5%;
    margin-right: 20px;
  }
  #lights {top: 50px;}
  #game-image { width: 50% !important;}
  #game-shelf {position:static !important; width:510px;}
  #game-shelf .row>* { width: auto; }
  #game-shelf .row>*.shelf-bottom { width: 100%; }
  #tabletop.fixed-bottom { position: static; }
  .ledge {  border-left: 100px solid transparent;  border-right: 100px solid transparent;}
  .pane-left,.pane-right { width: 100px; }
}

@media (max-width: 575.98px) {
  #computer-monitor { 
    margin: 40px 50px;
    max-width: 280px;
    max-height: 280px;
  }
  #computer-controls { 
    margin-top: 345px;
    margin-left: 50px;
    max-width: 280px;
  }
  #computer-controls .tuning {
    margin-top: 5%;
    margin-right: 10px;
  }
  #lights {top: 60px;}
  #game-image { width: 50% !important;}
  #game-shelf {position:static !important; width:350px; }
  #game-shelf .row>* { width: auto; }
  #game-shelf .row>*.shelf-bottom { width: 100%; }
  #tabletop.fixed-bottom { position: static; }
  .ledge {  border-left: 70px solid transparent;  border-right: 70px solid transparent;}
  .pane-left,.pane-right { width: 70px; }
}