body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

h1.animation {
    margin: 0;
    font-family: 'Delius', cursive;
    font-size: 8vh;
    text-align: center;
    overflow: hidden;
    border-right: 5px solid black;
    white-space: nowrap;
    letter-spacing: .15em;
    
}

#index {
    animation: 
        typing 3.5s steps(30,end),
        blink-caret .75s step-end infinite;
}

#strangers {
    animation: 
        typing 2s steps(20,end),
        blink-caret .75s step-end infinite;
}

#friends {
    animation: 
        typing 1.7s steps(20,end),
        blink-caret .75s step-end infinite;
}

#gfriends {
    animation: 
        typing 2s steps(20,end),
        blink-caret .75s step-end infinite;
}

#bf {
    animation: 
        typing 2.7s steps(25,end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black; }
}

h2 {
    font-family: 'Martel', serif;
    font-size: 5vh;
    text-align: center;
}

p {
    font-family: 'Mulish', sans-serif;
    font-size: 3vh;
    text-align: center;
}

a, a:visited {
    font-family: 'Mulish', sans-serif;
    font-size: 3vh;
    color: black;
    text-decoration: none;
}

.menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
}

button {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    padding: 8px;
    background: none;
    border: 0;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    padding-bottom: 1vh;
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 2.5vh;
}