html, body {
    position: relative;
    font-family: 'Roboto Mono', monospace;
    color: #2e2e2e;
}

#container-center {
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

p {
    line-height: 32px;
}

a:not(.logo) {
    color: #2e2e2e;
    border-bottom: 2px solid #FFC634;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    display: inline-block;
    background: linear-gradient(to left, transparent 50%, #FFC634 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    margin-bottom: 5px;
}

a:not(.logo):hover {
    background-position: left bottom;
}

/**
 * Helpers
 */

.text-center {
    text-align: center;
}

.ssb-color {
    color: #98b88b;
}

code {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    background: rgba(241, 243, 244, 0.66);
    padding: 3px 5px;
    font-weight: bold;
}

hr {
    margin: 20px 0;
    border: 1px solid rgba(241, 243, 244, 0.62);
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * Logo
 */
.logo {
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 36px;
    text-align: center;
    border: none;
    margin: 0 0 60px 0;
    font-family: "Press Start 2P", cursive;
    text-shadow: rgb(255, 198, 52) 1px 1px 0,
    rgb(255, 198, 52) 2px 2px 0,
    rgb(255, 198, 52) 3px 3px 0,
    rgb(255, 198, 52) 4px 4px 0,
    rgb(255, 198, 52) 5px 5px 0,
    rgb(255, 198, 52) 6px 6px 0,
    rgb(255, 198, 52) 7px 7px 0,
    rgb(255, 198, 52) 8px 8px 0,
    rgb(255, 198, 52) 9px 9px 0,
    rgb(255, 198, 52) 10px 10px 0;
    text-decoration: none;
    position: relative;
}

.logo:hover {
    text-decoration: none;
    text-shadow: #ffffff 1px -1px 0,
    #ffffff 2px -2px 0,
    #ffffff 3px -3px 0,
    #ffffff 4px -4px 0,
    #ffffff 5px -5px 0,
    #ffffff 6px -6px 0,
    #ffffff 7px -7px 0,
    #ffffff 8px -8px 0,
    #ffffff 9px -9px 0,
    #ffffff 10px -10px 0;
}

.logo:hover .iv-pa {
    box-shadow: #ffffff 1px -1px 0,
    #ffffff 2px 2px 0,
    #ffffff 3px 3px 0,
    #ffffff 4px 4px 0,
    #ffffff 5px 5px 0;
}

.logo:focus {
    outline: none;
}

.iv-pa {
    display: inline-block;
    margin-top: -15px;
    width: 62px;
    height: 62px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: rgb(255, 198, 52) 1px 1px 0,
    rgb(255, 198, 52) 2px 2px 0,
    rgb(255, 198, 52) 3px 3px 0,
    rgb(255, 198, 52) 4px 4px 0,
    rgb(255, 198, 52) 5px 5px 0;
    margin-right: 25px;
}

.iv-pa img {
    width: 62px;
    height: 62px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

@media only screen and (max-width: 620px) {
    .logo .hide {
        display: none;
    }

    .logo {
        padding: 0;
        justify-content: center;
    }

    .iv-pa {
        position: static;
        display: block;
    }
    #container-center {
        width: 100%;
    }
}