html {
    background-color: black;
}

body, html {
    margin: 0;
    padding: 0;
}

* {
    font-family: Ubuntu;
    color: white;
    font-weight: normal;
    text-align: center;
    text-wrap: nowrap;
    overflow-x: visible;
    font-size: 1em;
}

#ruler {
    visibility: hidden;
    white-space: nowrap;
    position: absolute;
    font-size: 5em;
    top: 50%;
    left: 0%;
}

.container::before {
    content: '';
    z-index: -100;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 900px;
    border: 3px solid white;
    mask:
	linear-gradient(#000 50%, #0000 0) border-box
	101% 101% / 200% 200% no-repeat;
    mask-composite: exclude;
    transition: 0.25s cubic-bezier(0.55, 0, 1, 0.45);
}

@keyframes reveal {
    from {
	mask-position: -99% 101%;
    }
    to {
	mask-position: 0% 0%;
    }
}

@keyframes goaway {
    from {
	mask-position: 0% 0%;
    }
    to {
	mask-position: 99% 99%;
    }
}

@keyframes revealreverse {
    from {
	mask-position: 99% 101%;
    }
    to {
	mask-position: 0% 0%;
    }
}

@keyframes goawayreverse {
    from {
	mask-position: 0% 0%;
    }
    to {
	mask-position: -99% 101%;
    }
}

.container.here::before {
    mask-position: 0% 0%;
}

.main-container.done::before {
    mask-position: 0% 0%!important;
}

.main-container.animating {
    display: flex!important;
    align-items: center!important;
    height: 100vh!important;
    width: 100vw!important;
    justify-content: center!important;
    padding-top: 0!important;
    padding-left: 0!important;
}

.spacer {
    font-size: 3em;
    margin: 0px;
    visibility: hidden;
}

.container {
    display: flex;
    align-items: start;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 610px;
    height: 900px;
    padding-top: 40px;
    transform: translate(-50%, -50%);
    mask:
	linear-gradient(90deg, #000 50%, #0000 0) border-box
	-0% 0% / 200% 200% no-repeat;
    mask-composite: exclude;
}




.container.here {
    animation: reveal;
    animation-duration: 0.4s;
    mask-position: 0% 0%;
}

.container.firsthere::before {
    mask-position: 0% 0%;
}

.container.gone {
    animation: goawayreverse;
    animation-duration: 0.4s;
    mask-position: 99% 99%;
}

.main-container.here {
    animation: revealreverse;
    animation-duration: 0.4s;
    mask-position: 0% 0%;
}

.main-container.gone {
    animation: goaway;
    animation-duration: 0.4s;
    mask-position: 99% 99%;
}

.content {
    width: 100%;
}

.intro {
    transition: 0.25s cubic-bezier(0.55, 0, 1, 0.45);
    overflow-wrap: anywhere;
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    overflow-x: visible;
    width: 100%;
}

.intro.animating {
    flex: 0;
    top: 50%;
    font-size: 5em;
}

.intro.done {
    top: 2%;
    font-size: 3em;
}

.content-element {
    margin-top: 25px;
    margin-bottom: 25px;
    transition: opacity 0.25s cubic-bezier(0.55, 0, 1, 0.45);
    text-align: left!important;
    text-wrap: auto;
    font-size: 1.5em;
    padding-left: 40px;
    padding-right: 40px;
}

.content-element.init {
    opacity: 0%;
}

.content-element.ready {
    opacity: 100%;
}

.name {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 10px;
}

.name > a {
    font-weight: bold;
}

.subname {
    margin-left: 3%;
    color: darkgrey;
    font-style: italic;
    font-size: 0.9em;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 45px;
}

.back {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
    position: absolute;
    top: 20px;
    left: 20px;
}

.discordbutton {
    background-color: transparent;
    border: 0px none;
    padding: 0px 0px 0px 0px;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background-color: black;
    font-weight: bold;
    border-radius: 10px;
    padding: 4px 4px 4px 4px;
}

.tooltip.hidden {
    opacity: 0%;
    z-index: -100;
}

.tooltip.shown {
    z-index: 100;
    opacity: 100%;
    transition: transform 0.5s cubic-bezier(0.5, 1, 0.89, 1), opacity 0.5s cubic-bezier(0.89, 1, 0.5, 1);
    transform: rotate(5.875turn) scale(230%);
}

.tooltip.away{
    transform: rotate(0);
    transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1);
    opacity: 0%;
}