@font-face {
    font-family: "PublicSans";
    src: url("fonts/PublicSans-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "PublicSans";
    src: url("fonts/PublicSans-ExtraBold.ttf") format("truetype");
    font-weight: bold;
}

:root {
    /* colors */
    --background: #12111b;
    --background-secondary: #211f2f;
    --background-tertiary: #34314c;

    --text: #fdfcff;
    --text-secondary: #b5b3b7;
    --text-tertiary: #696883;

    --accent-1: #288df6;
    --accent-2: #f69228;

    /* constants */
    --radius-normal: 0.4em;
    --radius-large: 0.8em;
}

html {
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    background-color: var(--background);
    min-height: 100vh;
}

body,
table {
    font-size: 1em;
    color: var(--text-secondary);
    background-color: var(--background);
    font-family: "PublicSans";
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1 {
    color: var(--text);
    font-weight: bold;
    font-size: 2.5em;
    line-height: 1.1em;
    margin: 0.5em 0em 0.2em 0em;
}

h2 {
    color: var(--text-secondary);
}

h3 {
    color: var(--text-tertiary);
}

footer {
    color: var(--text-tertiary);
}

a,
a:visited {
    color: var(--accent-1);
    text-decoration: none;
}

/* used for post dates */
time {
    color: var(--text-tertiary);
}

/* inline code */
code {
    padding: 0.2em;
    border-radius: var(--radius-normal);
    color: var(--accent-2);
    background: var(--background-secondary);
    font-family: "Monaco";
}

/* horizontal rule */
hr {
    border: none;
    border-top: none;
    height: 1px;
    background-color: var(--background-tertiary);

}

/* table header */
th {
    background-color: var(--background-secondary);
    padding: 0.75em 1em 0.75em 1em;
    border-radius: var(--radius-normal);
}

/* table cell */
td {
    background-color: var(--background-secondary);
    padding: 0.75em 1em 0.75em 1em;
    border-radius: var(--radius-normal);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-large);
}

blockquote {
    color: var(--text-tertiary);
}

.wrapper {
  max-width: 40em;
  margin: 0px auto;
  padding:1em 1em;
}

.wrapper.full-width {
    max-width: 100%;
}

.brainmade {
    width: 120px;
    border-radius: 0;
}

.social {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0;
    margin-right: 1em;
}

/* Nav */
.nav {
    display: flex;
    padding: 0;
    padding-top: 1em;
    margin: 0;
    list-style: none;
}
.nav-item {
    display: inline-block;
    margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
    text-decoration: none;
}
.nav a[href][aria-current="page"] {
    text-decoration: underline;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media only screen and (max-width: 570px) {
    h1 {
        font-size: 1.8em;
        line-height: 1.1em;
    }

    .icon {
        max-width: 4.5em;
    }
}

/* Reusable link hover color effect */
a.hover-accent,
a.hover-accent:visited {
    color: var(--text-tertiary);
}

a.hover-accent:hover {
    color: var(--accent-1);
}

/* For SVG images */
.hover-accent-filter {
    cursor: pointer;
}