/* Styles for the body element */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: -webkit-fill-available;
    margin: 0;
    background-color: #fff;
}

html {
    height: 100%;
    width: 100%;
}

/* Styles for the progress bar container */
.progress-container {
    width: 60vw;
    height: 1vh;
    background-color: #e0e0e0;
    border-radius: 10vw;
    overflow: hidden;
    transition: opacity 5s ease-out;
}

/* Styles for the progress bar */
.progress-bar {
    display: block;
    height: 100%;
    background-color: #0277bd;
    border-radius: 10vw;
    width: 0;
    transition: width 1s ease;
}

/* CSS for a fade-in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.1s ease-in-out forwards;
}

.recaptcha-container {
    display: inline-flex;
    /* or 'inline-block' */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    /* No fixed width/height */
}

/* Keyframes for the fadeIn animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

:root {
    --scale-factor: 0.5;
    /* Define a variable for scale factor */
}

.container {
    width: calc(100px * var(--scale-factor));
    height: calc(100px * var(--scale-factor));
    perspective: 1000px;
    margin: 100px;
}

.cube {
    position: relative;
    width: calc(100px * var(--scale-factor));
    height: calc(100px * var(--scale-factor));
    transform-style: preserve-3d;
    transform: rotate3d(1, 0, 0, 50deg) rotate3d(0, 0, 1, 45deg);
}

.face {
    width: calc(100px * var(--scale-factor));
    height: calc(100px * var(--scale-factor));
    background: #0277bd;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}



.facefront {
    width: calc(100px * var(--scale-factor));
    height: calc(100px * var(--scale-factor));
    background: #026dae;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.lidface {
    width: calc(105px * var(--scale-factor));
    height: calc(105px * var(--scale-factor));
    background: #025e95;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.lidleftface {
    width: calc(105px * var(--scale-factor));
    height: calc(17px * var(--scale-factor));
    background: #01446c;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.lidrightface {
    width: calc(105px * var(--scale-factor));
    height: calc(17px * var(--scale-factor));
    background: #0283d0;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.lidslot {
    width: calc(80px * var(--scale-factor));
    height: calc(17px * var(--scale-factor));
    background: black;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.paper {
    width: calc(67px * var(--scale-factor));
    height: calc(70px * var(--scale-factor));
    background: #FFF0DB;
    border: 1px #025e95;
    position: absolute;
    opacity: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
}

.front {
    transform: translateZ(calc(50px * var(--scale-factor)));
}

.back {
    transform: translateZ(calc(-50px * var(--scale-factor))) rotateY(180deg);
}

.left {
    transform: translateX(calc(-50px * var(--scale-factor))) rotateY(-90deg);
}

.right {
    transform: translateX(calc(50px * var(--scale-factor))) rotateY(90deg);
}

.top {
    transform: translateY(calc(-50px * var(--scale-factor))) rotateX(90deg);
}

.bottom {
    transform: translateY(calc(50px * var(--scale-factor))) rotateX(-90deg);
}

.lidtop {
    transform: translateZ(calc(51px * var(--scale-factor)));
}

.lidleftface {
    transform: translateY(calc(96px * var(--scale-factor))) translateZ(calc(43px * var(--scale-factor))) rotateX(-90deg)
}

.lidright {
    transform: translateX(calc(49px * var(--scale-factor))) translateZ(calc(40px * var(--scale-factor))) translateY(calc(40px * var(--scale-factor))) rotateX(90deg) rotateY(90deg);
}

.lidslot {
    transform: translateZ(calc(51px * var(--scale-factor))) translateY(calc(45px * var(--scale-factor))) translateX(calc(13px * var(--scale-factor)));
}

@keyframes slideDown {
    0% {
        transform: translateX(calc(20px * var(--scale-factor))) rotateX(-90deg) translateY(calc(-50px * var(--scale-factor))) translateZ(calc(20px * var(--scale-factor))) translateY(calc(-50px * var(--scale-factor)));
    }

    50% {
        transform: translateX(calc(20px * var(--scale-factor))) rotateX(-90deg) translateY(calc(-50px * var(--scale-factor))) translateZ(calc(20px * var(--scale-factor))) translateY(calc(50px * var(--scale-factor)));
    }

    100% {
        transform: translateX(calc(20px * var(--scale-factor))) rotateX(-90deg) translateY(calc(-50px * var(--scale-factor))) translateZ(calc(20px * var(--scale-factor))) translateY(calc(-50px * var(--scale-factor)));
    }
}

.ballot {
    transform: translateX(calc(20px * var(--scale-factor))) rotateX(-90deg) translateY(calc(-50px * var(--scale-factor))) translateZ(calc(20px * var(--scale-factor)));
    animation: slideDown 2s infinite;
}