html {
    font-size: 62.5%;
    font-family: 'Arial', sans-serif;
    color: white;
    /* height: -webkit-fill-available; */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #000000;
    font-size: 1.8rem;
}

h1,
h2,
p {
    margin: 0;
}

.page-container {
    height: 100vh;
    /* height: -webkit-fill-available; */
}

.card {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    max-width: 80rem;
    height: 100%;
    /* height: -webkit-fill-available; */
    max-height: 160rem;
    border-style: solid;
    border-radius: 2rem;
    transition: max-height 700ms ease-in-out;
    -o-transition: max-height 700ms ease-in-out;
    -moz-transition: max-height 700ms ease-in-out;
    -webkit-transition: max-height 700ms ease-in-out;
}

header {
    position: relative;
    height: 234px;
    overflow: hidden;
}

.logo {
    width: 140rem;
    position: absolute;
    right: -2em;
    fill: white;
}

main {
    margin: 0 auto;
    font-size: 2.6rem;
}

.rotating-words {
    margin: 0 0 7rem 0;
    padding: 0rem;
    list-style: none;
    display: flex;
    justify-content: center;
}

.rotating-words li {
    font-size: 3.8rem;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: rotateWords 10s linear infinite 0s;
}

.rotating-words li:nth-child(2) {
	animation-delay: 2s; 
}

.rotating-words li:nth-child(3) {
	animation-delay: 4s; 
}

.rotating-words li:nth-child(4) {
	animation-delay: 6s; 
}

.rotating-words li:nth-child(5) {
	animation-delay: 8s; 
}

@keyframes rotateWords {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
	5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
	20% { opacity: 0; transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

.contact {
    display: flex;
    margin-top: auto;
    justify-content: center;
    font-size: 4rem;
}

footer {
    display: flex;
    margin-top: auto;
    justify-content: flex-end;
}

@media (min-width: 50rem) {
    .page-container {
        display: grid;
        place-items: center;
    }

    .card {
        position: relative;
        margin: 0 auto;
        width: 80rem;
        max-height: 46rem;
    }

    main {
        font-size: 3.8rem;
    }
}