@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');

* {
    box-sizing: border-box;
    --bgnd: #D6FFEF;
    --sec: #F4C4AA;
    --pri: #9C4141;
    --w: 50rem;
}

html {
    font-family: 'Funnel Display', sans-serif;
    font-size: 20px;
    color: var(--pri);
    background: var(--bgnd);
}

body {
    margin: auto;
    padding: 1rem;
    max-width: var(--w);
}

.crane {
    width: 8rem;
    aspect-ratio: 1;
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: -1;
}

.title {
    font-size: 5rem;
    border: none;
    transition: letter-spacing 0.1s linear;
    display: block;

    &:hover, &:focus {
	letter-spacing: 25%;
	background-color: initial;
    }
}

.floater {
    display: block;
    width: 2rem;
    aspect-ratio: 1;
    background-color: var(--pri);
    position: sticky;
    top: 1rem;
    margin-left: auto;
    border: none;

}

blockquote {
    font-style: italic;
    border-left: 0.5rem solid var(--sec);
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--sec);
    transition: background-color 0.1s linear;

    &:hover {
	background-color: var(--sec);
    }
    &[target="_blank"]::after {
	content: '↗';
    }
    &[href^="gemini"]::after {
	content: '🚀';
    }

}

ul {
    list-style: square;
}

pre {
    tab-size: 2em;
    background: rgba(255, 255, 255, 0.5);
    padding-left: 0.5rem;
}

header, footer {
    text-align: center;
    padding: 2rem;
    background-color: var(--pri);
    background: linear-gradient(45deg, var(--bgnd) 2rem, var(--pri) 2.01rem);;
    color: var(--bgnd);
}

table {
    margin: auto
}

table, tr, td {
    border-collapse: collapse;
}

td {
    border: solid var(--bgnd);
    border-width: 0 0.2rem;
    padding: 0.5rem;
}