#title-container {
    position: absolute;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    min-width: 100vw;
    min-height: 100vh;

    overflow: hidden;
}

#title {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 3em 10em;

    background-color: var(--black);

    border-radius: 1em;

    /* For slide animation */
    position: relative;
    overflow: hidden;
}

/* Slide-in div */
#slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    position: absolute;
    z-index: 1;

    padding: 0 2em;

    width: 100%;
    height: 100%;

    left: -100%;

    background-color: var(--coral);

    border-radius: 1em;

    font-family: 'Poppins', sans-serif;
    color: #fff;

    transition: .65s;
}

#title:hover #slide {
    left: 0;
    
    transition: .65s;
}

/* Main Display Text */
#text {
    text-align: center;

    font: bold 5rem 'Poppins', sans-serif;
    color: var(--white);
}

#text:before {
    content: ">";

    position: relative;

    transform: translate(-30%, 100%);
}

/* Text below main text */
#subtext {
    text-align: center;

    font: italic 1.2rem 'Poppins', sans-serif;
    color: var(--white);
}

/* Slide content */
#slide>p {
    text-align: center;

    font: italic 1.2rem 'Poppins', sans-serif;
}

#slide>a {
    box-sizing: border-box;

    min-height: 3em;

    padding: 1em 3em 1em 3em;

    background-color: var(--flame);

    text-decoration: none;

    border-radius: 2em;

    transform: translateY(5%);
    transition: .2s;
}

#slide>a:hover {
    transform: translateY(-5%);
    transition: .2s;
}

#slide>a:link,
#slide>a:visited,
#slide>a:hover,
#slide>a:active {
    color: #fff;
}