/* Dark Mode */
:root {
    --bg-body: #282c34;
    --text-color: #fff4e7;
    --footer-bg: #515359;
    --footer-text: #ff3dff;
}

/* Light Mode */
[data-theme="light"] {
    --bg-body: #f7f3ee;
    --text-color: #1e1e1e;
    --footer-bg: #e8ddd0;
    --footer-text: #cc44cc;
}

/* Tag */
body {
    background: var(--bg-body);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1;
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border: 3px solid #38393d;
    border-radius: 20px 20px 0 0;
    transition: transform 200ms ease;
}

footer:hover {
    transform: scaleY(0.90);
}

hr {
    background-color: #565c69;
    border: 3px solid #3d4048;
    border-radius: 10px;
    width: 98%;
    height: auto;
}

button {
    background-color: #454545;
    color: #fff4e7;
    border: 3px solid #000000;
    border-radius: 10px;
    margin: 20px auto;
    transition: transform 200ms ease;
    padding: 8px;
}

button:hover {
    cursor: pointer;
    background-color: #353535;
    transform: scale(0.95);
}

button:active {
    transform: scale(0.90);
}

/* Class */
.consolas {
    font-family: 'Consolas';
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.center {
    text-align: center;
}