body {
  
    font-family: 'monogram', sans-serif;

  background-color: #121212;  
  color: #ffd493;             
  
    margin: 0;
    padding: 0;
    line-height: 0.8;

}
  
@font-face {
  font-family: 'monogram';
  src: url('font/monogram.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

p {
  font-size: 2.5rem;
  font-weight: 200;
 
  
}

a {
  color: #ffffff; 
  text-decoration: none;
}

a:hover {
  color: #63b3ed; 
}

.btn {
  background-color: #5acbff;
  color: #fff;
  border: none;
}

.btn:hover {
  background-color: #63b3ed;
  color: #fff;
  box-shadow: inset 100px 0 0 0 #54b3d6;
}

.highlight {
  color: #ffffff; 
  font-family: 'monogram', sans-serif;
  font-weight: normal;
  font-style: normal;

}

.hero {
  background-color: #ffd49305; 
}

footer {
  font-size: 1.75rem;
  font-weight: 200;
  background-color: #ffd49305;
}

h1 a img {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

h1 a img:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.scroll-arrow {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;              
  height: 50px;             
  background: rgba(0, 0, 0, 0.6); 
  border-radius: 0;         
  display: flex;            
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

.scroll-arrow:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transform: translateY(5px); 
  
}

.scroll-arrow i {
  font-size: 2.0rem;
  color: #fff;       
}

.decode-text {
  font-family: "monogram", monospace;
  white-space: nowrap;
}