@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

/* Solarized Colors */
:root{
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;
}

/* Style */
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Inconsolata', monospace;
    background: var(--base03);
    color: var(--base0);
    overflow-x: hidden;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5em;
    background-color: var(--base02);
    display: flex;
    align-items: center;
    justify-content: center;
}
#splash {
    text-align: center;
    width: 100%;
}
#headerName {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
}
#nav {
    position: absolute;
    top: 3.5em;
    left: 0;
    right: 0;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    background: var(--base02);
    border-bottom: 0.1em solid var(--base01);
}
a {
    color: var(--blue);
    font-weight: 600;
}
a#home{
    color:var(--base1);
    text-decoration: none;
}
a:hover, a#home:hover, #headerName:hover {
    color: var(--magenta);
}
#content {
    position: absolute;
    top: 5.5em;
    left: 0;
    right: 0;
    padding: 1em;
    text-align: justify;
}
h1{
    margin-top: 0;
    font-size: 1.25em;
}
.b{
    font-weight: 600;
}
.i{
    font-style: italic;
}

.isCurrentPage, .isCurrentPage:hover{
    color: var(--yellow);
    font-weight: 600;
    text-decoration: none;
    cursor: text;
    font-size: 1.25em;
}

/* Script Modals */
.script{
    background: var(--base02);
    margin-bottom: 0.5em;
}

.scriptHeader{
    border-bottom: 0.1em solid var(--base01);
    padding: 0.5em;
}

.scriptBody{
    padding: 0.5em;
}

.scriptHeader .scriptFilename{
    font-weight: bold;
}

.videoContainer{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

iframe{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}