:root {
    --logo-stroke-width: 1;
    --logo-fill-color: white;
    --logo-animation-duration: 4s;
}
body {
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
    /* animated background: https://codepen.io/hylobates-lar/pen/qBbQeON */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 200%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {   background-position:   0% 50%; }
    50% {  background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
a {
    color: unset;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
i {
    text-align: center;
    width: 2rem;
    margin-right: 0.5rem;
}





.GRID_CONTAINER {
    display: grid;
    grid-template-rows: auto min-content;
    width: 100vw;
    height: 100vh;
}
.GRID_CONTAINER > div {
    padding: 3rem;
}
.GRID_CONTAINER > div:not(:first-child) {
    padding-top: 0;
}
.GRID_CONTAINER-top {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    justify-self: center;
}
.GRID_CONTAINER-bottom {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    justify-self: center;
}

@media only screen and (max-width: 800px) {
    .GRID_CONTAINER {
        height: calc(100vh - 5rem);
    }
}





#logo {
    margin: auto;
}
#logo svg {
    max-height: 25rem;
    display: block;
    margin: auto;
    /* SVG shadows: https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/ */
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
}
#logo h1 {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: 3rem;
    text-align: center;
    margin: 3rem 0;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}

@media only screen and (max-width: 800px) {
    #logo svg {
        max-height: 20rem;
    }
    #logo h1 {
        font-size: 1.5rem;
    }
}

/* SVG animation: https://www.toptal.com/front-end/svg-animation-guide */
#logo svg path {
    stroke: var(--logo-fill-color);
    stroke-width: 0;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    fill: var(--logo-fill-color);
    animation: dash 5s ease-in-out;
    animation-fill-mode: both;
}
#logo svg path.p12 { animation-duration: 9s; }
.p1 { animation-delay: 0.5s !important; }
.p10 { animation-delay: 1s !important; }
.p6 { animation-delay: 1.3s !important; }
.p2 { animation-delay: 1.6s !important; }
.p9 { animation-delay: 2s !important; }
.p7 { animation-delay: 2.5s !important; }
.p5 { animation-delay: 3s !important; }
.p3 { animation-delay: 3.3s !important; }
.p8 { animation-delay: 3.6s !important; }
.p4, .p13 { animation-delay: 4s !important; }
@keyframes dash {
    0% { 
        stroke-width: 0;
        stroke-dashoffset: 100; 
        fill: rgba(0,0,0,0); 
    }
    40% { 
        stroke-width: var(--logo-stroke-width);
        fill: rgba(0,0,0,0); 
    }
    100% { 
        stroke-width: 0;
        stroke-dashoffset: 0; 
        fill: var(--logo-fill-color); 
    }
}

/* Text blur-fade-in animation: https://codepen.io/onge/pen/KwdZpE */
h1.blur-fade-in span,
#contact-container .blur-fade-in p {
    animation: blur_fade_in 3s ease-out;
    animation-fill-mode: both;
}
h1.blur-fade-in span:nth-child(1) { animation-delay: calc(var(--logo-animation-duration) + 0.1s); }
h1.blur-fade-in span:nth-child(2) { animation-delay: calc(var(--logo-animation-duration) + 0.2s); }
h1.blur-fade-in span:nth-child(3) { animation-delay: calc(var(--logo-animation-duration) + 0.3s); }
h1.blur-fade-in span:nth-child(4) { animation-delay: calc(var(--logo-animation-duration) + 0.4s); }
h1.blur-fade-in span:nth-child(5) { animation-delay: calc(var(--logo-animation-duration) + 0.5s); }
h1.blur-fade-in span:nth-child(6) { animation-delay: calc(var(--logo-animation-duration) + 0.6s); }
h1.blur-fade-in span:nth-child(7) { animation-delay: calc(var(--logo-animation-duration) + 0.7s); }
h1.blur-fade-in span:nth-child(8) { animation-delay: calc(var(--logo-animation-duration) + 0.8s); }
h1.blur-fade-in span:nth-child(9) { animation-delay: calc(var(--logo-animation-duration) + 0.9s); }
#contact-container .blur-fade-in p:nth-child(1) { animation-delay: calc(var(--logo-animation-duration) + 1.1s); }
#contact-container .blur-fade-in p:nth-child(2) { animation-delay: calc(var(--logo-animation-duration) + 1.2s); }
#contact-container .blur-fade-in p:nth-child(3) { animation-delay: calc(var(--logo-animation-duration) + 1.3s); }
@keyframes blur_fade_in {
    0% {
        text-shadow: 0 0 100px #fff;
        opacity: 0; 
        color: transparent;
    }
    25% {
        text-shadow: 0 0 90px #fff;
    }
    75% {
        opacity: 1;
    }
    99% {
        color: transparent;
    }
    100% {
        text-shadow: 0 0 0px #fff;
        color: var(--logo-fill-color);
    }
}
@keyframes fade_in {
    0% {
        opacity: 0; 
        color: transparent;
    }
    100% {
        opacity: 1;
        color: var(--logo-fill-color);
    }
}

@media only screen and (max-width: 800px) {
    h1.blur-fade-in span,
    #contact-container .blur-fade-in p {
        animation: fade_in 3s ease-out;
        animation-fill-mode: both;
    }
}





#contact-container {
    font-size: 1.2rem;
    text-align: center;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}
#contact-container .horizontal-align {
    display: inline-block;
    margin: auto;
    text-align: left;
}

@media only screen and (max-width: 800px) {
    #contact-container {
        font-size: 0.85rem;
    }
}