/* NEOCITIES TEMPLATE STYLE */

:root {
  --bg-color: #5d4037;       /* Dark brown background */
  --container-bg: #fff8e1;   /* Cream container background */
  --text-color: #4e342e;     /* Dark text color */
  --accent-color: #8d6e63;   /* Light brown for borders */
  --highlight-color: #a1887f; /* Highlight color */
  --main-font: 'Courier New', Courier, monospace;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  /* background-image: url('your-bg.jpg'); */ /* UNCOMMENT THIS FOR BACKGROUND */
  background-size: cover;
  font-family: var(--main-font);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  cursor: crosshair;
}

.container {
  width: 90%;
  max-width: 600px;
  background-color: var(--container-bg);
  border: 8px solid var(--accent-color);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}

.header { text-align: center; border-bottom: 2px dashed var(--accent-color); padding-bottom: 15px; margin-bottom: 20px; }
.header h1 { margin: 0; font-size: 2em; }
.header p { margin: 5px 0 0; font-size: 0.9em; font-style: italic; }

.nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.nav a { text-decoration: none; color: var(--text-color); font-weight: bold; border: 1px dashed var(--accent-color); padding: 5px 10px; border-radius: 10px; transition: background 0.3s; }
.nav a:hover { background-color: var(--highlight-color); color: white; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.item { background: rgba(255, 255, 255, 0.5); border: 2px dashed var(--accent-color); border-radius: 15px; padding: 15px; text-align: center; cursor: pointer; position: relative; transition: transform 0.2s; }
.item:hover { transform: scale(1.02); background: rgba(255, 255, 255, 0.8); }
.item img { max-width: 80px; height: auto; display: block; margin: 0 auto 10px; }

/* MAIL ANIMATION */
.mail-container { position: relative; height: 120px; display: flex; justify-content: center; align-items: center; }
.envelope { width: 80px; z-index: 2; transition: transform 0.3s; }
.paper { position: absolute; width: 60px; height: 50px; background: white; border: 1px solid #ccc; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; transition: top 0.5s ease-in-out; display: flex; justify-content: center; align-items: center; font-size: 10px; }
.item:hover .paper { top: 20%; }

/* CAMERA ANIMATION (6 Photos) */
.camera-container { position: relative; height: 120px; display: flex; justify-content: center; align-items: center; }
.camera-img { width: 80px; z-index: 10; position: relative; }
.photo-pop { position: absolute; width: 50px; height: 40px; background: #eee; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); opacity: 0; transition: all 0.4s ease; z-index: 1; }

/* Fan Effect */
.item:hover .photo-1 { opacity: 1; transform: translate(-60px, -40px) rotate(-20deg); }
.item:hover .photo-2 { opacity: 1; transform: translate(-30px, -50px) rotate(-10deg); }
.item:hover .photo-3 { opacity: 1; transform: translate(0px, -60px) rotate(0deg); }
.item:hover .photo-4 { opacity: 1; transform: translate(30px, -50px) rotate(10deg); }
.item:hover .photo-5 { opacity: 1; transform: translate(60px, -40px) rotate(20deg); }
.item:hover .photo-6 { opacity: 1; transform: translate(0px, -20px) rotate(5deg); z-index: 0; }

.footer { text-align: center; font-size: 0.8em; margin-top: 20px; border-top: 2px dashed var(--accent-color); padding-top: 10px; }
audio { display: none; }

/* CLICK EFFECT */
.click-effect { position: fixed; pointer-events: none; animation: floatUp 1s ease-out forwards; font-size: 20px; z-index: 9999; }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(1.5); opacity: 0; } }
@media (max-width: 400px) { .grid { grid-template-columns: 1fr; } }