/* Public buttons */
button-simple {
  padding: 8px 15px;
  background-color: #5c5a5a;
  background: linear-gradient(to bottom, #737071, #5c5a5a);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.button-simple:hover {
  background-color: #363535;
  transform: scale(1.05);
  background: linear-gradient(to bottom, #5c5a5a, #3b3b3b);
}
.button-gradient {
  padding: 10px 20px;
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient colors */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.button-gradient:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}
.button-outline {
  padding: 10px 20px;
  background-color: transparent;
  color: #007BFF; /* Blue text */
  border: 2px solid #007BFF;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button-outline:hover {
  background-color: #007BFF; /* Blue background */
  color: white;
}
.button-neon {
  padding: 10px 20px;
  background-color: #111;
  color: #0ff;
  border: 2px solid #0ff;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
  transition: box-shadow 0.3s ease;
}

.button-neon:hover {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}
.button-3d {
  padding: 10px 20px;
  background-color: #ff5722;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px #d84315;
  transition: all 0.2s ease;
}

.button-3d:active {
  box-shadow: 0 2px #d84315;
  transform: translateY(3px); /* Pushes the button down */
}
.button-glass {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px); /* Creates a glass effect */
  transition: background 0.3s ease;
}

.button-glass:hover {
  background: rgba(255, 255, 255, 0.4);
}

.glass-button {
  padding: 8px 15px;
  background-color: #5c5a5a;
  background: linear-gradient(to bottom, #737071, #5c5a5a);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.glass-button:hover {
  background-color: #363535;
  background: linear-gradient(to bottom, #5c5a5a, #3b3b3b);
}

/* Legacy buttons */
.y2k-button {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF !important;
    background-color: #363636;
    border: 1px solid #292929;
    border-top-color: #949494;
    border-left-color: #949494;
    cursor: pointer;
}

.y2k-button:hover {
    background-color: #4d4d4d;
    color: #FFFF00 !important;
    text-decoration: none;
    border: 1px solid #363636;
    border-top-color: #949494;
    border-left-color: #949494;
}

.y2k-gif-button {
    display: inline-block;
    border: 0;
    margin: 2px;
    cursor: pointer;
}

.y2k-gif-button:hover {
    filter: brightness(1.2);
}

.nav-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #000033;
    border: 1px outset #6600CC;
    cursor: pointer;
}

.nav-button:hover {
    background-color: #330066;
    color: #FFFF00;
    border: 1px inset #6600CC;
}

.download-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    background-color: #FFCC00;
    border: 2px solid #FF9900;
    border-top-color: #FFFF00;
    border-left-color: #FFFF00;
    cursor: pointer;
}

.download-button:hover {
    background-color: #FFFF00;
    color: #FF0000;
    border: 2px solid #FFCC00;
    text-decoration: underline;
}

.emulator-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    background: linear-gradient(to bottom, #0066CC, #003366);
    border: 1px solid #0099FF;
    border-top-color: #00CCFF;
    border-left-color: #00CCFF;
    cursor: pointer;
}

.emulator-button:hover {
    background: linear-gradient(to bottom, #0099FF, #0066CC);
    color: #FFFF00;
    border: 1px solid #00CCFF;
}

.alert-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #FF0000;
    border: 1px solid #FF6600;
    border-top-color: #FF9933;
    border-left-color: #FF9933;
    animation: blink 1s step-end infinite;
    cursor: pointer;
}

.alert-button:hover {
    background-color: #FF3300;
    color: #FFFF00;
    border: 1px solid #FF9933;
}

.retro3d-button {
    display: inline-block;
    padding: 4px 12px;
    margin: 3px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    background-color: #CCCCCC;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #666666;
    border-bottom: 2px solid #666666;
    cursor: pointer;
}

.retro3d-button:hover {
    background-color: #DDDDDD;
    color: #000000;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
}

.retro3d-button:active {
    border-top: 2px solid #666666;
    border-left: 2px solid #666666;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}

/* Blink */
@keyframes blink {
    50% { opacity: 0.7; }
}

.button-with-icon {
    padding-left: 24px;
    background-repeat: no-repeat;
    background-position: 4px center;
    background-size: 16px 16px;
}

/* Common button icons */
.download-icon {
    background-image: url('https://web.archive.org/web/20091027042511/http://geocities.com:80/SoHo/Studios/7964/icon_download.gif');
}

.home-icon {
    background-image: url('https://web.archive.org/web/20091027042511/http://geocities.com:80/SoHo/Studios/7964/icon_home.gif');
}

.email-icon {
    background-image: url('https://web.archive.org/web/20091027042511/http://geocities.com:80/SoHo/Studios/7964/icon_email.gif');
}

.glow-button {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    background-color: #00CCFF;
    border: 1px solid #0066FF;
    animation: glow 2s infinite alternate;
    cursor: pointer;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px #0066FF;
    }
    to {
        box-shadow: 0 0 10px #00CCFF, 0 0 20px #0066FF;
    }
}

.pixel-button {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: inline-block;
    width: 88px;
    height: 31px;
    background-image: url('https://web.archive.org/web/20091027042511/http://geocities.com:80/SoHo/Studios/7964/pixel_button.gif');
    border: 0;
    cursor: pointer;
}

.pixel-button:hover {
    filter: brightness(1.2);
}