@import url('https://fonts.googleapis.com/css2?family=Stint+Ultra+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    background-size: contain;
    background-image: url('roses.gif');
    background-color: #090b18;
    image-rendering: pixelated;
}

body {
    image-rendering: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    border-color: white;
    border-style: dashed;
    color: white;
    background: black;
    font-family: "Stint Ultra Condensed", serif;
    font-size: 20pt;
    max-width: min(30em, 85%);
    word-break: break-word;
}

img {
  border-style: none;
}

h1 {
    font-family: "Roboto", sans-serif;
    font-size: 2em;
    margin: 0.67em 0;
    text-transform: lowercase;
    background: #090b18;
    padding: 0.5em;
    border-style: dashed;
    border-color: white;
    animation: 1s steps(2) 0s infinite normal both running title;
}

@keyframes title {
    0% {
        transform: translate(-0.05em, -0.05em);
    }
    50% {
        transform: translate(0.05em, 0.05em);
    }
}

h1::before {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "🙞✿";
}

h1::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "✿🙙";
}

h2 {
    text-align: center;
    text-transform: lowercase;
    text-decoration: underline;
    color: red;
    animation: 1s steps(2) 0.1s infinite normal both running title;
}

h2::before, h2::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "✽";
}

h3 {
    text-transform: lowercase;
    text-decoration: underline;
    animation: 1s steps(2) 0.2s infinite normal both running title;
}

h3::before, h3::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "❀";
}

a {
    background-color: transparent;
}

strong {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: bolder;
}

strong::before, strong::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "🯆";
}

img {
    border-style: none;
}

q {
    color: red;
    font-family: "Roboto", sans-serif;
    text-transform: none;
    font-size: 70%;
}

/* wittg */
.w {
    color: green;
}

/* media */
.m {
    color: cyan;
}

/* the */
.t {
    color: pink;
}

/* math */
.a {
    color: magenta;
}

/* langauge */
.l {
    color: tan;
}

/* self-identity */
.i {
    color: yellow;
}

/* death */
.d {
    color: grey;
}

.w, .m, .t, .a, .l, .i, .d {
    display: inline-block;
    font-style: italic;
    animation: 3s linear 0s infinite normal both running float;
}

*::before, *::after {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    animation: .4s ease 0s infinite normal both running squish;
}

.w::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "★";
    color: yellow;
    font-size: 80%;
}

.m::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "✦";
    color: yellow;
}

.d::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "⮿";
    color: red;
}

.l::after {
    font-family: "Noto Serif TC", serif;
    content: "語";
    color: white;
}

.i::after {
    font-family: "Noto Serif TC", serif;
    content: "我";
    color: white;
}

.t::after {
    content: "";
    background-image: url("hand-of-god.webp");
    background-size: 100% 100%;
    display: inline-block;
    width: 2em;
    height: 2em;
    margin-left: .2em;
}

.a::after {
    content: "";
    background-image: url("fano.png");
    background-size: 100% 100%;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: .2em;
}

ul.textlist {
    list-style-type: ":3 ";
}

ul.textlist li {
    text-transform: lowercase;
}

li::marker {
    font-family: "Roboto", sans-serif;
    color: orange;
}

ul.buttonlist {
    padding-left: 0em;
}

ul.buttonlist li {
    display: inline-block;
}

a:link {
    color: cyan;
}

a:visited {
    color: lime;
}

.buttonlist a {
    background: #101010;
    display: inline-block;
    border-color: white;
    border-style: solid;
    margin: 3px;
}

.buttonlist a:hover {
    background: #303060;
    animation: 1s linear 0s infinite normal both running float;
}

.buttonlist a img {
    width: 3em;
    height: 3em;
}

p {
    animation: 0.9s steps(2) 0s infinite normal both running para;
}

@keyframes para {
    0% {
        transform: translate(-0.15em, 0em);
    }
    100% {
        transform: translate(0.15em, 0em);
    }
}

p::before {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "❧";
}

p::after {
    font-family: "Noto Sans Symbols 2", sans-serif;
    content: "❦";
    display: inline-block;
    margin-left: auto;
}

@keyframes squish {
    0% {
        transform: scale(100%, 100%);
    }
    25% {
        transform: scale(95%, 105%);
    }
    50% {
        transform: scale(100%, 100%);
    }
    75% {
        transform: scale(105%, 95%);
    }
    100% {
        transform: scale(100%, 100%);
    }
}

@keyframes float {
    from {
        transform: rotate(0deg) translateX(0.15em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(0.15em) rotate(-360deg);
    }
}