/* Color Palette: https://coolors.co/ff595e-ffca3a-8ac926-1982c4-6a4c93 */

:root {
    --colGrey: #cccccc;
    --colSelect: #6A4C93;
    --colRed: #ff595e;
    --colYellow: #ffca3a;
    --colGreen: #8ac926;
    --colCountdown: #8c6f1f;
    --colBlue: #1982C4;
}

html, body {
    overflow: hidden;
    font-family: 'KL1 MonoSans', Verdana, sans-serif;
}

#container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    word-wrap: break-word;
}

#select {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colSelect);
    z-index: 30;
}

.icon-spacer {
    margin: 5vw;
}

.icon-svg {
    width: 20vw;
    height: 20vw;
    opacity: 0.5;
    filter: alpha(opacity=50);
    transition: 0.2s ease;
}

.icon-svg:hover {
    -webkit-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    transition: 0.2s ease;
}

#icon {
    height: 25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw; /* Ensures spacing between #control and #countdown */
}

#countdown {
    color: var(--colCountdown);
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    transition: transform 0.2s ease; /* Ensures smooth movement */
    transform: translateY(0); /* Default position */
}
/* Countdown Timer */
#countdown {
    color: var(--colCountdown);
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    transition: transform 0.2s ease; /* Ensures smooth movement */
    transform: translateY(0); /* Default position */
}

/* Move countdown smoothly when hovering over #control */
#control:hover + #countdown {
    transform: translateY(2vw); /* Moves countdown slightly down */
}

.line-break {
    width: 100%;
}