:root {
  --color-50: #EEE6FF;
  --color-100: #D1B8FF;
  --color-200: #B38AFF;
  --color-300: #955CFF;
  --color-400: #772EFF;
  --color-500: #5B00FF;
  --color-600: #4900D1;
  --color-700: #3900A3;
  --color-800: #290075;
  --color-900: #190047;
  --color-950: #09001A;
}

body {
  margin: 0;
  background-image: url('./images/starsbg.gif');
  animation: moveBg 15s ease infinite;
  background-attachment: fixed;
  color: var(--color-50);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  display: flex;
  justify-content: center;
}

@keyframes moveBg {
  0%   { background-position: 0 0; }
  50%  { background-position: 100px 100px; }
  100% { background-position: 0 0; }
  150% { background-position: -100px 50px; }
  200% { background-position: 0 0; }
}

.page-wrapper {
  width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner img {
  width: 100%;
  height: auto;
  border: none;
}

.vistawin {
  image-rendering: pixelated;
  border-image-source: url('./images/shegonebudvistawindow9slicefull.png');
  border-image-slice: 11 11 11 11 fill;
  border-image-width: 50px;
  border-image-repeat: repeat;
  width: 100%;
  color: var(--color-900);
  font-family: 'Ms Ui Gothic', sans-serif;
  text-align: center;
}

.main-layout {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  gap: 10px;
  width: 100%;
}

.sidebar, .main-content, .news-panel {
  background-color: var(--color-950);
  border: 3px solid var(--color-400);
  padding: 15px;
  box-shadow: 0 0 12px var(--color-600);
}

.main-content{
  background-image: url(https://www.cameronsworld.net/img/content/32/bg.png);
  text-align: center;
}

@font-face {
  font-family: NickFont;
  src: url('./images/NicksFlashFont-Regular.ttf');
}

.footer {
  background-color: var(--color-950);
  border: 3px solid var(--color-400);
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 0 12px var(--color-600);
}

.aero-button {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 20px;
  color: #1a1a1a;
  font-family: NickFont;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #ffe46b 0%, #ffc600 45%, #c38e00 100%);
  border: 2px solid #3a2a00;
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: visible;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin: 0;
  z-index: 1;
}

.aero-button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 9px;
  height: 40%;
  width: 96%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.aero-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-20%) translateY(-50%) scale(0);
  width: 32px;
  height: 32px;
  background-image: url("./images/swagarrow2.gif");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
  z-index: 5;
}

.aero-button:hover {
  background: linear-gradient(to bottom, #fff07a 0%, #ffce00 45%, #d69a00 100%);
  transform: scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 10px #ffd94d,
    0 3px 6px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

.aero-button:hover::after {
  transform: translateX(-140%) translateY(-50%) scale(1.3);
  opacity: 1;
}

.aero-button:active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

#ns{
  scale: 2;
  position: relative;
  left: 72%;
  image-rendering: pixelated;
}

#coolst{
  scale: 2.4;
  position: relative;
  right: 15%;
  image-rendering: pixelated;
}

.nav{
  border:2px groove #ff0000;
  background: #000000; 
  --smoth: 20px;
  border-top-right-radius: var(--smoth);
  border-top-left-radius: var(--smoth);
}

.navtab{
  background-image: url(https://www.cameronsworld.net/img/content/32/left-wall/2.png);
  image-rendering: pixelated;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: white;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px red;
  text-align: center;
  border-top-right-radius: 19px;
  border-top-left-radius: 19px;
  font-size: 25px;
  font-style: italic;
  font-weight: bold;
}

.zombi-link {
  display: inline-block;
  position: relative;
  left: 20%;
  top: 43%;
  transition: transform 0.2s ease;
}

.zombi-base {
  width: 158px;
  height: 193px;
  image-rendering: smooth;
  display: block;
  transition: transform 0.2s ease;
}

.zombi-popup {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 200px;
  image-rendering: pixelated;
}

.zombi-link:hover .zombi-base {
  transform: scale(1.2);
  content: url("./images/zombe0002.png");
}

.zombi-link:hover .zombi-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

.news-panel{
  background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/purple/backg61(2).gif");
  background-size: 50%;
  image-rendering: pixelated;
}