body {
        font-family: 'Courier';
        font-size: 18px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70px;
}

#splash {
    display: none;
}

.about {
    text-align: left;
    margin: 0 auto;
    width: 300px;
    animation: 1s ease 0s normal forwards 1 fadein;
-webkit-animation: 1s ease 0s normal forwards 1 fadein;
opacity:1
}

.nutrition {
    margin-top: -60px !important;
    text-align: left;
    margin: 0 auto;
    width: 700px;
}

.hoon-data-types {
    text-align: left;
    margin: 0 auto;
    width: 400px;
}

span.hover:hover {
    text-decoration: underline;
    cursor: pointer;
    text-wrap: balance;
}

.header {
    transform: translate(-50%, -50%);
    position: fixed; 
    left: 50%;
    top: 110px;
    transform: translateX(-50%);
    text-wrap: pretty;
}

.hoon {
    line-height: 0.2;
}

@media (max-width: 600px) {
    .header {
        transform: translate(-50%, -50%);
        position: fixed; 
        left: 50%;
        top: 110px;
        width: 230px;
        transform: translateX(-50%);
    }
    .nutrition {
        width: 300px !important;

    }
    
    .hoon-data-types {
    font-size: 14px;
        text-align: left;
        margin: 0 auto;
        width: 300px;
    }
}

.recipeList {
    text-align: left;
    margin: 0 auto;
    width: 400px;
}

.recipe {
    cursor: pointer
}

#recipe {
    text-align: left;
    margin: 0 auto;
    width: 400px;
}

@mixin fade-in($waitTime) {
    animation: 
        wait #{$waitTime},
        fade-in 800ms #{$waitTime};
}

@keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}