friendenstein/public/css/style.css

:root,
:root.light {
    --bgColor: #EEEEEE;
    --fgColor: #41474E;
    --metaColor: #D26878;
    --headColor: #;
    --linkColor: #5690AF;
    --hovColor: #22453F;
    --bgSelect: #FFFAE1;
    --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
    --red: #D26878;
    --dimRed: #623039;
    --orange: #e08f67;
    --dimOrange: #926048;
    --yellow: #FFFAE1;
    --dimYellow: #D5C5A1;
    --green: #56AFA0;
    --dimGreen: #22453F;
    --blue: #5690AF;
    --dimBlue: #223844;
    --purple: #9271D6;
    --dimPurple: #47356C;
    --grey: #CBCDCD;
    --dimGrey: #646868
}

:root.dark {
    --bgColor: #222529;
    --fgColor: #D6D6D6;
    --metaColor: #78B6AD;
    --headColor: #;
    --linkColor: #DBD5BC;
    --hovColor: #E2AEA2;
    --bgSelect: #464949;
    --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
    --red: #CD909B;
    --dimRed: #684249;
    --orange: #E2AEA2;
    --dimOrange: #704941;
    --yellow: #DBD5BC;
    --dimYellow: #6F6847;
    --green: #78B6AD;
    --dimGreen: #3E615C;
    --blue: #87C9E5;
    --dimBlue: #38494F;
    --purple: #CEA7DE;
    --dimPurple: #5E406A;
    --grey: #CBCDCD;
    --dimGrey: #464949
}

::-moz-selection {
    color: var(--bgColor);
    background: var(--metaColor)
}

::selection {
    color: var(--bgColor);
    background: var(--metaColor)
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%
}

body {
    font-family: monospace;
    font-size: 1.6rem;
    line-height: 1.35;
    max-width: 64rem;
    margin: auto;
    padding: 1rem;
    overflow-wrap: break-word;
    background: var(--bgColor);
    color: var(--fgColor);
}

h1 {
    font-size: 2.4rem;
    margin: 1rem 1rem 1.5rem 0;
    color: var(--bgColor);
    background-color: var(--metaColor);
    text-align: center;
}

h1::before {
    color: var(--bgColor);
    content: '# '
}

h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
    color: var(--metaColor);
    content: '# '
}

a {
    color: var(--linkColor);
}

a:focus,
a:hover {
    background-color: var(--linkColor);
    color: var(--bgColor)
}

ul {
    list-style: none;
    margin-top: .5rem;
    margin-bottom: .5rem;
    line-height: 1.45
}

ul li::marker {
    content: '» ';
    color: var(--metaColor)
}

ul li:hover::marker {
    content: '# ';
    font-weight: 700;
    color: var(--linkColor)
}

blockquote {
    border-left: 5px solid var(--metaColor);
    margin: 1rem;
    padding: 0 0 0 1rem
}

textarea {
    border: 2px dotted;
    outline: 0;
    resize: none;
    overflow: auto;
    background-color: var(--bgColor)
}

hr {
    border: 1px dashed
}

img {
    max-width: 90%;
    height: auto;
    margin: .2rem;
    padding: .2rem;
    border: dashed 2px var(--metaColor);
    border-radius: 15px
}

pre {
    color: var(--bgColor);
    background-color: var(--fgColor);
}

p code,
li code,
div code {
    color: var(--bgColor);
    background-color: var(--fgColor);
}

iframe {
    max-width: 90%;
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    line-height: 1.1
}

thead th:first-child {
    width: 20%
}

th {
    font-weight: 400
}

td,
th {
    padding: .5rem;
    border: dashed 1px var(--metaColor)
}

footer {
    font-size: 1.4rem;
    clear: both;
    color: var(--footColor)
}

footer,
td,
th {
    text-align: left
}

.metaData,
.themeButton,
hr,
textarea {
    color: var(--metaColor)
}

.navBar {
    margin: .5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-end
}

.themeButton {
    cursor: pointer;
    border: none;
    font-size: 1.8rem;
    background-color: transparent
}

.dark .themeButton.dark,
.themeButton.light {
    display: none
}

.dark .themeButton.light {
    display: block
}

.tagsData {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-end
}

.footnote-definition {
    margin: 0 0 0 2rem;
}
.footnote-definition-label {
    color: var(--metaColor);
}
.footnote-definition p {
    display: inline;
    padding: 0 0 0 1rem;
}

.footContainer,
.footRight {
    display: flex;
    align-content: center
}

.footContainer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.footRight {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.noStyle {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0
}

.textCenter {
    text-align: center;
}

.floatRight {
    float: right
}

.floatLeft {
    float: left
}

#statuscafe {
    border: 2px dashed var(--metaColor);
    border-radius: 10px;
    margin-bottom: 2rem;
    padding: 1.4rem;
}

#statuscafe-content {
    margin-left: 1rem
}

#statuscafe:focus,
#statuscafe:hover {
    transform: scale(1.05);
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    background: var(--bgSelect)
}