* {
    margin: 0
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Kodchasan', serif;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

body {
    background: linear-gradient(233deg, #c6cac9, #e7eeec);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    100%{background-position:0% 5%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    100%{background-position:0% 5%}
}
@keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    100%{background-position:0% 5%}
}

.name {
    animation: fadeIn 4s forwards;
    text-align: center;
    font-size: 4rem;
    white-space: nowrap;
}

.subtitle {
    opacity: 0;
    animation: fadeIn 3s 1s forwards;
    font-size: 1.5em;
    text-align: center;
}

.contact-container-1 {
    opacity: 0;
    animation: fadeIn 3s 1.5s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.code {
    color: rgb(84, 84, 88);
}

.icon {
    width: 1.5em;
    height: 1.5em;
    color: rgb(84, 84, 88);
}

.email-icon {
    background-image: url(files/icons/email_black_24dp.svg);
}

.whatsapp-icon {
    background-image: url(files/icons/whatsapp_black_24dp.svg);
}

.contact-container {
    display: inline-flex;
}
.flex-center {
    display: flex;
    justify-content: center;
}