:root {
    /* --color-primary: #42c046; */
    --color-primary: #dba101;
    --color-secondary: #e3ac16;
    /* --color-secondary: #3b8f3d; */
    --color-background: #f5f5f5;
    --color-nav-background: #eaeaea;
    --color-nav-color: #858585;
    --color-text-primary: #34332E;
    --color-yellow-primary: #FFBE0A;
}

.html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-background);;
    min-height: 100vh;
}

.morse-table {
    max-width: 100vw;
    padding: 30px;
}

.morse-table img {
    margin: 20px 20px 20px 40px;
    width: 300px;
}

.title {
    background-color: var(--color-nav-background);;
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
}

.pick-router {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.btn-primary {
    background-color: var(--color-primary);;
    max-width: 300px;
    min-width: 250px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3rem;
    margin: 6px 8px;
    cursor: pointer;
}

.btn-primary:active {
    background-color: var(--color-secondary);;
}

/* disabled状态 */
.btn-primary:disabled {
    background-color: #c4c4c4;
    cursor: not-allowed;
}

.question {
    font-size: 9rem;
    font-weight: 500;
    margin: 0 0 100px 0;
}

.question-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 80px;
}

.question-intro {
    margin: 20px 0 30px 0;
}

.question-info {
    background-color: var(--color-nav-background);;
    /* padding: 20px; */
    font-size: 1rem;
    text-align: center;
}

/* 容器样式 */
.question-info {
    display: flex; /* 启用flex布局 */
    justify-content: space-between; /* 元素之间平均分配额外空间 */
}

/* 第一个和第三个元素的样式 */
.question-info > div:first-child,
.question-info > div:last-child {
    width: 100px; /* 设置宽度为100像素 */
    margin: auto;
    /* background-color: lightblue; 仅为了视觉效果，可以根据需要调整 */
}

/* 中间元素的样式 */
.question-info > div:nth-child(2) {
    flex-grow: 1; /* 允许元素增长以填充剩余空间 */
    /* background-color: lightcoral; 仅为了视觉效果，可以根据需要调整 */
}


.btn-text {
    /* #42c046背景，小字体（1rem），左上角 */
    background-color: var(--color-primary);;
    color: white;
    padding: 8px 12px;
    font-size: 1rem;
    text-decoration: none;
}

/* footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background-color: #eaeaea;
} */

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    background-color: var(--color-nav-background);;
}

.navigator {
    display: flex;
    /* 横向排列 column*/
    flex-direction: row;
    justify-content: space-between;
    margin: 0 60px;
}

footer a {
    width: 40px;
    height: 40px;
    /* border: #3b8f3d solid 1px; */
    /* padding: 8px 12px 12px 12px; */
    padding: 12px;
    padding-top: 8px;
    padding-bottom: 18px;
    display: inline-block;
    color: VAR(--COLOR-NAV-COLOR);;
    text-decoration: none;
    border-radius: 12px;
    font-size: smaller;
}

footer img {
    width: 30px;
    margin: 0 5px;
}

.activate {
    background-color: #dddddd;
}

#padder {
    height: 90px;
}