/* =======================================================
   HYBRID CHROME + NEON 3D THEME (Reezbond.eu)
   Polished Metal • Neon Glow • 3D Depth
   ======================================================= */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Hide scrollbars */
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

/* Background: Soft Metallic + Neon Glow */
body {
  background: radial-gradient(circle at top, #0affea33, transparent 70%),
              linear-gradient(135deg, #cfcfcf, #e7e7e7 40%, #bebebe);
  color: #101010;
  font-family: "Segoe UI", Arial, sans-serif;
  padding: 15px;
}

/* Headings: Chrome + Glow */
h1, h2, h3, h4 {
  color: #ffffff;
  text-shadow:
    0 0 6px #0ff,
    0 0 12px #00ffee88,
    1px 1px 2px #000;
  margin-bottom: 10px;
}

/* =======================================================
   CHROME + NEON GLOW BUTTONS
   ======================================================= */
button,
a.button,
.dropbtn {
  background: linear-gradient(145deg, #f2f2f2, #cfcfcf);
  color: #111;
  font-weight: bold;
  font-size: 16px;

  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid #888;

  cursor: pointer;
  text-decoration: none;
  display: inline-block;

  /* Chrome depth + neon edges */
  box-shadow:
    /* 3D bevel */
    3px 3px 8px rgba(0,0,0,0.35),
    -3px -3px 8px rgba(255,255,255,0.9),
    /* Neon outer glow */
    0 0 10px #0ff,
    0 0 20px #0ff88,
    0 0 32px #0ff55,
    /* Chrome inner shine */
    inset 0 0 10px rgba(255,255,255,0.6);

  transition: all 0.25s ease;
}

button:hover,
a.button:hover,
.dropbtn:hover {
  background: linear-gradient(145deg, #ffffff, #d8d8d8);
  transform: translateY(-3px);
  box-shadow:
    6px 6px 14px rgba(0,0,0,0.45),
    -4px -4px 12px rgba(255,255,255,1),
    0 0 16px #0ff,
    0 0 32px #0ffbb,
    inset 0 0 16px rgba(255,255,255,0.7);
}

button:active,
a.button:active,
.dropbtn:active {
  transform: translateY(2px);
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.4),
    inset -3px -3px 6px rgba(255,255,255,0.5),
    0 0 8px #00ffee;
}


/* =======================================================
   INPUTS — Metallic + Neon Accent
   ======================================================= */
input[type="text"],
input[type="password"],
input[type="email"] {
  width: 260px;
  padding: 12px;
  font-size: 16px;

  border-radius: 10px;
  border: 1px solid #666;

  background: linear-gradient(145deg, #dfdfdf, #bdbdbd);

  color: #111;

  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.35),
    inset -3px -3px 6px rgba(255,255,255,0.6),
    0 0 8px #0ff22;

  transition: all 0.3s ease;
}

input:focus {
  border-color: #00ffee;
  box-shadow:
    0 0 12px #0ff,
    0 0 22px #0ff88;
}

/* =======================================================
   DROPDOWN — Chrome + Glow
   ======================================================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;

  background: linear-gradient(145deg, #efefef, #c8c8c8);
  border-radius: 14px;

  min-width: 200px;
  padding: 10px 0;

  border: 1px solid #777;

  box-shadow:
    4px 4px 12px rgba(0,0,0,0.35),
    -4px -4px 12px rgba(255,255,255,0.9),
    0 0 16px #00ffee66;

  z-index: 50;
}

.dropdown-content a {
  padding: 10px 16px;
  color: #000;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background: rgba(255,255,255,0.4);
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* =======================================================
   CARDS / SECTIONS — Chrome Panels
   ======================================================= */
.section,
.card {
  background: linear-gradient(145deg, #e6e6e6, #bfbfbf);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;

  border: 1px solid #747474;

  box-shadow:
    4px 4px 12px rgba(0,0,0,0.35),
    -4px -4px 12px rgba(255,255,255,0.9),
    0 0 20px #0ff33;
}


/* =======================================================
   EMBEDS — Chrome Frames
   ======================================================= */
iframe, video {
 


/* =======================================================
   FOOTER — Soft Neon Glow
   ======================================================= */
footer {
  text-align: center;
  padding: 10px;
  margin-top: 20px;

  color: #222;
  text-shadow:
    0 0 8px #0ff,
    0 0 12px #00ffee88;
}