<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">    

<main>
        <div class="timeSection">
            <h1 id="time">TIME</h1>
            <p id="seconds">S</p>
        </div>
        <div class="dateSection">
            <p id="day">DAY</p>
            <p id="fullDate">FULL DATE</p>
        </div>
    </main>



    <script src="script.js"></script>

*, *::after, *::before:not(i){
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
}

body{
    background-color: black;
}

main{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #00f7ff;
}

h1{
    font-size: 5rem;
    transform: scaleY(1.5) translate(0,-10%);
}

#seconds{
    font-size: 1.5rem;
}

#fullDate, #day{
    font-size: 1rem;
}

.timeSection{
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.dateSection{
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

const time = document.getElementById("time");
const seconds = document.getElementById("seconds");
const day = document.getElementById("day");
const fullDate = document.getElementById("fullDate");

updateClock();
setInterval(() => {
    updateClock();
}, 1000);

function updateClock (){
    var current = new Date();
    const showDay = { weekday: 'long' };
    const showDate = { month: 'long', year: 'numeric',  day: 'numeric' };


    time.innerHTML = current.getHours()+":"+current.getMinutes();
    if(current.getSeconds()<10){        
        seconds.innerHTML = "0"+current.getSeconds();
    } else {
        seconds.innerHTML = current.getSeconds();
    }
    day.innerHTML = current.toLocaleDateString(undefined, showDay).toUpperCase();
    fullDate.innerHTML = current.toLocaleDateString(undefined, showDate);
}