@import url("https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

body {
    font-family: 'Exo', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Ensure text within container is centered */
}

.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    margin: 5px;
    background-color: #f7505f;
    color: #fff;
    border: 2px solid #f7505f;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #fff;
    color: #f7505f;
    border: 2px solid #f7505f;
}

.btn i {
    font-size: 50px;
    margin-bottom: 10px;
}

.btn .link-floating {
    position: static;
}

/* instruction-container */
.instruction-container {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.instruction-container h3 {
    font-size: 17.5px;
    margin-top: 15px;
    text-align: left;
}

.instruction-container p {
    font-size: 16px;
    text-align: left;
    margin-left: 20px;
}

.password-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 400px;
    margin: 1rem auto;
}

.password-container span {
    font-family: monospace;
    font-size: 24px;
    color: #333;
    flex-grow: 1;
    word-break: break-word;
}

.msg {
    padding: 10px 15px;
}

img {
    max-width: 250px;
    height: auto;
    margin: 20px;
    /*  filter:blur(5px);*/
    cursor: pointer;
    /* Indicate that the image is clickable */
}

:where([autocomplete=one-time-code]) {
    --otp-digits: 6;
    --otp-ls: 2ch;
    --otp-gap: 1.25;

    --_otp-bgsz: calc(var(--otp-ls) + 1ch);
    --_otp-digit: 0;

    all: unset;
    background:
        linear-gradient(90deg,
            var(--otp-bg, #BBB) calc(var(--otp-gap) * var(--otp-ls)),
            transparent 0),
        linear-gradient(90deg,
            var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
            transparent 0);
    background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
    background-repeat: no-repeat, repeat-x;
    background-size: var(--_otp-bgsz) 100%;
    caret-color: var(--otp-cc, #222);
    caret-shape: block;
    clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
    font-family: ui-monospace, monospace;
    font-size: var(--otp-fz, 2.5em);
    inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
    letter-spacing: var(--otp-ls);
    padding-block: var(--otp-pb, 1ch);
    padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
    text-align: left;
}