body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: black;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 100% of the viewport height */
}

/* Title On Punctuation */

.main-heading {
  font-family: "altivo", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 9vw; /* Responsive font size based on viewport width */
  color: rgb(255, 255, 255);
  text-align: center;
  letter-spacing: 0px;
  word-spacing: -0.5vw; /* Responsive word spacing based on viewport width */
  line-height: 1;
  margin: 0;
}

.main-heading a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.main-heading a:hover,
.main-heading a:active {
  color: black;
}

.main-heading span {
  color: rgb(0, 0, 0);
}


#p:hover {
  color: rgba(0, 127, 255);
}

#u:hover {
  color: rgb(255, 0, 0); 
}

#n:hover {
  color: #ff8eff;
}

#c:hover {
  color: rgb(0, 42, 94);
}

#t:hover {
  color: rgb(255, 132, 0); 
}

#u2:hover {
  color: rgb(255, 215, 0); 
}

#a:hover {
  color: Sienna;
}

#t2:hover {
  color: rgb(128, 0, 128); 
}

#i:hover {
  color: rgb(34, 139, 34); 
}

#o:hover {
  color: rgb(21, 194, 154);
}

#n2:hover {
  color: rgb(116, 170, 156);
}

/* sub title by */

.section-heading {
  font-family: "sutro", serif;
  font-weight: 300;
  font-style: italic;
  color: rgb(163, 163, 163);
  font-size: 2vw; /* Responsive font size based on viewport width */
  text-align: center;
  margin-top: 40px; /* Adjust margin as needed */
}

/* comment */

.comment {
  font-family: "bilo", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1vw; /* Responsize font size based on viewport width */
  color: rgb(106, 106, 106);
  text-align: center;
  margin: 1% 0 2% 0;
}

/* Media Query for smaller screens */
@media screen and (max-width: 768px) {
  .main-heading {
    font-size: 8vw; /* Adjust font size for smaller screens */
    word-spacing: -1vw; /* Adjust word spacing for smaller screens */
  }
  
  .section-heading {
    font-size: 2vw; /* Adjust font size for smaller screens */
  }

}
