
    body {
      background-color: #000;
      background-image: 
      linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("images/full-images/checker-bg.jpg");
      background-repeat: repeat;
      background-attachment: fixed;
      background-size: 600px 600px;
      color: #fff;
      font-family: verdana, arial, sans-serif;
      line-height: 1.8em;
      margin: 0;
    }
    
    .profile-image-box {
      background: #0a0a0a;
      border: 2px solid #0066ff;
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    #nav-bar {
      background-color: #003;
      padding: 4px 10px;
      text-align: left;
      border-bottom: 2px solid #0066ff;
    }
    #nav-bar a {
      color: #fff;
      font-weight: bold;
      font-size: 15px;
      padding: 0 8px;
      text-decoration: none;
    }
    #nav-bar a:hover {
      text-decoration: underline;
      color: #00bfff;
    }
    #nav-bar span.nav-sep {
      color: #0044aa;
      padding: 0 2px;
    }

    .footer-bar {
      background-color: #003;
      padding: 8px;
      text-align: center;
      font-size: 12px;
      color: #446;
      margin-top: 10px;
      border-top: 2px solid #0066ff;
      line-height: 1.2em;
    }
    .footer-bar a {
      color: #0066ff;
      font-size: 12px;
     
    }
    .header-box {
      background: #003;
      border: 2px solid #0066ff;
      padding: 10px;
      text-align: center;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .about-box {
      background: #0a0a0a;
      border: 2px solid #0066ff;
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    .page-wrapper {
      max-width: 900px;
      margin: 10px auto;
    }

    .columns {
      display: flex;
      gap: 10px;
    }

    .left-column {
  width: 300px;
  display: flex;
  flex-direction: column;
}

    .right-column {
      flex: 1;
    }

    .about-header-box {
      background: #0a0a0a;
      border: 2px solid #0066ff;
      font-size: 15px;
      text-align: center;
      color:#00bfff;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .divider {
      text-align: center;
    }

    .contact-info {
       background: #0a0a0a;
      border: 2px solid #0066ff;
      font-size: 15px;
      color:#00bfff;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 10px;
      text-align: center;
    }

  .contact-info a:hover {
    color: #fff;

  }

  .contact-info a {
    color: #00bfff;
  }

  .images-1 {
    background:#0a0a0a;
    border: 2px solid #0066ff;
    display: flex;
    gap: 45px;
    padding: 10px;
  }

  .images-2 {
    background:#0a0a0a;
    border: 2px solid #0066ff;
    display: flex;
    gap: 45px;
    justify-content: center;
    padding: 10px;
    margin-top: 10px;
    align-items: center;
  }

  .blinkies-1 {
    background:#0a0a0a;
    border: 2px solid #0066ff;
    padding: 10px;
    margin-top: 10px;
    justify-content: center;
    text-align: center;
  }

.profile-image-box img {
  width: 100%;
  display: block;
}

  .side-box img {
  margin-top: 35px;
}

.blog {
  background: #0a0a0a;
    border: 2px solid #0066ff;
    color: #00bfff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    flex: 1;
    aspect-ratio: 1;
    margin-top: 10px;
}

.blog-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-items: center;
  margin-top: 10px;
}

.blog-images .wide {
  grid-column: span 2;
  width: 210px;
  height: auto;
  margin-bottom: 10px;
}

.blog-images img {
  width: 100px;
  height: 100px;
}

.blog a {
  color:#00bfff
}

.blog a:hover {
  color:#fff
}

  .gallery {
    background: #0a0a0a;
    border: 2px solid #0066ff;
    color: #00bfff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    flex: 1;
    aspect-ratio: 1;
    margin-top: 10px;
  }

  .gallery a {
    color: #00bfff;
  }

  .gallery a:hover {
    color: #fff;
  }

.gallery-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }

.side-box {
    background: #0a0a0a;
    border: 2px solid #0066ff;
    text-align: center;
    flex: 1;
    aspect-ratio: 1;
    margin-top: 10px;
  }

.video-box {
    background: #0a0a0a;
    border: 2px solid #0066ff;
    text-align: center;
    flex: 1;
    color:#fff;
    font-size: 14px;
    aspect-ratio: 1;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
  }

  .video-box iframe {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    font-size: 14px;
  }

  .no-more {
    background: #0a0a0a;
    border: 2px solid #0066ff;
    color: #00bfff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
  }

  .no-more a {
    color: #00bfff;
  }

  .no-more a:hover {
    color: #fff;
  }

  .art-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .art-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.15s;
    cursor: pointer; 
  }

  #art-dialog {
    background: #0a0a0a;
    border: 2px solid #0066ff;
    padding: 10px;
    width: 700px;
    color:#fff;
  }

  #art-dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
  }

#close-gallery, #close-big, #close-welcome {
  background: #003;
  color: #00bfff;
  border: 2px solid #0066ff;
  border-radius: 0;
  font-family:verdana, arial, sans-serif;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 14px;
display: block;
  margin-left: auto;
  margin-bottom: 10px;
}

#close-gallery:hover, #close-big:hover, #close-welcome:hover {
  background: #0066ff;
  color: #fff;
}

#art-dialog p {
  text-align: center;
  font-size: 14px;
  color: #00bfff;
  margin-bottom: 0px;
  text-align: center;
  font-weight: bold;
}

#big-dialog {
  background: #0a0a0a;
  border: 2px solid #0066ff;
  padding: 10px;
  max-width: 90vw;
  max-height: 90vh;
  cursor: pointer;
  color:#fff;
  text-align: center;
  font-weight: bold;
}

#big-dialog img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
}

#big-dialog::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.art-grid img:hover {
    transform: scale(1.08);
    outline: 2px solid #00bfff;
}

.lower-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
}

.lower-left,
.lower-right {
  flex: 1;
  background: #0a0a0a;
  border: 2px solid #0066ff;
  padding: 10px;
  font-weight: bold;
  font-size: 14px;
}

.monster,
.gif-row {
  flex: 1;
  background: #0a0a0a;
  border: 2px solid #0066ff;
  padding: 10px;
  color:#00bfff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

.monster a {
    color: #00bfff;
  }

  .monster a:hover {
    color: #fff;
  }

.monster p {
  margin: 0;
}

  .monster img {
  width: 150px;
  height: auto;
  display: block;
  margin: -15px auto 0;
}

.gif-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}


.music {
  background: #0a0a0a;
  border: 2px solid #0066ff;
  padding: 10px;
  color: #00bfff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

.music ul {
  margin: 5px 0 0;
  padding-left: 20px;
  text-align: left;
  color: #fff;
}

.album {
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  margin-top: 10px;
}

.album img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
}

.album-info {
  color: #fff;
  font-weight: normal;
}

.album-info .song {
  color: #00bfff;
  font-weight: bold;
}

#welcome-dialog {
  background: #0a0a0a;
  border: 2px solid #0066ff;
  padding: 10px;
  max-width: 450px;
  color: #fff;
  font-size: 14px;
}

#welcome-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.welcome-header {
  background: #003;
  border: 2px solid #0066ff;
  color: #00bfff;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 4px;
  margin-bottom: 10px;
}

#welcome-dialog p {
  margin: 0 0 10px;
}

#close-welcome {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}


#close-gallery:focus-visible,
#close-big:focus-visible,
#close-welcome:focus-visible {
  outline: 2px solid #00bfff;
  outline-offset: 0;
  border-radius: 0;
}
