body {
    font-family: 'Manrope', sans-serif;
    background-color: black;
    margin: 0;
    height: 100vh;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

body.fadein {
  opacity: 1;
  transform: translateY(0);
}

header {
    padding: 10px;
    display: flex;
    justify-content: center; /* This centers the logo horizontally */
    align-items: center;     /* Optional: centers vertically if header has height */
}

.logo {
    height: 50px;
    width: 50px;
}

.typing-container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: flex-start;     /* optional: center vertically */
  padding-top: 50px;
}

.typing-text {
  font-size: 24px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid white;
  width: fit-content;
  min-height: 35px;
}

.clock-container {
  justify-content: center;    /* center horizontally */
  align-items: flex-start;    /* align top */    
  padding-top: 300px;         /* push clock down 150px */
  box-sizing: border-box;     /* so padding doesn’t add height */
}

.clock {
  font-size: 24px;
  color: white;
  text-align: center;
}