path: root/style.css

@import url('https://fonts.googleapis.com/css2?family=Geologica&family=Montserrat+Subrayada:wght@700&display=swap');

:root {
    --text-color: hsl(99, 36%, 81%);
    --bg-color: hsl(290, 100%, 8%);
    --bg2-color: hsl(290, 100%, 4%);
    --em-color: hsl(294, 42%, 65%);
    --sub-color: hsl(294, 42%, 50%);
    --link-color: hsl(324, 42%, 55%);

    font-family: 'Geologica', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin: 0px;
    
    background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 18px, var(--bg2-color) 18px, var(--bg2-color) 21px);
    background-attachment: fixed;
    color: var(--text-color);

    padding-top: 5mm;
}

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

section, footer {
    margin-bottom: 1cm;
    padding: 5mm;
    border-radius: 3.5mm;
    
    background: #fff1;
    backdrop-filter: blur(5px);

    max-width: 20cm;
}

hgroup,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat Subrayada', sans-serif;

}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--em-color)
}

hgroup > p {
    color: var(--sub-color)
}

section > pre {
    background: var(--bg2-color);
    padding: 2.5mm;
    border-radius: 2.5mm;

    width: auto;
}

footer {
    color: var(--sub-color);
    margin-bottom: 5mm;
}
footer > p { margin: 0px; }

code {
    background: var(--bg2-color);
    padding: 1mm;
    border-radius: 2mm;
}

p {
    line-height: 1.5;
}

:is(h1,h2,h3,h4,h5,h6) > a {
    color: inherit;
    text-decoration: none;
}

:is(h1,h2,h3,h4,h5,h6) > a:hover {
    color: inherit;
}