html {
  scroll-behavior: smooth;
  background: #1f2024;
  font-size: 16px;
  font-family: 'Courier New', Courier, monospace;
  /* --- BACKGROUND PATTERN --- */
  background-image:
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),

    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    url('hex_color.svg'),
    
    url('hex_color.svg');
  background-repeat: repeat-x;    
  background-position: 
    0rem -2rem, 
    4rem 5rem,
    0rem 12rem, 
    4rem 19rem,
    0rem 26rem,
    
    4rem 33rem,
    0rem 40rem,
    4rem 47rem,
    0rem 54rem,
    4rem 61rem,
    
    0rem 68rem,
    4rem 75rem,
    0rem 82rem,
    4rem 89rem,
    0rem 96rem,

    4rem 103rem,
    0rem 110rem,
    4rem 117rem,
    0rem 124rem,
    4rem 131rem,
    
    0rem 138rem,
    4rem 145rem,
    0rem 152rem,
    4rem 159rem,
    0rem 166rem,
    
    4rem 173rem,
    0rem 180rem,
    4rem 187rem,
    0rem 194rem,
    4rem 201rem,

    0rem 208rem,
    4rem 215rem,
    0rem 222rem,
    4rem 229rem,
    0rem 236rem,
    
    4rem 243rem;
  background-size: 
    8rem 8rem,
    8rem 8rem, 
    8rem 8rem, 
    8rem 8rem,
    8rem 8rem,

    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,

    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,

    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,

    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    8rem 8rem,
    
    8rem 8rem;
}

body {
  color: hsl(0, 0%, 69%);
  font-size: clamp(1rem, 1.6vw, 1.2rem); /* clamp(14px, 1.6vw, 18px); 1.2rem; */
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3rem); /* clamp(28px, 5vw, 64px); 2.8rem; */
  font-weight: normal;
  margin-top: 0.3rem;
  margin-bottom: 0;
  padding: 0;
}

h2 {
  font-size: clamp(1.25rem, 2vw, 1.75rem); /* clamp(24px, 2.5vw, 36px); 1.5rem; */
  line-height: 1.2;
  margin-top: 0.3rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem); /* clamp(18px, 2.5vw, 28px);  1.125rem; */
  line-height: 1.2;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

/* --- NAV LINKS --- */
hr {
  border: none;
  border-top: 1px solid rgba(103, 255, 227, 0.3);
  margin: 0.1rem 0 1rem 0;
}

nav {
  padding-top: 0.3rem;
  background-color: rgb(39, 41, 45);
}

.underline {
  color: rgb(103, 255, 227);
  text-decoration: none;
  position: relative;
  font-size: 1.3rem;
  margin-left: 1.25rem;
  margin-top: 1.25rem;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgb(37, 142, 165);
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform 0.4s ease;
  }

  &:hover {
    color: rgba(37, 144, 176, 0.606);
    &::before {
      transform-origin: bottom left;
      transform: scaleX(1);
    }
  }
}

/* --- FOOTER STYLE --- */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.footer-container {
  display: flex; 
  gap: 2rem;
  margin: 1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  align-items: center;
  justify-content: center;

  height: 1rem;  
  background-color: rgba(39, 41, 45, 0.4);
  border: 1px solid rgba(103, 255, 227, 0.1);
  border-radius: 4px;
}

.footer-image {
  background: url(favicon-32x32.png) no-repeat;
  width: 32px;
  height: 32px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(103, 143, 136); /* rgb(103, 143, 136) */
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
  line-height: 1;
}

.footer-social-link:hover {
  color: rgba(37, 144, 176, 0.8);
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
}

.footer-github-link:hover {
  color: rgba(37, 144, 176, 0.8);
}

.footer-github-link svg {
  width: 24px;
  height: 24px;
}

/* --- TERMINAL STYLE --- */
.terminal-container {
  margin: 1rem;
  padding: 0.75rem 1rem 1rem 1rem;

  background-color: rgb(39, 41, 45);
  border: 1px solid rgba(103, 255, 227, 0.3);
  border-radius: 4px;
}

.terminal {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.line-appear {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
  opacity: 0;
  animation: fadeIn 0s forwards;
}

.user {
  color: hsl(140, 79%, 63%);
  white-space: nowrap;
}

.cmd {
  position: relative;
  color: #FFFFFF;
  margin-left: 0.25rem;
  
  &::before, &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  &::before {
    background: rgb(39, 41, 45);
  }
  &::after {
    background: hsl(182, 100%, 50%);
    width: 1ch;
  }
}

.cmd1 {
  --characters: 5;
  --typingSpeed: 0.5s;
  
  &::before {
    background: rgb(39, 41, 45);
    animation: typing var(--typingSpeed) steps(var(--characters)) 1.5s forwards;
  }
  &::after {
    background: hsl(182, 100%, 50%);
    width: 1ch;
    animation:
      typing var(--typingSpeed) steps(var(--characters)) 1.5s forwards,
      blinking 0.5s ease alternate infinite,
      hide-cursor 0s 2.5s forwards;
  }
}

.response1 {
  color: #c4c4c4;
  white-space: pre-line;
  flex: 1;
}

.cmd2 {
  --characters: 6;
  --typingSpeed: 0.6s;
  
  &::before {
    background: rgb(39, 41, 45);
    animation: typing var(--typingSpeed) steps(var(--characters)) 3s forwards;
  }
  &::after {
    background: hsl(182, 100%, 50%);
    width: 1ch;
    animation: 
      typing var(--typingSpeed) steps(var(--characters)) 3s forwards,
      blinking 0.5s ease alternate infinite,
      hide-cursor 0s 4s forwards;
  }
}

.response2 {
  background: linear-gradient(90deg, hsl(179, 98%, 47%), hsl(158, 79%, 63%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: normal;
  padding: 0.7rem 0 0 0.75rem;
  margin: 0;
  flex: 1;
}

.response3 {
  color: #FFFFFF;
  white-space: normal;
  flex: 1;
}

@keyframes blinking {
  0%, 70% {
    background: hsl(182, 100%, 50%);
  }
  71%, 100% {
    background: transparent;
  }
}

@keyframes typing {
  100% {
    left: 100%;
  }
}

@keyframes hide-cursor {
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.line-appear:has(.cmd1) { animation-delay: 0.5s; }
.line-appear:has(.response1):nth-of-type(2) { animation-delay: 2.6s; }
.line-appear:has(.cmd2) { animation-delay: 2.68s; }
.line-appear:has(.response2) { animation-delay: 4s; }
.line-appear:has(.response3) { animation-delay: 4.08s; }

.line-appear:has(.response2), .line-appear:has(.response3) {
  justify-content: center;
}
.response2, .response3 {
  flex: 0 0 auto;
  display: block;
  padding-left: 0;
  text-align: center;
  transform-origin: center;
  text-wrap: wrap;
  white-space: normal;
  max-width: min(70ch, 90%);
}

.line-appear.centered { justify-content: center; }