@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
body {
    background-color: white;
}

/* INDEX PAGE */

#kim-navbar {
    background-color: white;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#kim-name {
    font-family: 'Nixie One';
    font-size: 3em;
}

#bullet {
    font-size: 5em;
    color: rgb(255, 81, 0);
    margin-right: .25em;
}

#kim-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
        -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#kim-about {
    margin-top: 4em;
    margin-right: 55%;
    width: 40vw;
    max-width: 450px;
    line-height: 2;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#hold-kim-pic {
    margin-top: -20em;
    margin-left: 45%;
    padding-left: 2em;
    -webkit-animation: fadeIn 1.2s;
    animation: fadeIn 1.2s;
}

#welcome-kim {
    margin-top: -2em;
}

h2 {
    font-family: 'Nixie One';
    color: rgb(255, 81, 0);
    font-size: 2em;
}

/* ABOUT PAGE */
#kim-about-about {
    margin-top: 4em;
    margin-right: 55%;
    width: 40vw;
    max-width: 450px;
    line-height: 2;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#about-hold-kim-pic {
    margin-top: -30em;
    margin-left: 50%;
    margin-bottom: 2em;
    -webkit-animation: fadeIn 1.4s;
    animation: fadeIn 1.4s;
}

/* PROJECTS PAGE */
#projects-container {
    margin-top: 4em;
    margin-right: 55%;
    line-height: 2;
    margin-bottom: 2em;
}

#project-div {
    display: flex;
}

#project-inner-div-left {
    margin-right: 1em;
    width: 40vw;
    height: auto;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#project-inner-div-right {
    text-align: center;
    margin-left: 1em;
    margin-top: 2.5em;
    -webkit-animation: fadeIn 1.2s;
    animation: fadeIn 1.2s;
}

#gif-preview {
    width: 50vw;
    max-width: 500px;
    margin-bottom: 1em;
    border: 10px solid #eee;
    border-radius: 5px;
}

#click-to-view {
    font-size: 1.1em;
    padding-top: 1.5em;
}

h4 {
    font-family: 'Nixie One';
    color: black;
    font-size: 1.5em;
}

hr {
    height: 3px;
    background-color: rgb(255, 81, 0);
}

/* CONTACT PAGE */
li {
    list-style-type: none;
    margin-left: 1em;
}

#contact-kim-about {
    margin-top: 4em;
    margin-right: 55%;
    width: 40vw;
    max-width: 450px;
    line-height: 2;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#contact-hold-kim-pic {
    margin-top: -15em;
    margin-left: 40%;
    margin-bottom: 2em;
    -webkit-animation: fadeIn 1.2s;
    animation: fadeIn 1.2s;
}

@media only screen and (max-width: 600px) {
    /* INDEX PAGE */
    #kim-container {
        display: flex;
        flex-direction: column-reverse;
    }

    #hold-kim-pic {
        margin: 0 auto;
        margin-top: 3em;
        padding-left: 0;
        width: 99%;
    }

    #kim-about {
        margin: 1em 1em 1em 1em;
        width: 95%;
        max-width: 95%;
        line-height: 2;
    }

    /* ABOUT PAGE */
    #kim-about-about {
        margin: 0 1em 2em 1em;
        width: 95%;
        max-width: 95%;
        line-height: 2;
    
    }
    
    #about-hold-kim-pic {
        margin: 0 auto;
        margin-top: 3em;
        margin-bottom: 1em;
        width: 95%;
    }

    /* PROJECTS PAGE */
    #project-div {
        display: flex;
        flex-direction: column;
    }

    #project-inner-div-left {
        width: 90vw;
        margin: 0;
    }

    #project-inner-div-right {
        text-align: center;
        margin-left: 0;
        margin-top: 2.5em;
    }
    
    #gif-preview {
        width: 90vw;
        max-width: 90vw;
        margin-bottom: 1em;
        border: 10px solid #eee;
        border-radius: 5px;
    }

    /* CONTACT PAGE */
    #contact-kim-about {
        margin: 0 1em 2em 1em;
        width: 95%;
        max-width: 95%;
        line-height: 2;
    }
    
    #contact-hold-kim-pic {
        margin: 0 auto;
        margin-top: 3em;
        margin-bottom: 1em;
        width: 95%;
    }
    
  }