@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');
.alan-sans-<uniquifier> {
    font-family: "Alan Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

:root {
    --bg-1: #2e2b29;
    --bg-2: #3f3a37;
    --fg: #e8d8d0;
}

body {
    margin:0;
    padding:0;
    font-family: "Alan Sans", sans-serif;
    font-size: 18px;
    background-color: var(--bg-1);
}

#content {
    margin: 0 auto;
    padding: 16px;
    background-color: var(--bg-2);
    color: var(--fg);
    max-width: 576px;
    box-sizing: border-box;
    min-height: 100vh;
    display: flow-root;
    overflow-wrap: break-word;
}

a {
    color: var(--fg);
}

.block {
    margin: 8px;
    width: 256px;
    height: 256px;
    max-width: 256px;
    max-height: 256px;
    border: solid 2px var(--fg);
    box-sizing: border-box;
    padding: 16px;
    display: inline-block;
}

.smaller {
    height: 80px;
    max-height: 80px;
}

.larger {
    width: 528px;
    max-width: 528px;
    height: auto;
    max-height: 1920px;
}

.imgblock {
    padding: 0;
}

.block:hover {
    background-color: var(--bg-1);
}

.right {
    float: right;
}

.left {
    float: left;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

.smallwarn {
    padding: 8px;
    display: none;
    color: white;
    background-color: red;
    box-sizing: border-box;
    width: 100vw;
}

.ote {
    width: 128px;
    height: auto;
}

.social img {
    height: 48px;
    width: 48px;
    object-fit: contain;
    margin-right: 8px;
}

.social {
    display: flex;
    align-items: center;
}

.smalltext {
    font-size: 16px;
}

.du {
    text-decoration-style: dashed;
    text-decoration-line: underline;
}

.outlinetext {
    text-shadow: #000 0 0 3px;
}

#lfm {
    background-size: cover;
}