/*!
 * Zenbu Ltd.
 * Copyright 2020 Yuki de Pourbaix
 * Created 24.10.20 by Yuki de Pourbaix
 */

html, body {
    scroll-behavior: smooth;
    height: 100%;
    font-family: var(--font-regular);
    transition: color 3s, background-color 3s, stroke 3s, opacity 0.25s;
}

body {
    animation: fade forwards linear 0.5s;
}

h1, h2, h3, h4 {
    color: var(--custom-value-135);
    font-family: var(--font-header);
    transition: color 3s, background-color 3s, stroke 3s;
}

a, button, svg, line, polyline, path, span, .card, .btn {
    transition: color 3s linear 0s, background-color 3s linear 0s, stroke 3s linear 0s, border 3s linear 0s;
}

a:hover, .btn:hover {
    transition: color 0.13s ease-in-out, background-color 0.13s ease-in-out;
}

#page-content {
    flex: 1 0 auto;
}

.zenbu-logo {
    fill: none;
    stroke: var(--custom-value-135);
    stroke-miterlimit: 10;
    stroke-width: 7px;
    height: 40px;
    width: 40px;
    transition: color 3s, background-color 3s, stroke 3s, fill 3s;
}

.logo-circle {
    fill:none;
    stroke:var(--custom-value-135);
    stroke-linecap:square;
    stroke-miterlimit:10;
    stroke-width:14px;
    transition: color 3s, background-color 3s, stroke 3s, fill 3s;
}

.logo-line {
    fill:none;
    stroke:var(--custom-value-135);
    stroke-linecap:square;
    stroke-linejoin:round;
    stroke-width:14px;
    transition: color 3s, background-color 3s, stroke 3s, fill 3s;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    font-size: x-large;
    font-weight: bold;
    min-width: 100px;
}

@media (max-width: 768px) {
    .show .nav-menu {
        position: fixed;
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 15vh 0 25vh 0;
        top: 0;
        left: 0;
        z-index: 2;
        background: var(--custom-value-2);
    }
    .block_scroll_mob {
        overflow: hidden;
    }
}

.dropdown-item:hover {
    transition: background-color 0.5s linear 0s;
    background-color: var(--custom-value-103);
}

.flag {
    display: block;
    width: 15px;
}

.lang-menu {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

/* LANDING PAGE */

.landing-wrapper {
    display: flex;
    max-height: 70vh;
    height: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    fill: var(--custom-value-135);
    overflow: visible;
}

.landing-logo {
    max-height: 80%;
    max-width: 80%;
}

.yuki-logo-square {
    cursor: pointer;
}

.yuki-logo-square:hover > .landing-block {
    transition: color 3s, background-color 3s, stroke 3s, opacity 0.25s, transform 0.5s, fill 5s;
    transform: scale(1.2);
}

.landing-block {
    transition: fill 5s, transform 0.3s;
    transform-origin: center;
}

.landing-name, .landing-caption {
    width: 100%;
    padding: 0 2%;
}

/* Experience Page */
.timeline-block {
    display: flex;
    justify-content: center;
}
.timeline-point {
    cursor: pointer;
    position: absolute;
    display: block;
    height: 40px;
    width: 40px;
    background-color: var(--custom-value-13);
    border-radius: 50%;
    border: solid var(--custom-value-68) 5px;
    align-self: center;
    z-index: 2;
    transition: color 3s, background-color 3s, stroke 3s, fill 3s, border 0.2s;
}
.timeline-point:hover, .timeline-active {
    background-color: var(--custom-value-56);
    border-color: var(--custom-value-164);
    transition: color 3s, background-color 0.2s, stroke 3s, fill 3s, border 0.2s;
}
.timeline-line {
    display: block;
    position: absolute;
    top: 0;
    left: calc(8.33% - 10px);
    height: 100%;
    width: 20px;
    background-color: var(--custom-value-98);
    opacity: 0.3;
    align-self: center;
    border-radius: 10px;
    z-index: 1;
    transition: color 3s, background-color 3s, stroke 3s, fill 3s, border 3s, opacity 0.2s;
}
.timeline-line:hover {
    opacity: 0.6;
}
@media (min-width: 992px) {
    .timeline-line {
        left: calc(50% - 10px);
    }
}

.spacer {
    margin: 2vh;
}

.spacer:last-child {
    margin: 0;
}

/* Skills Page */
.skill-focus-init {
    display: none !important;
}

.skill-focus-img {
    height: 100%;
    max-width: 100%;
}

.skill-item {
    cursor: pointer;
    border-radius: 20px;
    background-color: transparent;
    border-color: transparent;
    transition: background-color 0.2s linear 0s, border-color 0.2s linear 0s;
}

.skill-item:hover {
    background-color: var(--custom-value-120);
    border-color: var(--custom-value-90);
}

.activated {
    background-color: var(--custom-value-43);
    border-color: var(--custom-value-56);
}

/* Contact Page */
.contact-page {
    padding: 5%;
    text-align: left;
}

.thanks {
/*
    transition: color 3s linear 0s, background-color 3s linear 0s, stroke 3s linear 0s, border 3s linear 0s, opacity ease-in-out 5s;
*/
    animation: refresher 10s infinite;
}

/* Error Page */
.error-content {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 10%;
}

.home-button {
    margin-top: 2rem;
    padding: 1rem 2rem;
}

/* DESKTOP */

@media only screen and (min-width: 768px) {
    .landing-logo {
        width: 100%;
        max-width: 100%;
    }
    .header-title-logo {
        animation-name: rotate;
        animation-duration: 4s;
        animation-iteration-count: 5;
    }
}

/* MOBILE */

@media only screen and (max-width: 768px) {
    .landing-wrapper {
        flex-direction: column;
    }
    .zenbu-path {
        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;
        animation: dash 5s linear forwards;
    }
}

/* ANIMATIONS */

@keyframes rotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(45deg);
    }
}

@keyframes dash {
  from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes explode {
    10% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(2) rotate3d(0.5, 0.3, 1, 45deg);
    }
    90% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(2) rotate3d(0.5, 0.3, 1, 45deg);
    }
}

@keyframes refresher {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}