/* Font: fonts/Barriecito-Regular.ttf */
@font-face {
    font-family: 'Barriecito';
    src: url('fonts/Barriecito-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Pontano Sans';
    src: url('fonts/PontanoSans-Regular.ttf') format('truetype');
}
.barriecito, header, h1, h2 {
    font-family: 'Barriecito', sans-serif;
}
.pontano, main, .toots, footer {
    font-family: 'Pontano Sans', sans-serif;
}
* {
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
    color: black;
}
header {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: black;
    color: white;

    background-image: url('bg.png');
    background-size: max(100%, 1000px) auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
header h1 {
    font-size: min(20vh, 16vw);
    padding-bottom: 10vh;
    text-align: center;
    display: flex;
}
.text-right {
    text-align: right;
}
@keyframes shake_1 {
    0% { transform: translate(0, 0) scale(0.97) rotate(0.02rad); }
    7% { transform: translate(-2%, -1%) scale(1.03) rotate(-0.05rad); }
    14% { transform: translate(3%, 2%) scale(0.98) rotate(0.02rad); }
    21% { transform: translate(-4%, -3%) scale(1.04) rotate(-0.07rad); }
    28% { transform: translate(5%, 1%) scale(0.96) rotate(0.04rad); }
    35% { transform: translate(-3%, -2%) scale(1.02) rotate(-0.06rad); }
    42% { transform: translate(1%, 4%) scale(0.99) rotate(0.03rad); }
    49% { transform: translate(-5%, 0) scale(0.94) rotate(-0.05rad); }
    56% { transform: translate(4%, -3%) scale(1.05) rotate(0.03rad); }
    63% { transform: translate(-2%, 5%) scale(0.97) rotate(-0.03rad); }
    70% { transform: translate(6%, -1%) scale(1.00) rotate(0.05rad); }
    77% { transform: translate(0, -6%) scale(0.95) rotate(-0.02rad); }
    84% { transform: translate(3%, 0) scale(1.03) rotate(0.07rad); }
    91% { transform: translate(-4%, 4%) scale(0.92) rotate(-0.06rad); }
    100% { transform: translate(0, 0) scale(0.97) rotate(0.02rad); }
}
@keyframes shake_2 {
    0% { transform: translate(0, 0) scale(0.97) rotate(0.03rad); }
    7% { transform: translate(-3%, -2%) scale(1.05) rotate(-0.03rad); }
    14% { transform: translate(5%, 3%) scale(0.92) rotate(0.03rad); }
    21% { transform: translate(-8%, -6%) scale(1.02) rotate(-0.02rad); }
    28% { transform: translate(10%, 4%) scale(0.95) rotate(0.07rad); }
    35% { transform: translate(-6%, -1%) scale(1.03) rotate(-0.05rad); }
    42% { transform: translate(2%, 7%) scale(0.98) rotate(0.05rad); }
    49% { transform: translate(-10%, 0) scale(0.9) rotate(-0.04rad); }
    56% { transform: translate(7%, -4%) scale(1.07) rotate(0.04rad); }
    63% { transform: translate(-4%, 8%) scale(0.93) rotate(-0.1rad); }
    70% { transform: translate(9%, -2%) scale(1.01) rotate(0.04rad); }
    77% { transform: translate(-1%, -9%) scale(0.96) rotate(-0.03rad); }
    84% { transform: translate(6%, 1%) scale(1.04) rotate(0.03rad); }
    91% { transform: translate(-7%, 5%) scale(0.91) rotate(-0.04rad); }
    100% { transform: translate(0, 0) scale(0.97) rotate(0.03rad); }
}
@keyframes shake_3 {
    0% { transform: translate(0, 0) scale(0.97) rotate(0.01rad); }
    7% { transform: translate(-8%, -3%) scale(1.08) rotate(-0.03rad); }
    14% { transform: translate(6%, 5%) scale(0.9) rotate(0.03rad); }
    21% { transform: translate(-5%, -7%) scale(1.05) rotate(-0.02rad); }
    28% { transform: translate(2%, 2%) scale(0.93) rotate(0.01rad); }
    35% { transform: translate(-9%, -4%) scale(1.06) rotate(-0.03rad); }
    42% { transform: translate(4%, 8%) scale(0.96) rotate(0.04rad); }
    49% { transform: translate(-3%, 0) scale(0.98) rotate(-0.03rad); }
    56% { transform: translate(8%, -5%) scale(1.03) rotate(0.04rad); }
    63% { transform: translate(-5%, 9%) scale(0.92) rotate(-0.02rad); }
    70% { transform: translate(10%, -3%) scale(1.03) rotate(0.02rad); }
    77% { transform: translate(-2%, -10%) scale(0.95) rotate(-0.04rad); }
    84% { transform: translate(7%, 1%) scale(1.07) rotate(0.01rad); }
    91% { transform: translate(-6%, 6%) scale(0.89) rotate(-0.04rad); }
    100% { transform: translate(0, 0) scale(0.97) rotate(0.01rad); }
}
.letter {
    display: inline-block;
    text-transform: uppercase;
}
.letter.--t {
    animation: shake_1 0.59s ease-in-out infinite;
}
.letter.--o {
    animation: shake_2 0.61s linear infinite alternate;
}
.letter.--m {
    animation: shake_1 0.79s ease-in-out infinite;
}
.letter.--u {
    animation: shake_3 0.84s ease-in-out infinite alternate;
}
.letter.--c {
    animation: shake_2 0.68s ease-in-out infinite;
}
.letter.--h {
    animation: shake_3 0.71s linear infinite alternate;
}
.letter.--a {
    animation: shake_1 0.94s ease-out infinite;
}

/* MAIN ============= */
main {
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
}
main > div {
    display: flex;
    gap: 4em;
    padding: 5em;
    max-width: 1600px;
}
main > div > section {
    width: 50%;
    padding: 0;
}
main a {
    text-decoration: underline;
    color: #700;
}
main a:hover {
    color: #000;
}
.cave {
    text-align: left;
}
.cave img {
    width: 70%;
    max-width: 300px;
    margin-top: 10em;
    margin-bottom: 2em;
}
dd {
    margin-bottom: 1em;
}

/* MASTODON ========= */
.before-toots {
    margin-bottom: 2em;
}
.toots {
    max-width: 100%;
}
.toot {
    padding:0;
    margin-bottom: 2em;
}
.toot .boost {
    margin-bottom: 1em;
}
.toot .boost:before {
    content:"";
}
.toot .boost:after {
    content:"▼";
}
.toot .permalink {
    text-decoration: underline;
    color: #700;
}
.toot .permalink:hover {
    color: #000;
}
.toot img.attachment {
    max-height: 20em;
}

footer {
    width: 100%;
    height: 20em;
    font-size: 120%;

    background-color: black;
    color: white;
    padding-top: 10em;
    text-align: center;

    background-image: url('bg2.png');
    background-size: max(100%, 1000px) auto;
    background-position: center top;
    background-repeat: no-repeat;
}
footer a {
    color: #ddd;
}
footer a:hover {
    color: #fff;
}

@media (max-width: 900px) {
    main > div {
        flex-direction: column;
        gap: 0;
    }
    main > div > section {
        width: 100%;
    }
    .toots {
        max-width: 30em;
    }
}
@media (max-width: 600px) {
    main > div {
        padding: 2em;
    }
}