@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

/* ==========================================================================
   Global Variables
   ========================================================================== */
:root {
  /* Colors & Fonts */
  --color-background: rgb(60, 60, 60);
  --color-foreground: rgb(90, 90, 90);
  --color-accent: rgb(170, 170, 170);
  --font-primary: "IBM Plex Mono", monospace;

  /* Global Spacing */
  --global-margin: 32px;
  --global-gutter: 16px;

  /* Terminal (Desktop) */
  --terminal-max-width: 600px;
  --terminal-max-height: 400px;
  --terminal-padding: 32px;

  /* Terminal (Mobile) */
  --terminal-mobile-padding: 16px;
  --terminal-mobile-height: 60vh;

  /* Component-specific */
  --command-line-gap: 8px;
  --loading-margin-bottom: 64px;
  --content-padding: 32px;
}

/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent horizontal scroll */
html,
body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  background: var(--color-background);
  color: var(--color-accent);
  /* Using overflow hidden on body here is intentional based on your design */
}

/* ==========================================================================
   Preloader & Terminal
   ========================================================================== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-background);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.terminal {
  width: var(--terminal-max-width);
  height: var(--terminal-max-height);
  background: var(--color-background);
  border: 1px solid var(--color-foreground);
  padding: var(--terminal-padding);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(107, 107, 107, 0.1);
}

.terminal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(90, 90, 90, 0.05),
    rgba(90, 90, 90, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

/* Terminal Content Layout */
.terminal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--global-gutter);
}

.commands-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--global-gutter);
}

/* Command Lines */
.command-line {
  display: flex;
  align-items: center;
  gap: var(--command-line-gap);
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
}

.prompt,
.command {
  color: var(--color-accent);
  opacity: 0.9;
}

.command {
  font-size: 18px;
}

/* Cursor Styles */
.cursor {
  width: 8px;
  height: 16px;
  background: var(--color-accent);
  display: inline-block;
  margin-left: 2px;
  opacity: 0;
  vertical-align: middle;
  animation: none;
}

.active-cursor {
  opacity: 0.9;
  animation: blink 2s infinite;
}

/* Loading Elements */
.loading-container {
  margin-bottom: var(--loading-margin-bottom);
  padding: var(--global-gutter);
  background: rgba(90, 90, 90, 0.05);
  border: 1px solid var(--color-foreground);
  border-radius: 5px;
}

.loading-bar {
  width: 100%;
  height: 20px;
  background: var(--color-background);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-foreground);
  border-radius: 5px;
}

.loading-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--color-foreground);
  box-shadow: 0 0 15px var(--color-foreground);
}

.loading-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(170, 170, 170, 0.1) 10px,
    rgba(170, 170, 170, 0.1) 20px
  );
}

/* Percentage Display */
.percentage-wrap {
  position: absolute;
  bottom: var(--global-margin);
  right: var(--global-margin);
  display: flex;
  align-items: center;
  gap: 5px;
}

.percentage {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: bold;
  color: var(--color-accent);
  letter-spacing: 2px;
  position: relative;
}

.percentage::before {
  content: "[";
  margin-right: 5px;
}

.percentage::after {
  content: "]";
  margin-left: 5px;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@-webkit-keyframes blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0; }
}
@keyframes blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0; }
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-background);
  visibility: hidden;
  opacity: 0;
  color: var(--color-accent);
  padding: var(--content-padding);
  text-align: center;
  line-height: 30px;
}

.content h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
  line-height: 1.2;
}

.content p {
  font-size: 1.3rem;
  max-width: 600px;
  opacity: 0.8;
}

/* ==========================================================================
   Responsive Styles (Mobile)
   ========================================================================== */
@media (max-width: 600px) {
  .terminal {
    width: 90vw;
    height: var(--terminal-mobile-height);
    padding: var(--terminal-mobile-padding);
  }

  /* Adjust command text for mobile readability */
  .prompt,
  .command,
  .command-line {
    font-size: 1rem;
  }
  
  .command-line {
    gap: 10px;
  }

  /* Adjust main content for mobile */
  .content {
    padding: 16px;
  }
  
  .content h1 {
    font-size: 2.5rem;
    line-height: 1.4;
  }
}

.profile img {
  width: 100px;
  max-width: 100%; 
  height: auto;
  border-radius: 50%;
  box-shadow: 
  0 0 8px rgba(170, 170, 170, 0.7),
  0 0 16px rgba(170, 170, 170, 0.5),
  0 0 24px rgba(170, 170, 170, 0.3);
}