body {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100vh;
    margin: 0; */
    font-family: Arial, sans-serif;
    background-color: #4e4e4e;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Container for background image */
#counter-container {
    width: 80%;
    aspect-ratio: 1 / 1.25; 
    /* background-color: orange; */
    background-image: url('fivycake_500.png'); /* Replace with your image URL */
    
    background-size: cover;
    background-position: center;

}

#counter {
    position: relative;
    text-align: center;
    /* Adjust positioning */
    top: 23%; 
    left: 53%;
    transform: translate(-50%, -50%) rotate(-18deg);
}

h1 {
    /* font-size: 6rem; */
    color: #ffffff;
    margin:0px;
}

.days {
    font-size: 6rem;
    /* color: #00ff2a; */
    color: #ff8800;
    text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black;
}


@media (min-width: 768px) {
    body {
      /* background-color: blue; */
    }

    h1{
        font-size: 6rem;
    }

    #counter-container {
        position: relative;
        width: 700px; /* Adjust as needed */
        height: 875px; /* Adjust as needed */
    }
    
    #counter {
        position: absolute;
        text-align: center;
    }

    .days {
        font-size: 18rem;
        color: #00ff2a;
        text-shadow:
        -5px -5px 0 black,
         5px -5px 0 black,
        -5px  5px 0 black,
         5px  5px 0 black;
    }

  }