#title-with-tip {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#title {
    user-select: none;
}

@media (pointer:none), (pointer:coarse) {
    #title {
        font-size: 2vw;
    }
}

.title-line {
    white-space: pre;
    color: #FBC546;
}

[class^="_"] {
    position: relative;
    top: 0;
    transition: top ease 500ms;
}

#title:has(._p:hover) ._p { top: -10px }
#title:has(._o:hover) ._o { top: -10px }
#title:has(._z:hover) ._z { top: -10px }

#title-tip {
    position: absolute;
    right: 2.5em;
    font-size: 0.75em;
    max-width: 25ch;
    outline: #DDDDDD solid 1px;
    padding: 0.25em;
}

#title-tip > br {
    display: block;
    margin: 0.25em 0;
}

#about-me {
    outline: #DDDDDD solid 1px;
    padding: 0.5em;
    margin: auto 5% auto;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

#about-me > ul {
    list-style-position: inside;
}

#about-me > ul > li > ul {
    list-style-type: disc;
    margin-left: 1.5em;
}

#webrings {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.webring {
    display: flex;
    flex-direction: row;
}

.webring > hr {
    margin: auto 1em auto;
    height: 1em;
    width: auto;
}