* { margin: 0; }
html, body { height: 100%; overflow: hidden; }
:root {
    --bright: #c52289;
    --veybright: #ff1bab;
    --dark: #1f2937;
    --verydark: #141c27;
    --shadow: #080c13;
}
header {
    font-family: ui-monospace,  Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;   
    color: var(--bright);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    box-shadow: 5px 5px 10px var(--shadow);
    border-radius: .5em;
}
header a {
    color: currentColor;
    display: block;
    text-decoration: none;
}
header a:hover, header a:focus, header a.active { color: var(--veybright); outline: none;}
h1 {
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    background: var(--verydark);
    padding: .5em .5em .5em 1em;
    gap: .5em;
    border-radius: .5em .5em 0 0;
    cursor: move;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1 strong { flex: 1;}
h1 button { padding: 0 .5em; background: var(--bright); color: var(--dark); border: none; border-radius: .25em;}

h1, #index {
    
}

#index {
    padding: .5em 1em 1em;
    background: var(--dark);
    border-radius: 0 0 .5em .5em;
    line-height: 1.4;
    max-height: 15em;
    
}
#index hr { background: none; border:none; border-top: 1px solid var(--bright); opacity: .5; margin: .5em 0; display: none;}
#index hr ~ a { display: none; }
#index.showall { overflow-y: scroll;}
#index.showall hr { display: block; }
#index.showall hr ~ a { display: block; }

#iframe{
    border: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    background: white;  
}