@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Animación de carga */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(-3px); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0px); }
}

:root{
  font-family:"Lato";
  font-size: 1.5rem;
  color: #e6e6e6;
  scrollbar-color:#292929 #030303;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  word-break: break-word;
}


body{
  margin-block: 0px;
  margin-inline: 30%;
  background-color:#030303;
}

main{
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-block: 10px;
  padding-inline: 5px;
  z-index: 1;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@keyframes fadeInFooter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.6; transform: translateY(0); }
}

main > footer{
  margin-top: auto;
  text-align: center;
  font-size: 0.8rem;
  padding-block: 15px;
  opacity: 0.6;
}

/* Pantallas con menos de 1050px de ancho */
@media (max-width: 1049px) {
  body{
    margin-inline: 15%;
    max-width: 2000px;
  }
}

/* Pantallas con menos de 600px de ancho */
@media (max-width: 599px) {
  body{
    margin-inline: 5%;
  }
}

section{
  margin-block: 10px;
  padding: 10px;
  background-color:#292929;
  border-radius: 5px;
  border: 2px solid #00ff78;
  opacity: 1;
  transform: translateY(-3px);
  transition: transform 0.25s ease;
}

.js-fade-in-up {
  animation: fadeInUp 0.6s ease-out backwards;
}

.js-fade-in-footer {
  animation: fadeInFooter 0.8s ease-out backwards;
}

section:hover{
  transform: translateY(-5px);
}

h1{
  margin-top: 0px;
  opacity: 1;
}

/* Cursor parpadeante del typewriter (ancho cero con ::after) */
.type-cursor {
  display: inline-block;
  position: relative;
  width: 0;
  height: 1.2em;
  vertical-align: text-bottom;
  animation: blink 0.7s steps(1) infinite;
}
.type-cursor::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #00ff78;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

a, a:visited {
  color: #a5a5a5;
}

a:hover {
  opacity: 0.9;
}


nav{
  background-color:#292929;
  border-radius: 5px;
  padding: 3px;
  margin-bottom: 10px;
}

nav a, nav a:visited{
  color: #a5a5a5;
}

#profilePic{
  width: 1.5rem;
  height: 1.5rem;
  display: inline;
  image-rendering: pixelated;
  margin-right: 5px;
}