html, body{
    background-color: #FFF6DB;
}
.wrapper{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1{
    color: #FF8484;
    font-size: 50px;;
    padding: 1rem;
}

h2{
    font-size: 20px;
    font-family: monospace;
    display: inline-block;
    text-align: center;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    max-width: 34ch;
    animation: type 1.5s steps(34) forwards;
}

p{
    color: #FF8484;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    text-align: center;
}

@keyframes type {
    from {width: 0;}
    to {width: 34ch;}
}

i.fi{
    display: inline-block;
    will-change: transform;
    font-size: 50px;
    position: relative;
    padding: 2rem;
}

i.fi:hover{
    font-size: 60px;
}

@keyframes bounce{
    0%, 100%{transform: translateY(0);}
    50%{transform: translateY(-20px);}
}

.bounce{
    animation: bounce 2s ease-in-out infinite;
}

.fade{
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

@keyframes fadeIn{
    to {opacity: 1;}
}

.link, .link:visited, .link:active, .link:hover{
    text-decoration: none;
    color: inherit;
}

.outer-box{
    background-color: white;
    padding: 2rem;
    border-radius: 16px;
}

@media(max-width: 640px){
    h1{
        font-size: 40px;
    }

    h2 {
        font-size: 15px;
    }

    p {
        font-size: 15px;
    }

    i.fi {
        font-size: 40px;
        padding: 1rem;
    }

    i.fi:hover {
        font-size: 50px;
    }

    .outer-box {
        padding: 1rem;
    }
}