/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: #000000; /* Dark background */
    background-image: url('https://ritasdoghouse.neocities.org/R.gif');
    
    color: #00FF00; /* Neon green text */
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center; /* All content is centered, a classic 2000s layout choice */
}

body { cursor: url('https://neocities.org/site_thumbnails/11/50/ritasdoghouse/cursor.png.210x158.webp'), auto;
}

#container {
    width: 800px; /* Fixed width is very 2000s */
    margin: 20px auto;
    background-image: url('https://ritasdoghouse.neocities.org/Galaxy.gif'); /* Dark blue content background */
    border: 3px solid #FFCC00; /* Bright yellow border */
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

#header {
    margin-bottom: 20px;
}

#navigation {
    background-color: #0066CC; /* Blue navigation bar */
    border-top: 2px dashed #00FF00;
    border-bottom: 2px dashed #00FF00;
    padding: 5px;
    margin-bottom: 20px;
}

#navigation a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    padding: 0 10px;
}

#navigation a:hover {
    color: #FFCC00;
}

.section-box {
    background-color: #000066; /* Slightly lighter dark blue for sections */
    border: 1px solid #FFCC00;
    padding: 15px;
    margin-bottom: 20px;
}

h2 {
    color: #FFCC00;
    font-family: "Impact", sans-serif;
    text-shadow: 2px 2px #000000;
    border-bottom: 1px dotted #FFCC00;
    padding-bottom: 5px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.gallery-item {
    background-color: #003366;
    border: 1px solid #00FFFF;
    padding: 5px;
}

.gallery-item img {
    border: 2px solid #FFCC00;
}

.music-player {
    text-align: left;
    margin-left: 20px;
}

audio {
    width: 90%;
    margin: 5px 0;
}

#personal-videos {
  margin-top: 50px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive;
  color: #fff;
  background: linear-gradient(to bottom, #000000, #1a1a1a);
  padding: 20px;
  border-top: 4px dashed #00ffff;
}

.video-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.video-box {
  width: 320px;
  background: #000;
  border: 4px solid #00ffff;
  box-shadow: 0 0 20px #00ffff;
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-box:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 0 30px #ff00cc, 0 0 10px #00ffff inset;
}

.video-box video {
  width: 100%;
  height: auto;
  border: none;
}


#video-section {
  margin-top: 50px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive;
  color: #fff;
  background: linear-gradient(to bottom, #000000, #1a1a1a);
  padding: 20px;
  border-top: 4px dashed #ff00cc;
}

.video-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.video-box {
  position: relative;
  width: 320px;
  height: 180px;
  border: 4px solid #ff00cc;
  box-shadow: 0 0 20px #ff00cc;
  background: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-box:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 0 30px #00ffff, 0 0 10px #ff00cc inset;
}

.video-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#flash-games {
  margin-top: 50px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive;
  color: #fff;
  background: linear-gradient(to bottom, #1a1a1a, #000000);
  padding: 20px;
  border-top: 4px dashed #00ffff;
}

.flash-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flash-box {
  background: #000;
  border: 4px solid #00ffff;
  box-shadow: 0 0 20px #00ffff;
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flash-box:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 0 30px #ff00cc, 0 0 10px #00ffff inset;
}

.flash-box.hidden {
  display: none;
}

#load-more {
  margin-top: 20px;
  padding: 10px 20px;
  font-family: 'Comic Sans MS', cursive;
  background-color: #ff00cc;
  color: #fff;
  border: 2px dashed #00ffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#load-more:hover {
  background-color: #00ffff;
  color: #000;
}

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #FF00FF;
  color: white;
  border: none;
  padding: 10px 15px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 5px #FF00FF;
  z-index: 999;
}

#skynetImage:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 0 20px #FF0000;
}

#aiMessage:hover {
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #FF0000;
  }
  to {
    text-shadow: 0 0 20px #FF00FF;
  }
}

#footer {
    border-top: 2px dashed #00FF00;
    padding-top: 10px;
    margin-top: 20px;
    font-size: 12px;
}

.construction {
    padding: 10px;
}