muninn.css

:root {
    /* Colors, Images */
    --main-text: #1a1a72;
    --shadow-text: #fff;
    --bg-color: #000000;
    --vellum-bg: url(vellum-75.png);
    --vellum-bg-dark: url(vellum-dark-75.png);
    --accent-color: #660000;
    --light-text: #cecece;
    --dark-bg:#121212;

    /* Font sizes */
    --base-font: 16px;
    --small-font: 1rem;
    --med-font: 1.25rem;
    --lg-font:1.5rem;
    --xlg-font: 2rem;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;

    /* Misc. */
    --border-r: 12px;
    --speed-3: 0.3s;
    --box-shadow: 16px 16px 4px rgba(0, 0, 0, 0.9);
    --text-shadow: 0px 0px 6px #fff; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--bg-color);
    color: var(--main-text);
    line-height: 1.6;
    font-size: var(--base-font);
}

html, body {
    -webkit-overflow-scrolling: touch;
  }

.background-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(odin.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
}

.container {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-large);
    margin: calc(var(--spacing-large)* 1.5) auto;
    background-image: var(--vellum-bg);
    border-radius: var(--border-r);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--box-shadow);
    flex-grow: 1;
}

#stanza {
    font-size: var(--xlg-font);
    color: var(--main-text);
    min-height: 100px;
    margin-bottom: var(--spacing-large);
    padding: var(--spacing-medium);
    cursor: pointer;
    line-height: 1.8;
    text-align: left;
}

#runic-translation {
    font-family: "Noto Sans Runic", sans-serif;
    font-weight: 600;
    font-size: var(--lg-font);
    color: var(--main-text);
    margin-top: var(--spacing-small);
    padding: var(--spacing-medium);
    border-radius: 8px;
    word-break: break-word;
    line-height: 1.8;
}

.runic-text {
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--small-font);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--speed-3), visibility var(--speed-3);
    white-space: nowrap;
    z-index: 2;
    font-family: "Noto Sans Runic", sans-serif;
    width: max-content;
}

.runic-text::after {
    content: attr(data-latin);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--small-font);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--speed-3), visibility (--speed-3);
    white-space: nowrap;
    z-index: 10;
}

.runic-text:hover::after,
.runic-text.touch-active::after {
    visibility: visible;
    opacity: 1;
}

#message {
    color: var(--main-text);
    font-size: var(--lg-font);
    padding: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

#info-text {
    color: var(--main-text);
    font-size: var(--med-font);
    padding-bottom: var(--spacing-medium);
    border-bottom: 9px dotted var(--dark-bg);
}

#stanza, #runic-translation, #message, #info-text {
    text-shadow: var(--text-shadow);
}

.disclaimer {
    font-size: var(--small-font);
    font-style: italic;
    text-align: center;
    margin: var(--lg-font) auto;
    color: var(--light-text);
    width: 90%;
    max-width: 600px;
}

h1, h2, h3 {
    font-family: "Noto Sans Runic", sans-serif;
    margin: 0px auto;
    color: var(--main-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bolder;
    text-shadow: var(--text-shadow);
}

h1 { font-size: var(--xlg-font); }
h2 { font-size: calc(var(--xlg-font) * 0.8); }
h3 { font-size: var(--lg-font); }

h3 { border-bottom: 9px dotted var(--dark-bg); }

.tiktok-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 340px;
    margin: calc(var(--spacing-large) * 2) auto;
}

.tiktok-embed {
    width: 100%;
    max-width: 325px;
    border-radius: 12px;
    border: 9px ridge var(--accent-color);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform var(--speed-3), box-shadow var(--speed-3);
}

.tiktok-embed iframe {
    border: none !important;
    width: 100% !important;
    max-width: 325px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;  
    max-height: 90vh !important; 
}

.tiktok-embed::before,
.tiktok-embed::after {
    display: none !important;
}

.tiktok-embed:hover {
    transform: scale(1.05);
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.9);
  }

.word {
    display: inline-block;
    margin-right: 0.2em;
    position: relative;
    cursor: pointer;
}

