@font-face {
    font-family: "Carlito";
    font-style: normal;
    src: url( "fonts/Carlito-Regular.ttf" );
}

@font-face {
    font-family: "Carlito";
    font-style: italic;
    src: url( "fonts/Carlito-Italic.ttf" );
}

@font-face {
    font-family: "Carlito";
    font-weight: bold;
    src: url( "fonts/Carlito-Bold.ttf" );
}

@font-face {
    font-family: "Carlito";
    font-style: italic;
    font-weight: bold;
    src: url( "fonts/Carlito-BoldItalic.ttf" );
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: "Carlito", sans-serif;
    background-color: hsl( 325 100% 10% );
}

main,
header {
    border: .2rem solid hsl( 0 0% 100% );
    margin-block: 1rem;

    background-color: hsl( 185 70% 50% );
}

header {
    margin-inline: 2.5rem;
}

h1 {
    margin-block: .1em;
    margin-inline: .6em;

    font-size: 1.6em;
}

main {
    max-inline-size: 55rem;
    margin-inline: auto;
}

code:has( > kbd ),
.conf-file {
    display: block;
    padding: 0.3em;
    border: .1em solid hsl( 0 0% 100% );
    margin-block: .6em;

    font-family: monospace;
    color: hsl( 0 0% 100% );
    background-color: hsl( 235 10% 20% );
}

code:has( > kbd )::before {
    content: "$ ";
}

.conf-path {
    padding-block-end: .2em;
    border-block-end: .1em dashed hsl( 0 0% 100% );
    margin-block-end: .65em;
}

var,
var a{
    color: hsl( 135 80% 50% );
}

var::before {
    content: "<";
}

var::after {
    content: ">";
}

.preserve-spaces {
    white-space-collapse: preserve-spaces;
}