@font-face {
  font-family: "VCR";
  src: url("../media/fonts/vcr.ttf") format("truetype");
}

@font-face {
  font-family: "Monocode";
  src: url("../media/fonts/monocode.otf") format("truetype");
}

@font-face {
  font-family: "Moderna";
  src: url("../media/fonts/moderna.ttf") format("truetype");
}

.font-moderna {
  font-family: "Moderna", sans-serif;
}

.font-monocode {
  font-family: "Monocode", sans-serif;
}

.font-vcr {
  font-family: "VCR", sans-serif;
}

.border-gradient-primary {
  border: 4px solid; 
  border-image-slice: 1;
  border-image-source: linear-gradient(to bottom, #3db8f5, #1473e6);
  border-radius: 12px;
}

/* home*/
.home {
  height: 15.5rem; 
}

.text-medium {
  font-size: 0.8rem; 
  line-height: 1.6;
}

.spinner {
  border-radius: 50%;
  border-style: solid;
  border-width: 4px;
  border-top-color: #3b82f6; 
  border-right-color: rgba(0,0,0,0.1);
  border-bottom-color: rgba(0,0,0,0.1);
  border-left-color: rgba(0,0,0,0.1);
  width: 10px;
  height: 10px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 1s linear infinite;
}

.dots::after {
  content: '';
  display: inline-block;
  width: 1ch;
  animation: blink 1s steps(3, end) infinite;
}

@keyframes blink {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}