/* 
 * file:   stylesheet.css
 * date:   2022-12-07
 * author: kling0n3.de
 */

/* Custom properties (CSS-Variablen) */
:root {
    --main: #F2F2F2;
    --back: #0C0C0C;
    --light: #FFF;
    --trans: #FFFFFF0D;
    --mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

html {
    font-family: var(--mono);
    color: var(--main);
    background: var(--back);
    background-image: url("../img/background.png");
    background-attachment: fixed;
    margin: auto;
    max-width: 80em;
}

body {
    background: var(--trans);
    margin: 0;
}

/* Logo */
#logo {
    color: var(--main);
    margin: 0;
    text-align: center;
    transition: all 2s;
}

#logo:hover {
    color: var(--light);
    text-shadow: 2px 2px 5px white,
                 5px 5px 10px black;
    rotate: -5deg;
    scale: 1.25;
    transition: all .5s;
}

/* Navigation */
nav ul {
    background: var(--trans);
    list-style: none;
    margin: 0;
    padding: 1em;
}

nav li {
    display: inline;
    margin-left: 1em;
}

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

/* Links */
a {
    color: var(--main);
}
a:focus,
a:hover,
a:active { 
    color: var(--light);
    text-decoration: underline;
    text-decoration-skip: ink;
}

main p {
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
    letter-spacing: .15em;
}

/* Footer */
#footer {
    background: var(--trans);
    font-family: var(--mono);
    font-size: .8em;
    text-align: center;
    letter-spacing: .2em;
}
#footer a {
    text-decoration: none;
    text-decoration-skip: ink;
}

/* Sticky Navigation */
.sticky {
    background: var(--back);
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 80em;
    transition: all 1s;
}

.sticky + .main {
    padding-top: 60px;
}