body {
    font-family: 'Sometype Mono', sans-serif;
    font-weight: 500;
    margin: 50px;
    padding: 0;
    background-color: #759C73;
}

#System {
    color: whitesmoke;
}

#Logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(60px, 10vw, 120px);
    animation: moveToOriginal 1s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
    z-index: 9999;
}

@keyframes moveToOriginal {
     0% {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  }
    100% {
        position: absolute;     
        top: 37px;
        left: 37px;
        transform: translate(0, 0);
        width: clamp(60px, 5vw, 80px);
  }
}


a {
    display: block;
}

#Main, footer {
    margin-top: 8%;
    color: #50614E;
}

#About, #Projects, #Contact, #Socials, #Main, footer {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out 2s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#Contact a, #Socials a, #Projects a {
    text-decoration: none;
    color: whitesmoke;
}

#Contact a:hover, #Socials a:hover {
    color: darkgray;
}

p {
    display: inline;
}

@media (max-width: 768px) {
    #Main {
        margin-top: 30%;
    }
}

@media (max-width: 480px) {
    #Main {
        margin-top: 40%;
    }
}

#Countdown {
  position: fixed;
  top: 72px;
  right: 37px;
  color: whitesmoke;
  font-family: 'Sometype Mono', monospace;
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 16px);
  z-index: 999;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.5s forwards;
  text-shadow: 0 0 5px rgba(255,255,255,0.3);
  display: flex;
  flex-direction: row;     /* poziomo */
  align-items: baseline;   /* wyrównanie do tekstu */
  flex-wrap: wrap;         /* na mobile zawija */
  gap: 4px;                /* mały odstęp */
}

#label {
  font-size: 0.8em;
  opacity: 0.85;
  margin-right: 4px;
  white-space: nowrap;     /* nie łamie */
}

#Countdown span {
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 1px;
  animation: pulse 2s infinite;
  min-width: 22px;         /* równe pudełka */
  text-align: center;
}

@media (max-width: 768px) {
  #Countdown {
    position: absolute !important;  /* absolute na mobile – scrolluje z treścią */
    top: 20px;
    right: 20px;
    font-size: clamp(11px, 4vw, 14px);  /* mniejszy na tel */
    z-index: 50;
  }
  
  #label {
    font-size: 0.75em;
  }
}

@media (max-width: 480px) {
  #Countdown {
    top: 15px;
    right: 15px;
    gap: 2px;
  }
}