@font-face {
    font-family: SimSun;
    src: url(SIMSUN.ttf);
}

:root {
    --color: #ADB3A7;
    --background: #242921;
    --color2: #748168;
    --color3: #545E4B;
}

body {
    background-color: #141712;
    color: var(--color);
    font-family: SimSun;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
	display:flex;
	height:100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
}

* {
    margin: 1.5mm;
    align-self: center;
    justify-self: center;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

main {
    margin: 0;
    width: min-content;
    background-color: var(--background);
    /* height: auto; */
    overflow: hidden;
    background-image: url(bonsai.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 5mm;
    /* aspect-ratio: 1 / 1; */
    border: 1px solid var(--color3);
    animation: appear 1s ease;
    /* transition: transform .1s ease-out; */
    /* transition: box-shadow .4s ease-out, transform .2s ease-out; */
    box-shadow: 0 1cm 1cm 1cm #00000020
}

@keyframes appear {
    0% {
        scale: .9;
        opacity: 0;
        transform: translateY(1cm);
    }
    100% {
        scale: 1;
        opacity: 1;
        transform: none;
    }
}

#intro {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-items: center;
    white-space: nowrap;
}