*{
    font-family: 'Fira Code', monospace;
}

:root{
  --font: 220, 220, 220; /*#dcdcdc*/
  --vscode-color: 30, 30, 30; /*#1e1e1e*/
  --h1-color: 255, 119, 45; /* #FF772D */

  --h1-size : clamp(1.8rem, 5vw, 3rem);
  --8_3: clamp(1.1rem, 2.5vw, 1.4rem);

  --16: clamp(0.8rem, 3vw, 1.1rem);
  --32: clamp(1.5rem, 6vw, 2rem);
  --40: clamp(2rem, 7vw, 2.5rem);
}

html{
  scroll-behavior: smooth;
  font-size: 16px;
}

body{
  background-color: rgb(var(--vscode-color)); 

  position: relative;
}

body::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/background_black.webp') repeat top left;
  background-size: 10px;
  
  pointer-events: none; 
  z-index: -1;

  opacity: 0.3;
}
@media (hover: hover) and (pointer: fine) {
  body::before{
    animation: breathe 10s  infinite;
  } 
}

hr{
  border: none;
  height: 2px;
  background-color: rgb(var(--font));
  margin: 20px 0;       
  opacity: 0.2;
}

img {
  pointer-events: none;
  user-select: none;
}

@keyframes breathe{
  0%{ opacity: 0.1;}
  50%{ opacity: 0.3;}
  100%{ opacity: 0.1;}
}