/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: Arial, sans-serif;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* Import */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap");

/* Main Styling */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 2em;
    background: url(assets/bg.jpg) no-repeat center center/cover;
    font-family: "Orbitron", sans-serif;
}

.clock {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 1em;
    border-radius: 2em;
    background-color: #22222299;
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    color: #ffffff;
    font-weight: 700;
    gap: 1em;
}

p {
    text-align: center;
}

.hour,
.min,
.sec,
.am-pm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2em;
    background-color: #22222280;
    border-radius: 0.2em;
    aspect-ratio: 1/1;
}

.hour,
.min {
    font-size: 5em;
    width: 2em;
}

.sec-m {
    display: inline-flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: center;
    gap: 0.6em;
}

.sec,
.am-pm {
    font-size: 1.4em;
    width: 3em;
    border-radius: 0.6em;
}