/*
GENERAL STYLE
*/

@font-face {
    font-family: "Comic Neue";
    src: url(/ComicNeue-Light.ttf) format("truetype");
}

html {
    text-align:center;
    font-family:"Comic Neue";
}

body {
    background-color: #E0E0E0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
}

a {
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration: none;
}

main {
    flex: 1;
    padding: 0 10px;
}

.card {
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
    max-width: 460px;
    margin: 30px auto 40px;
    padding: 10px 10px;
}

footer {
    background-color: #E0E0E0;
    color: #404040;
    padding: 15px 0;
}

.headshot {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.centered {
    margin: 0 auto;
}

.logo-icons {
    padding: 10px 0;
    align-items: center;
}

.logo-icons img,
.logo-icons i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

/*
EFFECTS
*/

/*
Hover color changing effect
*/
.hoverease {
    transition: all .25s ease-in;
    -o-transition: all .2s ease-in;
    -moz-transition: all .25s ease-in;
    -webkit-transition: all .25s ease-in;
}

.hoverease:hover {
    transition: all .25s ease-out;
    -o-transition: all .2s ease-out;
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
}

/*The colors for the hover effect*/
.connect {
    font-size: 40px;
    color: #404040;
    text-decoration: none;
}

.fa-linkedin:hover {
    color: #1178B3;
}

.fa-twitter:hover {
    color: #2AA3EF;
}

.fa-github:hover {
    color: #A24CA1;
}

.fa-bluesky:hover {
    color: #0085ff;
}

.github {
    color: #000000;
}
.github:hover {
    color: #A24CA1;
}

.twitch {
    color: #000000;
}
.twitch:hover {
    color: #cc0000;
}

.vscode {
    color:#000000;
}
.vscode:hover {
    color:#23a8f2;
}

.coffee {
    color: #000000;
}
.coffee:hover {
    color: #503619;
}

/* Keyframes for the fade-in */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    30% { transform: translateY(0); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity:0;
    opacity: 1 \9; /*just in case ie*/
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInUp ease-out 1;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
}

.fade-in.one,
.fade-in-up.one {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.fade-in.two {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}

.fade-in.three {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    animation-delay: .6s;
}
.fade-in.four,
.fade-in-up.four {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    animation-delay: .9s;
}

.fade-in.five {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay:1.2s;
    animation-delay: 1.2s;
}

.fade-in.six,
.fade-in-up.six {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.fade-in.seven {
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.fade-in.eight {
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.fade-in.nine {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.fade-in.ten {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
    animation-delay: 2.7s;
}
.fade-in.eleven {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}
.fade-in.twelve {
    -webkit-animation-delay: 3.3s;
    -moz-animation-delay: 3.3s;
    animation-delay: 3.3s;
}