.word::after {
    content: attr(data-runes);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--small-font);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--speed-3), visibility var(--speed-3);
    white-space: nowrap;
    z-index: 10;
    font-family: "Noto Sans Runic", sans-serif;
}

.word:hover::after,
.word.touch-active::after {
    visibility: visible;
    opacity: 1;
}

footer {
    font-size: var(--small-font);
    color: var(--light-text);
    text-align: center;
    width: 100%;
    margin: calc(var(--spacing-large) * 2) auto;
    padding: var(--spacing-medium) auto;
}

footer p {
    width:75%;
    margin: 0 auto;
}

#contact, #license {
    text-decoration: none;
    color: var(--accent-color);
    text-shadow: var(--text-shadow);
}

.mode-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    cursor: pointer;
    width: 40px;
    height: 20px;
    background: var(--dark-bg);
    display: block;
    border-radius: 100px;
    position: relative;
}

.toggle-label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 90px;
    transition: opacity var(--speed-3), visibility var(--speed-3);
}

.toggle-label p {
    margin: 25px auto;
    text-shadow: var(--text-shadow);
}

.toggle-checkbox:checked + .toggle-label {
    background-color: var(--light-text);
}

.toggle-checkbox:checked + .toggle-label:after {
    left:calc(100% - 2px);
    transform: translateX(-100%);
}

body.dark-mode {
    background: var(--dark-bg);
}

body.dark-mode .background-container {
    backdrop-filter: brightness(0.8) blur(15px);
}

body.dark-mode .container {
    background-image: var(--vellum-bg-dark);
    box-shadow: 16px 16px 8px var(--dark-bg);
}

body.dark-mode #stanza,
body.dark-mode #runic-translation,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3, 
body.dark-mode ,
body.dark-mode #info-text,
body.dark-mode #message {
  color: var(--accent-color);
}

body.dark-mode .disclaimer,
body.dark-mode footer {
  color: #a0a0a0;
}

body.dark-mode .runic-text::after {
    background-color: rgba(30, 30, 30, 0.9);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .container {

        box-shadow: 4px 4px 8px (--bg-color);
    }

    .toggle-label p {
        margin: 25px auto;
        text-shadow: var(--text-shadow);
        font-size: calc(var(--small-font) * 0.8)
    }

    #stanza, #runic-translation {
        font-size: calc(var(--lg-font) * 1.07);
    }

    .tiktok-embed {
        border-width: 12px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: var(--spacing-medium);
        margin: calc(var(--spacing-large) * 2) auto;
    }

    #stanza, #runic-translation {
        font-size: var(--med-font);
    }

    h1 { font-size: calc(var(--xlg-font) * 0.8); }
    h2 { font-size: calc(var(--xlg-font) * 0.68); }
    h3 { font-size: calc(var(--lg-font) * 0.87); }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-medium);
        margin: 0 auto;
        width: 85%;
    }

    #stanza, #runic-translation {
        font-size: var(--med-font);
    }

    h1 { font-size: calc(var(--xlarge-font-size) * 0.72); }
    h2 { font-size: calc(var(--xlarge-font-size) * 0.6); }
    h3 { font-size: calc(var(--large-font-size) * 0.8); }

    #tiktok-embed {
        box-shadow: 2px 2px 4px #121212;
    }

    .tiktok-embed {
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }

    .tiktok-embed::-webkit-scrollbar {
        display:none;
    }

    .disclaimer, footer {
        width: 95%; 
        font-size: calc(var(--small-font-size) * 0.8);
    }
}

@media (max-width: 375px) {
    .container {
        padding: calc(var(--spacing-small) * 2);
        margin: 0 auto;
        width: 85%;
    }

    .background-container {
        min-height: 100vh;
        background-size: cover;
    }

    h1 { font-size: calc(var(--xlarge-font-size) * 0.6); }
    h2 { font-size: calc(var(--xlarge-font-size) * 0.48); }
    h3 { font-size: var(--medium-font-size); }

    #tiktok-embed {
        box-shadow: 2px 2px 4px #121212;
    }
}