@font-face {
  font-family: "Source Serif 4";
  font-weight: 400;
  font-style: normal;
  src: url(fonts/source-serif-4-latin-400-normal.woff2);
}

@font-face {
  font-family: "DINish";
  font-weight: 400;
  src: url(fonts/DINish-Regular.woff2);
}

@font-face {
  font-family: "DINish";
  font-weight: 400;
  font-style: italic;
  src: url(fonts/DINish-Italic.woff2);
}

@font-face {
  font-family: "DINish";
  font-weight: 600;
  src: url(fonts/DINish-SemiBold.woff2);
}

@font-face {
  font-family: "DINish";
  font-weight: 800;
  src: url(fonts/DINish-Heavy.woff2);
}

@font-face {
  font-family: "Source Serif 4";
  font-weight: 700;
  font-style: normal;
  src: url(fonts/source-serif-4-latin-700-normal.woff2);
}

@font-face {
  font-family: "Source Serif 4";
  font-weight: 400;
  font-style: italic;
  src: url(fonts/source-serif-4-latin-400-italic.woff2);
}

@font-face {
  font-family: "Source Serif 4";
  font-weight: 600;
  font-style: normal;
  src: url(fonts/source-serif-4-latin-600-normal.woff2);
}

@font-face {
  font-family: "Source Serif 4";
  font-weight: 800;
  font-style: normal;
  src: url(fonts/source-serif-4-latin-800-normal.woff2);
}

body {
    margin: auto;
    max-width: 700px;
    text-align: justify;
    line-height: 30px;

    padding-left: 64px;
    padding-right: 64px;
    padding-top: 0px;

    color: #283b43;

    display: flex;
    flex-direction: column;
    gap: 30px;

    font-family: "Source Serif 4";
    font-size: 18px;
}

p {
    padding-top: 8px;
    padding-bottom: 8px;
    word-break: break-word;
}

em {
    display: block;
    text-align: center;
}

.description { padding-top: 0px; }

section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

* {
    padding: 0;
    margin: 0;
}

hr::before {
    content: "---";
}

hr {
    margin: auto;
    border: none;
    outline: none;
}

a,
a:visited {
    color: rgb(4, 134, 162);
    background-color: rgba(4, 134, 162, 0.1);
    border-radius: 2px;

    padding: 1px 4px;
    width: fit-content;

    word-break: break-word;
    white-space: nowrap;

    text-decoration: underline 1px dashed;
    text-underline-offset: 3px;
}

h1 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif }
h2 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; padding-top: 1em; }
h3 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif }
h4 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif }
h5 { font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif }

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child) {
    padding-top: 30px;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

code {
    font-family: monospace;
}

:not(pre) > code {
    padding: 2px 4px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 13px;
}

pre:has(code) {
    border: 0.5px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);

    padding: 8px;
    color: black;
    overflow-x: scroll;

    font-size: 13px;
}

article {
    border-bottom: 0.5px dotted black;
    display: grid;
    padding-top: 5px;
    padding-bottom: 5px;
}

table {
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;
    overflow: hidden;
}

th,
td {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.page a {
    font-size: 22px;
    font-weight: 600;
}

.post a {
    grid-row: 1;
    text-align: left;
    font-size: 22px;
    font-weight: 600;
}

.creation-date {
    grid-row: 1;
    padding: 1px 6px;
    text-align: right;
}

.description {
    grid-row: 2;
    text-align: left;
}

img { height: auto; width: 100%; }

.header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 2.5em;
    margin: auto;
    padding-right: 64px;
}
.himg { 
    width: 92px; 
    height: 92px;
    margin-right: 0.2rem;
}
.htext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    top: 4px;
}
.hlinks {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.hlinks a { 
    text-decoration: none;
    font-family: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    background-color: initial;
    font-weight: normal;
    padding: 0px;
}

.ptop {
    text-decoration: none;
    background-color: initial;
    padding-top: 3em;
}

.footer {
    display: grid;
    padding-top: 2em;
    padding-bottom: 2.5em;
}

.fcopyright {
    grid-row: 1;
    grid-column: 1;
    opacity: 20%;
}

.ftoplink {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}

.ftoplink a {
    text-decoration: none;
    background-color: initial;
}


@media (max-width: 768px) {
        body {
                padding-left: 1em;
                padding-right: 1em;
                text-align: justify;
                gap: 10px;
        }

        a, a:visited {
                word-break: unset;
                white-space: unset;
        }

        .creation-date { display: none; }

}

@media (max-width: 600px) {
        * { padding: 4px; }

        body { 
		padding-left: 1em;
		padding-right: 1.5em;
                text-align: left;
                gap: unset;
        }

        a, a:visited {
                word-break: unset;
        	white-space: unset;		
        }

	.creation-date { display: none; }
        
}

@media (max-width: 400px) {
        .header { margin: unset; }
	.himg { display: none; }
}