style.css

:root {
    font-size: 16px;
    font-family: lores-12, sans-serif;
    font-weight: 400;
    font-style: normal;

    --bg-primary: #131313;
}

body {
    color: white;
    background-color: var(--bg-primary);
    /* margin: 0;
    padding: 0;
    height: 100%; */
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

a {
    color: white;
}

/* sets every element in the page within the div to be in the center */
/* #body-wrapper {
    position: fixed;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;

    transform: translate(-50%, -50%);

    margin: auto;
    
} */

/* main tagline at the top of the page */
.tagline {
    text-align: center;
    font-size: 1.5rem;
    color: #f8dcdc;

    margin: 30px;
    /* display: inline; */
}

/* flexbox for the main display of the page */
.main-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* texts within the main display of the page */
.text-container {
    font-size: 2rem;
    text-align: left;

    vertical-align: middle;

    margin: auto;
    border: 5px solid white;
    padding: 20px;
    
    width: 28rem;
    height: 9rem;

    /* position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%); */

    transition-property: height, width;
    transition-duration: 3s;
    transition-timing-function: ease-in-out;
}

.text-container-animated {
    height: 0rem;
    width: 0rem;
    padding: 0px;
    /* border: 4px solid white; */
    border: 7px solid var(--bg-primary);
    margin: 0 auto;

    /* transition: width 2s */
    transition-property: height, width, padding;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.text-container.flat {
    height: 0;
}

.text-container.enlarged {
    width: 42rem;
    height: 13.5rem;
}

/* title in main display */
.title {
    font-size: 2.5rem;
}

.resume-text {
    font-size: 1.5rem;
    display: inline;
}

.typed-cursor{
    font-size: 1.5rem;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

/* typing action text in main display */
.action-text {
    font-size: 1.5rem;
    color: #f1a3a3;
    margin: 20px 0px 20px 20px;
    display: inline;
}

.action-text-color {
    color: #f1a3a3;
}

/* flexbox container for navigation buttons */
.nav-button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* Initially hidden, loaded in with animations */
    visibility: hidden;
    /* opacity: 0; */

    /* transition: opacity 1s ease-in-out; */

    /* transition-property: height, width;
    transition-duration: 2s;
    transition-timing-function: ease-in-out; */
}

.nav-button {
    border: 4px solid #cd5c5c;
    margin: 30px;

    width: 8rem;
    min-width: 8rem;
    height: 3rem;
    
    position: relative;
    cursor:pointer;
}

/* title for the navigation buttons */
.nav-button-title {
    text-align: center;
    font-size: 2rem;
    color: #f1a3a3;

    margin: 0;
    position: absolute;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



#back-button {
    opacity: 0;
    visibility: hidden;
}


#play-game-button {
    opacity: 0;
    visibility: hidden;
}

.resume-text-container {
    height: 9rem;
}

.animated-box {
    height: 0rem;
    width: 0rem;
    border: 4px solid white;
    margin: 0 auto;

    /* transition: width 2s */
    transition-property: height, width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.animated-box-width {
    width: 28rem;
    /* height: 9rem; */
}

.animated-box-height {
    height: 9rem;
}

#test {
    font-size: 1.8rem;
}