:root {         
    --black: #0c0c0e; /* background */
    --white: #f9f9f6; /* text */
    --grey: #9B9BA0; /* for ui elements */
    --green: #00ee94; /* highlight colour */
    --font-size-h1: 1.8rem; /* font size headline */
    --font-size-h2: 1.5rem; /* font size subline */
    --font-size-buttons: 1.2rem; /* font size buttons */
    --font-size-buttons-2: 0.8rem; /* font size buttons */
    --font-size-p1: 0.9rem; /* 1rem = 16px, standard browser font size */
    --font-size-bildunterschrift: 0.8rem; /* font size figcaption */
    --font-size-bildunterschrift-2: 0.6rem; /* font size figcaption */
}

html, body { 
    margin: 0;
    border: 0;                     
    padding: 0;                     
    height: 100%;  
    width: 100%;   
    user-select: text;
    background-color: var(--black);
    color: var(--white);   
    overflow-y: auto;   /* vertical scrolling */
    overflow-x: hidden; /* no horizontal scrolling */
    max-width: none;
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 6px auto;
    user-select: none;
}

video, iframe {
    max-width: 100%;
    margin: 0;
}

::-webkit-scrollbar-track {
    margin: 20px 0px;
    --background-scrollbar: transparent;    
}

::-webkit-scrollbar { 
    width: 6px;
    --background-scrollbar: transparent;    
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

::-webkit-scrollbar-corner {    
    --background-scrollbar: transparent;    
}

::selection { 
    background-color: var(--blue);
    color: var(--green);
}

a { 
    text-decoration: none;
    color: var(--white);
    user-select: none;
}

/* ---------------- inter display, IBM Plex Mono ---------------- */

@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("../assets/fonts/inter/InterDisplay-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: 'IBMPlexMono'; font-style: normal; src: url('../assets/fonts/IBMPlexMono/IBMPlexMono.woff2') format('woff2'); }

.inter-specimen-1 { font-family: "InterDisplay"; font-style: normal; font-weight: 100; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 100; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 200; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 200; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 400; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 300; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 400; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 400; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 500; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 500; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 600; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 600; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 700; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 700; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 800; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 800; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: normal; font-weight: 900; }
.inter-specimen-2 { font-family: "InterDisplay"; font-style: italic; font-weight: 900; }

.h1 {                                                            
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px 0px 30px;
    justify-content: center;
    align-items: left;
    font-family: "IBMPlexMono";
    font-size: var(--font-size-h1);
    line-height: 1.6;
    color: var(--white);
    text-align: center;
}

.p1 {                                                            
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 10px 15px 30px;
    justify-content: center;
    align-items: left;
    font-family: "IBMPlexMono";
    font-size: var(--font-size-p1);
    line-height: 1.6;
    color: var(--white);
    text-align: left;
}

.p1-underline {                                                            
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px 15px 30px;
    justify-content: center;
    align-items: left;
    font-family: "IBMPlexMono";
    font-size: var(--font-size-p1);
    line-height: 1.6;
    color: var(--white);
    text-decoration-line: underline;
    text-align: left;
}

.ascii-art {                                                            
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 0px 0px 50px;
    justify-content: center;
    align-items: left;
    font-family: "IBMPlexMono";
    font-size: var(--font-size-p1);
    line-height: 1.6;
    color: var(--white);
    text-align: left;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px; 
    background: linear-gradient(
        to bottom,
        var(--black) 0%,  
        var(--black) 50%, 
        rgba(255, 255, 255, 0) 100%   
    );
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0px 0px 80px;
    height: 60px;
}

.nav-buttons {
    display: flex;
    gap: 10px;
    position: absolute;
    left: 20px;
    top: 15px;
}

#index-btn {
    padding: 0px 10px 0px 10px;
    line-height: 0rem;
    background-color: var(--black);
    color: var(--green);
    border: none;
    margin: 0;
    cursor: pointer;
    font-weight: regular;
    user-select: none;
    transition: transform 0.2s ease;
    font-family: 'IBMPlexMono', monospace;
    border-radius: 6px;
    font-size: var(--font-size-p1);
}

#glossary-btn,
#sources-btn,
#download-btn {
    padding: 0px 10px 0px 10px;
    line-height: 0rem;
    background-color: var(--black);
    color: var(--green);
    border: none;
    margin: 0;
    cursor: pointer;
    font-weight: regular;
    user-select: none;
    transition: transform 0.2s ease;
    font-family: 'IBMPlexMono', monospace;
    border-radius: 6px;
    font-size: var(--font-size-p1);
}

