@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

body {
    margin: 0;
    background: #0f0f0f;
    overflow: hidden;
}

body, html {
    height: 100%;

    --text-color: #FFFAFA;
    --text-highlight: #6a0000;
    --background-color: #0f0f0f;
    --panel-background-color: #5c1c1c25;
    --panel-highlight: #1805052d
}

p {
    margin: 0;
    padding: 0;
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 2.778vh;
}

#name {
    font-family: Inconsolata;
    font-size: 4vh;
    letter-spacing: 0.741vh;
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: -0.926vh;
    text-align: center;
}

#buttonList {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.852vh;
}

#buttonList button::before, #buttonList a::before {
    content: "[ ";
    color: var(--text-color);
    transition: color 0.14s ease-in-out; 
}

#buttonList button, #buttonList a {
    font-family: Inconsolata;
    font-size: 1.5vh;
    color: var(--text-color);
    padding: 0;
    margin: 0;
    text-transform: lowercase;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transform-origin: center;
    transition: color 0.14s ease-in-out;
}

#buttonList button:hover::before, #buttonList button:hover::after, #buttonList a:hover::before, #buttonList a:hover::after {
    color: var(--text-highlight);
}

#buttonList button::after, #buttonList a::after {
    content: " ]";
    color: var(--text-color);
    transition: color 0.14s ease-in-out;
}

#quote::before {
    content: "<< ";
    color: var(--text-highlight);
    font-style: normal;
}

#quote {
    word-break: keep-all;
    word-wrap: normal;
    white-space: nowrap;
    text-align: center;
    font-family: Inconsolata;
    font-size: 1.2vh;
    font-style: italic;
    color: var(--text-color);
    text-transform: lowercase;
}

#quote::after {
    content: " >>";
    color: var(--text-highlight);
    font-style: normal;
}

#background {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    filter: blur(1.389vh);
    transform: scale(1.1);
}

#logo {
    z-index: 10;
    mix-blend-mode: color-dodge;
    opacity: 0.225;
    max-width: 100%;
    max-height: 100%;
}

.page {
    display: inline-block;
    position: absolute;
    margin: auto;
    padding: 40px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vh;
    height: 80vh;
    color: var(--text-color);
    font-family: Inconsolata;
    font-size: 1.6vh;
    border-radius: 10px;
    background: var(--panel-background-color);
    box-shadow: 0 10px 20px #00000030, 0 6px 6px #0000003b, inset 0 0 20px var(--panel-highlight);
}

.page .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 2.4vh;
    height: 2.4vh;
    margin: 0;
    padding: 0;
    font-family: Inconsolata;
    font-size: 2.4vh;
    color: var(--text-color);
    opacity: 0.2;
    text-transform: lowercase;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.14s ease-in-out;
}

.page > button:hover {
    opacity: 1;
}

.avatar {
    display: block;
    width: auto;
    max-height: 100%;
    cursor: pointer;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    width: 100%;
    height: 100%;
    text-align: center;
}

p .center {
    text-align: center;
}

.field-row {
    align-items: center;
    display: flex;
}

.field-row > *+* {
    margin: 0 0 0 30px;
}

.field-row-stacked {
    display: flex;
    flex-direction: column;
}

.field-row-stacked *+*, [class^=field-row] + [class^=field-row] {
    margin: 8px 0 0 0;
}

.fade-enter-active, .fade-leave-active {
    transition: all 0.24s ease-in-out;
}

.fade-leave-to {
    opacity: 0;
    transform: translateY(-50px);
}

.fade-enter-from {
    opacity: 0;
    transform: translateY(50px);
}

.fade-enter-to, .fade-leave-from {
    opacity: 1;
    transform: translateY(0px);
}