/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
body {
    background: #111;
    color: #eee;
}

@import url('https://fonts.cdnfonts.com/css/perfect-dos-vga-437');

.document {
    /* font-family: 'Perfect DOS VGA 437' !important; */
    font-size: initial;
}

body {
    scrollbar-color: #555 #222;
}

h1 {
    text-decoration: underline;
}

input, button {
    outline: none;
    border: 1px solid #111;
}

.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.millers {
    overflow: hidden;
}
.miller-column {
    flex-grow: 1;
    margin: 1em;
}
.miller-column.primary {
    width: 16%;
}
.miller-column.secondary {
    width: 32%;
    overflow: auto;
    height: 100vh;
}
.miller-column.tertiary {
    width: 50%;
    overflow:auto;
    height: 100vh;
    
    scroll-behavior: smooth;
}
.miller-column.secondary a[disabled=true] {
    pointer-events: none;
}

.document {
    padding: 2em;
    font-family: monospace;
}
.document *:hover {
    /* border-left: none; */
}
.document *:target {
    /** background: #FBF719; */
    /** text-decoration: underline; */
    /** text-decoration-color: #673ab7; */
    padding-left: 0.2em;
    border-left: 2px solid #673ab7;
}
.document div {
    margin: 1em;
}
.document nav a {
    color: #111;
}

a {
    color: inherit;
}

.item {
    background:inherit;
    color: inherit;
    padding: 1em;
    border-bottom: 1px solid;
}

.item[active=true] {
    color: white;
    text-decoration: underlined;
    font-weight: bold;
}
.floater {
    /** opacity: 0.4; */
    position: fixed;
    width: 1em;
}
.floater:hover {
    /** opacity: 0.9; */
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    /** display: none; */
}
::-webkit-scrollbar-track {
    background: #222;
}
::-webkit-scrollbar-thumb {
    background: #555;
}
pre {
    overflow-x: scroll;
    background: #eee;
    color: #222;

    padding: 1em;
}
pre strong {
    white-space: pre;
}
strong {
    white-space: normal;
}
img {
    width: 100%;
    background: rgba(250, 250, 250, .5);
}

ul.menu li {
    padding: 1em;
    list-style-type: none;
}

ul.menu li:hover {
    background: #222;
}

.document ul:not(.browser-default) {
    padding-left: revert;
}
.document ul:not(.browser-default)>li {
    list-style-type: initial;
}

.document ol:not(.browser-default) {
    padding-left: revert;
}
.document ol:not(.browser-default)>li {
    /* list-style-type: initial; */
}

input, button, select {
    background: #222;
    color: #fff;
}

.secondary a {
    text-decoration: none;
}
 
#hamburger {
    display: none;
    transform: rotate(-90deg);
    background: inherit;
    color: inherit;
    font-size: 1em;
}

@media (prefers-color-scheme: dark) {
  body, input {
    color: #FFF !important;
    background: #000 !important;
  }
                                                                      
  pre {
    color: #ddd;
    background: #222;
  }
}
                                                                      
@media (prefers-color-scheme: light) {
  body, input {
    background: #FFF !important;
    color: #222 !important;
  }
                                                                      
  pre {
    background: #ddd;
    color: #222;
  }
}

@media only screen and (max-width: 1000px) {
    .primary {
	display: none;
    }
                                                                      
    .tertiary {
	display: none;
    }
                                                                      
    body:has(.screen) .tertiary {
	display: initial;
	width: 100%;
    }
                                                                      
    body:has(.screen) .secondary {
	display: none;
    }
                                                                      
    .blank {
	width: 100vw;
    }
}