@import url("https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=VT323&display=swap");
@import url("partials/top-nav.css");
@import url("partials/title.css");
@import url("partials/open-section.css");
@import url("partials/upload-section.css");
@import url("partials/new-doc-form.css");
@import url("partials/my-docs.css");
@import url("partials/editor.css");
@import url("partials/footer.css");
@import url("partials/home.css");
@import url("partials/sidebar.css");
@import url("partials/animations.css");
@import url("partials/profile.css");
@import url("partials/error.css");
@import url("partials/about.css"); /* Add this line to import the about page styles */

:root {
  --bg-dark: #18181b;
  --bg-darker: #09090b;
  --bg-medium: #27272a;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --accent-green: #4ade80;
  --accent-green-dark: #16a34a;
  --accent-purple: #9333ea;
  --accent-purple-light: #a855f7;
  --border-color: #3f3f46;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: "Cousine", monospace;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.font-pixel {
  font-family: "VT323", monospace;
}

/* Retro grid pattern */
.bg-grid-pattern {
  background-image: linear-gradient(rgba(74, 222, 128, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Button glow effect */
.glow-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.glow-purple:hover {
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

.container {
  display: flex;
  flex: 1;
  width: 100%;
  position: relative;
  margin-top: 60px; /* Match header height */
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  /* Ensure content is scrollable on mobile */
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}