/*
 * style.css
 * Copyright (C) 2020 mononoke
 *
 * Distributed under terms of the MIT license.
 */
@import "nord.css";

:root {
    /* --accent-color: #688f56; */
    --accent-color: #517043;
    --code-font-color: gray;
    --code-bg-color: #EEE;
    --removed-color: #b71c1c;
}

::selection {
    background: var(--accent-color);
    color: white;
}

body {
    background: white;
    color: var(--nord0);
    overflow-y: scroll;
    display: flex;
    margin: auto;
    font-family:fira, sans-serif;
}

.body {
    /* display: flex; */
    /* margin: auto; */
    /* justify-content: center; */
    /* margin-top:2em; */
    display: flex;
    margin:auto;
    margin-top:2em;
    margin-bottom: 5em;
}

.main {
    /* max-width: 40em; */
    max-width:40em;
    margin-left:16.5em;
    margin-right: 1em;
}
.sidebar {
    /* margin-right: 3em; */
    /* margin-top:3em; */
    /* padding-top:1em; */
    /* position: sticky; */
    /* align-self: flex-start; */
    /* top: 0; */
    /* width: 13em; */
    padding: 1em;
    position: fixed;
    top: 5em;
    bottom: 0;
    width: 14em;
    overflow-y: auto;
    overflow-x:hidden;
}

.par {
    display:flex;
    align-items:flex-start;
}
.par img {
    align-self:flex-start;
    width:10em;
    height:10em;
    margin-right:1em;
}
.par p {
    margin-top : 0;
    text-align:justify;
}

a {
    text-decoration: none;
    color: var(--accent-color);
}

code {
    background-color: var(--nord6);
    color: var(--nord3);
    padding: 0.2em;
    border-radius: 0.3em;
    font-family: fantasque, monospace;
}

.codeblock {
    padding: 1em;
    display:block;
    margin:1em;
    text-align:left;
}

.commandDesc {
    border-left: 2px solid var(--nord3);
    padding-left:1.5em;
    text-align: justify;
}

.commandlink {
    font-family: fantasque, monospace;
    color: var(--accent-color);
}

.removedcommandlink {
    font-family: fantasque, monospace;
    color: var(--removed-color);
    cursor: pointer;
}

.commandName {
    margin-top:2em;
    display: flex;
    align-items: baseline;
}
.commandName * {
    margin:0;
    display: inline;
}
.commandName p {
    font-family: fantasque, monospace;
    font-style: italic;
    color: var(--accent-color);
    margin-left: 1em;
}

.commandDesc ul {
    list-style-type:none;
}
.commandDesc table {
    margin-left: 2em;
}
.commandDesc table tr td:first-child {
    text-align:right;
    padding-right:1em;
    padding-bottom:0.5em;
    vertical-align:top;
    white-space: nowrap;
}

h2 {
    margin-top: 2em;
}

.inside {
    border-left: 2px solid var(--nord3);
    padding-bottom:0.5em;
    margin-left:0.2em;
}

.sidebar .top {
    margin-top:0.5em;
}
.sidebar .top a {
    display: block;
    /* line-height:1.4em;*/
}

.sidebar .sub {
    border-left: 2px solid var(--nord3);
    /* padding-left: 1em;*/
    padding-top: 0.2em;
    margin-left:1.2em;
}

.current {
    margin-bottom:0;
}

.changes tr {
    vertical-align: top;
}

.changes tr td p {
    margin:0;
    margin-bottom:1em;
    padding-top: 0.3em;
}

.changes tr td:last-child p {
    text-align: justify;
}

.change p {
    border: 1px solid black;
    border-radius: 0.3em;
    padding:0.3em;
    font-family: fantasque, monospace;
    display:inline;
}
.change {
    margin-top:0.3em;
    margin-right:1em;
}

img {
    border-radius: 0.3em;
}

figure {
    display: block;
    margin: auto;
    margin-bottom: 2em;
}

figure img {
    display:block;
    margin: auto;
    margin-bottom:1em;
}
figcaption {
    text-align: center;
}

@font-face {
    font-family: fantasque;
    src: url('fonts/fsmr.ttf');
    font-display: swap;
}
@font-face {
    font-family: fira;
    src: url('fonts/FiraSans-Regular.ttf');
    font-display: swap;
}

.added p {
    background-color: var(--nord14);
    border: 0;
}

.changed p {
    background-color: var(--nord13);;
    border: 0;
}

.removed p {
    background-color: var(--nord11);
    border: 0;
}

.fixed p {
    background-color: var(--nord15);
    border: 0;
}

.deprecated p {
    background-color: var(--nord12);
    border: 0;
}

#legend tr td {
    padding-top:0.5em;
    vertical-align: top;
}

#legend tr td:first-child {
    white-space: nowrap;
    padding-right:1em;
}

#legend tr td:last-child {
    text-align:justify;
}


.sub a span {
    background-color:white;
    padding-left:0.4em;
    margin-left:0.4em;
    padding-right:100%;
    white-space:nowrap;
}

.sub a {
    border-bottom: 2px solid var(--nord3);
}

.top a {
    line-height:0.1em;
    padding-top:1.4em;
    border-bottom: 2px solid var(--nord3);
}

.top a span {
    background-color:white;
    padding-left:0.5em;
    margin-left:0.5em;
    padding-right:100%;
    white-space:nowrap;
    padding-bottom: 0.3em;
}

#todo li {
    margin-bottom:1em;
}