#glossary-btn:hover,
#sources-btn:hover,
#download-btn:hover {
    transform: scale(1.05);
}

#index-btn:focus,
#glossary-btn:focus,
#sources-btn:focus,
#download-btn:focus {
    outline: none;
}

.nav-link-btn {
    padding: 0px 10px 0px 10px;
    line-height: 0rem;
    background-color: var(--black);
    color: var(--green);
    border: none;
    margin: 0;
    cursor: pointer;
    font-weight: regular;
    user-select: none;
    transition: transform 0.2s ease;
    font-family: 'IBMPlexMono', monospace;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-p1);
}

.nav-link-btn:hover {
    transform: scale(1.05);
}

.nav-link-btn:focus {
    outline: none;
}

#lang-btn {
    padding: 0px 10px 0px 10px;
    line-height: 0rem;
    background-color: var(--black);
    color: var(--green);
    border: none;
    margin: 0;
    cursor: pointer;
    font-weight: regular;
    user-select: none;
    transition: transform 0.2s ease;
    font-family: 'IBMPlexMono', monospace;
    border-radius: 6px;
}

#lang-btn:hover {
    transform: scale(1.05);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .h1 {
        font-size: 1.5rem;
        padding: 20px 15px 0px 15px;
    }
    
    .p1 {
        font-size: 0.9rem;
        padding: 20px 15px 15px 15px;
    }
    
    .p1-underline {
        font-size: 0.9rem;
        padding: 20px 15px 15px 15px;
    }
    
    .ascii-art {
        font-size: 0.9rem;
        padding: 30px 15px 0px 15px;
    }
    
    .nav-buttons {
        gap: 5px;
        left: 10px;
        top: 10px;
    }
    
    .nav-link-btn {
        padding: 5px 8px;
        font-size: var(--font-size-p1);
    }
    
    #index-btn {
        padding: 5px 8px;
        font-size: var(--font-size-p1);
    }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
    .h1 {
        font-size: 1.3rem;
        padding: 15px 10px 0px 10px;
    }
    
    .p1 {
        font-size: 0.85rem;
        padding: 15px 10px 15px 10px;
    }
    
    .p1-underline {
        font-size: 0.85rem;
        padding: 15px 10px 15px 10px;
    }
    
    .ascii-art {
        font-size: 0.85rem;
        padding: 20px 10px 0px 10px;
    }
    
    .nav-buttons {
        gap: 3px;
        left: 5px;
        top: 8px;
        flex-wrap: wrap;
    }
    
    .nav-link-btn {
        padding: 4px 6px;
        font-size: var(--font-size-p1);
    }
    
    #index-btn {
        padding: 4px 6px;
        font-size: var(--font-size-p1);
    }
}

/* ---------------- Tool Frame Styles ---------------- */

.tool-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--black);
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.tool-frame.hidden {
    display: none;
}

.tool-frame-header {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2001;
}

.back-btn {
    padding: 10px 20px;
    background-color: var(--black);
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 6px;
    font-family: 'IBMPlexMono', monospace;
    font-size: var(--font-size-p1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background-color: var(--green);
    color: var(--black);
}

#dot-type-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.tool-btn {
    padding: 15px 30px;
    background-color: var(--green);
    color: var(--black);
    border: none;
    border-radius: 6px;
    font-family: 'IBMPlexMono', monospace;
    font-size: var(--font-size-p1);
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 10px;
}

.tool-btn:hover {
    transform: scale(1.05);
}