/* Reset */
* { 
    box-sizing: border-box; 
}

.skipLink {
  position: absolute;
  left: -999px;
  top: 10px;
  padding: 12px 16px;
  z-index: 9999;
}

.skipLink:focus,
.skipLink:focus-visible {
  left: 10px;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible {
  outline: 3px solid #FFD54F;
  outline-offset: 2px;
  border-radius: 4px;
}

html, body { 
    height: 100%; 
}

body { 
    margin: 0; 
    color: white;
}

/* Typography */
h1 {
  font-size: 3rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 1.75rem;
}

/* Breaking news ticker */
.news-wrapper {
  background: #264bff;
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  image-rendering: pixelated;
}

.news-content {
  display: flex;
  height: 100%;
  white-space: nowrap;
  animation: cityScroll 18s linear infinite;
  will-change: transform;
}

.news-item {
  font-size: 1.75rem;
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 100%;
}

.news-separator {
  width: 12px;
  height: 100%;
  background: white;
  margin: 0 15px;
}

/* News ticker animation */
@keyframes cityScroll{
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

@font-face {
  font-family: 'CyberpunkWaifus';
  src: local('CyberpunkWaifus'),
       url('../fonts/CyberpunkWaifus.woff2') format('woff2'),
       url('../fonts/CyberpunkWaifus.woff') format('woff'),
       url('../fonts/CyberpunkWaifus.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  background: url('../images/pixelart_starfield.png');
  font-family: "CyberpunkWaifus", monospace;
  text-shadow: 1px 0 0 rgba(120,120,120,0.85), 0 1px 0 rgba(120,120,120,0.85);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Footer */
footer {
  margin-top: auto;
  padding-top: 3rem;
  font-family: "Comic Sans MS", cursive;
  font-size: 2rem;
  text-align: center;
}

footer p {
  margin: 1rem 0;
}

.footer-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer-logo {
  width: 8vw;
  max-width: 100px;
  height: auto;
}

.footer-images {
  padding: 1rem;
}

.laptop {
  max-width: 50px;
}

/* Floating GIFs */
.floating-gif {
  position: fixed;
  z-index: 9400; /* below CRT (9999) but above most stuff */
  pointer-events: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(2, 190, 128, 0.35));
}