:root {
    --font-sans: ui-sans-serif, sans-serif;
    --font-serif: Georgia, ui-serif, serif;
    --font-mono: ui-monospace, monospace;
    --font-size-main: 19px;
    --font-size-small: .75rem;
    --color-white: #fff;
    --color-black: #000;
    --color-light-gray: #c9c9c9;
    --color-dark-gray: #1b1b1b;
    --color-code-font: orangered;
    --color-code-back: #f0e8e0;
}

* {
    box-sizing: border-box;
}

html {
    font: var(--font-size-main)/1.6 var(--font-serif);
    color: var(--color-dark-gray);
}

/***/

main {
    margin: 4rem auto
}
main > * {
    max-width: 70ch;
    margin: 0 auto
}
a, a:visited {
    color: var(--color-black);
}
header, input, textarea {
    width: 100%;
    margin-bottom: 1rem;
    border: none;
    outline: none;
}
#note-content {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    outline: none;
}
pre, code {
    background: var(--color-code-back);
    color: var(--color-code-font);
    font-family: var(--font-mono);
}
pre {
    border-radius: .3rem;
    overflow: auto;
}
pre code {
    font-size: var(--font-size-small);
}
:not(pre)>code {
    padding: .1rem .25rem;
    border-radius: .25rem;
}
img {
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--color-light-gray);
}
input[type="text"], article h1:first-of-type {
    font-size: 2rem;
    font-weight: 600;
    font-family: var(--font-sans);
    margin: 0 0 2rem
}
textarea {
    font-size: 1.1rem;
    font-family: var(--font-serif);
    resize: none;
}

.secret {
    display: inline-block;
}

.secret input {
    appearance: none;
}

.secret input:before {
    content: 'Burn After Reading ❌';
}

.secret input:checked:before {
    content: 'Burn After Reading 🔥';
}

button, select, section#actions a,.secret input:before {
    background: var(--color-white);
    opacity: .4;
    font-size: 1rem;
    font-family: var(--font-sans);
    text-decoration: none;
    padding: .25rem .5rem;
    border: 2px solid;
    border-radius: 2rem;
    outline: none;
}

:is(button, select, section#actions a):hover, .secret input:checked:before {
    opacity: 1;
}

aside {
    font-size: var(--font-size-small);
    font-family: var(--font-sans);
    color: var(--color-light-gray);
}

section#actions {
    margin-top: 2rem;
    text-align: right;
}

section#actions a#delete {
    color: #de1414;
    border-color: #de1414;
}

hr {
    margin: 2rem 0;
    border: none;
    max-width: none;
}

hr:after {
    display: block;
    text-align: center;
    content: '***';
    font: 1.5rem/1.6 var(--font-serif);
}
footer {
    display: flex;
    justify-content: space-between;
}
footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
footer ul li {
    display: inline-block;
    margin-left: 1rem
}

.mobile {
    display: none
}

/* IMAGE HELPERS */

.big {
    max-width: 100vw;
    margin: 2rem -100% 2rem 50%;
    transform: translateX(-50%);
}

.half {
    width: 50%;
}

.third {
    width: 33%;
}

.right {
    float: right;
}

.left {
    float: left;
}

/* MOBILE */

@media only screen and (min-width: 360px) and (max-width: 800px) {
    main {
        margin: .5rem
    }

    .mobile {
        display: initial;
    }

    .desktop {
        display: none;
    }
}