@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&family=Source+Code+Pro:wght@400;500&display=swap');
:root {
    --background-color: #eee;
    --block-background-color: rgba(255, 255, 255, 0.6);
    --text-color: #000;
    --frame-title-color: rgba(0, 0, 0, 0.3);
    --frame-shadow-color: rgba(0, 0, 0, 0.2);
    --link-default-color: #007bff;
    --link-active-color: #0056b3;
    --text-shadow-color: #eee;
}

[data-theme="dark"] {
    --background-color: #111;
    --block-background-color: rgba(0, 0, 0, 0.6);
    --text-color: #fff;
    --frame-title-color: rgba(255, 255, 255, 0.3);
    --frame-shadow-color: rgba(255, 255, 255, 0.2);
    --link-default-color: #68b1ff;
    --link-active-color: #bbdcff;
    --text-shadow-color: #111;
}

a {
    color: var(--link-default-color);
}

a:hover {
    color: var(--link-active-color);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Fredoka', sans-serif;
    margin-bottom: 60px;
}

a {
    text-shadow: 0px 0px 3px var(--text-shadow-color), 0 0 4px var(--text-shadow-color), 0 0 5px var(--text-shadow-color);
}

html {
    position: relative;
    min-height: 100%;
}

code,
.qso-callsign-text,
#pubkey-fingerprint {
    font-family: 'Source Code Pro', monospace;
}

.licenseCard {
    padding-top: 24px;
}

.alertCard {
    padding-top: 24px;
}

.card,
.licenseCard-content {
    background-color: var(--block-background-color);
    margin-bottom: 16px;
    box-shadow: var(--frame-shadow-color) 0 0 8px;
    border-radius: 8pt;
    z-index: 0;
}

.licenseCard-content tr,
.licenseCard-content th,
.licenseCard-content td {
    vertical-align: baseline;
}

.licenseCard-content tr,
.licenseCard-content th,
.licenseCard-content td {
    border-width: 4px;
}

.licenseCard-content th {
    padding-right: 8px;
}

.callsign-title {
    text-align: center;
}

.page-title {
    font-size: 18pt;
    font-weight: 900;
}

.alertCard-content {
    background-color: rgba(255, 0, 0, 0.6);
    color: rgb(255, 128, 128);
}

#main {
    padding-top: 40px;
}

.frame-title {
    position: absolute;
    right: 10px;
    bottom: 0;
    z-index: inherit;
    font-size: 36px;
    font-weight: 900;
    z-index: 0;
    color: var(--frame-title-color);
}

.card-body {
    z-index: 2;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    /* Set the fixed height of the footer here */
    line-height: 24px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 8pt;
    /* Vertically center the text there */
    background-color: var(--block-background-color);
}