.login-button {
    background: #fff;
    color: #345d8c;
    border: 1px solid #b9cce1;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    cursor: pointer;
    width: 130px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 3px 0 #d3dfec;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.login-button:hover {
    background: #f3f8ff;
    transform: translateY(-2px);
}

.login-button:active {
    box-shadow: 0 1px 0 #d3dfec;
    transform: translateY(2px);
}

.signup-button {
    background: linear-gradient(180deg, #ffda62, #ffcc29);
    color: #3c310c;
    border: 1px solid #d2a900;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    cursor: pointer;
    width: 130px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 3px 0 #d7b329;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.signup-button:hover {
    background: #ffe37d;
    transform: translateY(-2px);
}

.signup-button:active {
    box-shadow: 0 1px 0 #d7b329;
    transform: translateY(2px);
}

.logout-button {
    background: #c94949;
    color: #fff;
    border: 1px solid #a63737;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    cursor: pointer;
    width: 130px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 3px 0 #a63737;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.logout-button:hover {
    background: #ad3737;
    transform: translateY(-2px);
}

.logout-button:active {
    box-shadow: 0 1px 0 #a63737;
    transform: translateY(2px);
}

.submit-button {
    background: linear-gradient(180deg, #55b96b, #439a57);
    color: rgb(255, 255, 255);
    border: 1px solid #347e47;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 4px 0 #347e47, 0 7px 16px rgba(49, 111, 66, 0.14);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    display: block;
}

.submit-button:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.submit-button:active {
    box-shadow: 0 1px 0 #347e47;
    transform: translateY(3px);
}

.signup-submit-button {
    background: linear-gradient(180deg, #ffda62, #ffcc29);
    color: #3c310c;
    border: 1px solid #d2a900;
    padding: 12px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    cursor: pointer;
    width: 100%; 
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 4px 0 #d2a900, 0 7px 16px rgba(180, 144, 0, 0.14);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    display: block;
    margin-top: 10px;
}

.signup-submit-button:hover {
    background: #ffe37d;
    transform: translateY(-1px);
}

.signup-submit-button:active {
    box-shadow: 0 1px 0 #d2a900;
    transform: translateY(3px);
}

.return-button {
    background: linear-gradient(180deg, #6597ce, #507cad);
    color: white;
    border: 1px solid #345d8c;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: "Comic Sans MS", sans-serif;
    text-decoration: none; /* Removes link underline */
    border-radius: 10px;
    box-shadow: 0 4px 0 #345d8c, 0 7px 16px rgba(48, 76, 109, 0.13);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    display: inline-block;
}

.return-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.return-button:active {
    box-shadow: 0 1px 0 #345d8c;
    transform: translateY(3px);
}

.login-button:focus-visible,
.signup-button:focus-visible,
.logout-button:focus-visible,
.submit-button:focus-visible,
.signup-submit-button:focus-visible,
.return-button:focus-visible {
    outline: 3px solid #f4b900;
    outline-offset: 3px;
}

.status-icon {
    height: 22px;
    margin-right: 5px;
    object-fit: contain;
    vertical-align: -5px;
    width: 22px;
}