@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

*{
  font-family:'IBM Plex Mono', monospace;
  transition:all 0.1s;
}
@keyframes reveal {
  to {
    transform: translateY(0);
    opacity:1;
  }
}
html{
  color:#DDD;
  scroll-behavior: smooth;
  
  height:100%;
  width:100%;
}
body{
  margin:0px;
  background:#131313;
  
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  background-color: rgba(19, 19, 19, 1);
}
nav{
  z-index:50;
  letter-spacing:0.2em;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  margin:0px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  background:rgba(19, 19, 19, 0.7);
  padding:10px 10%;
}
nav ul{
  font-size:0.75rem;
  padding:0px;
  list-style-type:none;
  display:flex;
  flex-direction:row;
  gap:15px;
}
nav a{
  text-decoration:none;
  color:#9e8e78;
}
nav a:hover{
  display:inline-block;
  transform:scale(1.05);
}
nav a.active{
  color:#ffb300;
}
nav span{
  font-weight:bold;
  color:#ffb300;
}
nav button{
  background:none;
  color:#9e8e78;
  border:1px solid #9e8e78;
}
/* Footer*/
footer{
  background:#0e0e0e;
  padding:5rem 10%;
  text-align:center;
}
footer a{
  color:#DDDDDD;
  text-decoration:none;
}
footer a:hover{
  display:inline-block;
  transform:scale(1.1);
}
footer section a{
  color:#ffb300;
}
footer div a{
  color:#555555;
}
footer div a:hover{
  color:#AAAAAA;
}