* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color: #e6e6e6;
    --background: #2D2D2D;
    --logo-i-color: #E59A05;
    --border-text-input: #6A7075;
    --color-text-input: #cfd2d6;
    --text-input-focus: #34608C;
    --box-shadow-text-input-focus: #378ad326;
    --text-input-invalid: #AE2324;
    --box-shadow-text-input-invalid: #522324;
    --button-color: #378ad3;
    --button-hover: #3ca4ff;
    --button-focus: #233e52;
    --button-text: white;
    --menu-background: #393939;
    --border-menu: #2b2b2b;
    --border-menu-alt: #3b3b3b;
    --background-li: #333;
    --timeline-stripe: black;
    --demo-card-header: #fff;
    --card-background: #464235;
    --card-title-background: #514B37;
}
.pink {
    background-color: pink;
}

@font-face {
    font-family: 'Candy Stripe BRK Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Candy Stripe BRK Regular'), url('/fonts/candystr.woff') format('woff');
}

html, body, #app {
    height: 100vh;
    width: 100%;
}

p {
    line-height: 1.52em;
}

.invalid {
    border-color: var(--text-input-invalid);
    box-shadow: 0 0 0 3px var(--box-shadow-text-input-invalid);
    outline: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.email {
       margin-top:0px;
}

body {
    background-color: var(--background);
    color: var(--color);
    font-family: Arial;
}

#app {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

.page-header {
    margin-bottom: 15px
}

.first-item-margin {
    margin-top: 15px;
}

.header {
    background-color: var(--menu-background);
    align-items: center;
}

.animated-container {
    /*position: relative;*/
    animation: fade-in-left 0.6s;
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.bar1, .bar2, .bar3 {
    width: 22px;
    height: 2px;
    background-color: var(--color);
    margin: 6px 0;
    transition: 0.4s;
}


.about-text {
    margin-bottom: 10px;
}


.open-menu .active {
    border-right: 4px solid var(--logo-i-color);
}

.change .bar1 {
    transform: rotate(-45deg) translate(-5px,6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-5px,-6px);
}

.collapse-menu {
    display: none;
    /*animation: mymove;
    animation-fill-mode: forwards;
    animation-duration: 4s;*/
}

.main-content {
    margin: 10px 10px 0px 10px;
    width: 100%;
    display: flex;
}

.nav-menu a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 7px 4px 7px 6px;
    background: linear-gradient(to right,var(--menu-background) 50%,var(--logo-i-color) 50%);
    background-position: left bottom;
    background-size: 200% 100%;
    transition: .2s ease-out;
}

    .nav-menu a:hover {
        background: var(--logo-i-color);
    }

@media (min-width: 600px) {
    .nav-menu a {
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: 7px 4px 7px 6px;
        background: linear-gradient(to right,var(--menu-background) 50%,var(--logo-i-color) 50%);
        background-position: left bottom;
        background-size: 200% 100%;
        transition: .2s ease-out;
    }

        .nav-menu a:hover {
            background-position: right bottom;
        }
}

    .nav-menu a:visited {
        background-position: right bottom;
    }



    a {
        color: var(--color);
    }

        a:visited {
            color: var(--color);
        }

        a:hover {
            color: var(--color);
        }

    button {
        color: var(--button-text);
        margin-top: 8px;
        background: var(--button-color);
        border-radius: 5px;
        border: 0px;
        height: 35px;
        width: 70px;
        cursor: pointer;
    }

        button:hover {
            background: var(--button-hover);
        }

        input:focus, textarea:focus, button:focus {
            border-color: var(--text-input-focus);
            box-shadow: 0 0 0 4px var(--box-shadow-text-input-focus);
            outline: 0;
        }


    .contact-button {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @media (min-width: 600px) {
        .contact-button {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .hide-mail-send {
        visibility: collapse;
    }

    .mail-send {
        margin: auto;
        animation: fade-in-left 0.6s;
        animation: fade-out 10s forwards;
    }

    @media (min-width: 600px) {
        .mail-send {
            margin-right: 0px;
            margin-left: auto;
            animation: fade-out 10s forwards;
        }
    }

    @media (min-width: 600px) {
        .mail-send {
            margin-right: 0px;
            margin-left: auto;
        }
    }

    @keyframes fade-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }


    input, textarea {
        margin-top: 10px;
        border: 1px solid var(--border-text-input);
        color: var(--color-text-input);
        background-color: var(--background);
        border-radius: 3px;
        padding: .6em .7em;
    }

    textarea {
        height: 400px;
    }

    @media (min-width: 1000px) {
        .company-details {
            flex-direction: row;
            align-items: stretch;
        }
    }

    .company-details {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        color: #848d95;
        flex-direction: column;
        align-items: center;
    }

        .company-details p {
            margin-right: 20px;
            line-height: normal;
        }

    @media (min-width: 1000px) {
        .company-details {
            display: block;
            margin-top: auto;
            margin-bottom: 20px;
        }
    }

    a:active {
        color: var(--color);
    }

    .open-menu li {
        background-color: var(--background-li);
        color: var(--color);
        border-bottom: 1px solid var(--border-menu);
        border-top: 1px solid var(--border-menu-alt);
    }

    .open-menu img {
        margin-left: 5px;
        margin-right: 5px;
    }

    .portrait {
        border-radius: 10px;
        margin-bottom: 20px;
    }

    #mapContainer {
        border-radius: 10px;
    }

    .open-menu {
        background-color: var(--menu-background);
        display: flex;
        flex-direction: column;
        /*background-image: repeating-linear-gradient(45deg,#FFFFFF, #FFFFFF 15px, var(--logo-i-color) 15px, var(--logo-i-color) 16px);*/
        border: 1px solid var(--border-menu);
        width: 110px;
        height: 100%;
        /* determines size */
        /*animation: mymove;
    animation-fill-mode: forwards;
    animation-duration: 4s;*/
    }

    .flex-container {
        display: flex;
    }


    .two-panel-layout {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }

    .column {
        flex-direction: column;
    }

    .hamburger-container {
        margin-left: 10px;
        display: inline-block;
        cursor: pointer;
    }

    #blazor-error-ui {
        display: none;
    }

    .logo-small-header {
        font-family: 'Candy Stripe BRK Regular';
        color: var(--color);
        font-weight: normal;
        font-size: 30px;
        margin-right: 10px;
        margin-top: 5px;
        margin-left: auto;
    }

    .ilogo {
        color: var(--logo-i-color);
        animation: logo-size 1s;
    }

    @keyframes logo-size {
        from {
            font-size: x-small;
        }

        to {
            font-size: inherit;
        }
    }

    .left-pane-text {
        flex: 100%;
        padding-bottom: 20px;
    }

    .vertical-flex {
        display: flex;
        flex-direction: column;
    }

    .right-pane {
        display: flex;
        flex: 100%;
        justify-content: center;
        align-items: flex-start;
    }

    @media (min-width: 1000px) {
        .left-pane-text {
            flex: 50%;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 0px;
        }

        .right-pane {
            flex: 50%;
            align-items: flex-start;
        }
    }

    .center {
        justify-content: center;
    }


    .under-construction-html-height {
        height: 100%;
    }

    .under-construction-text {
        width: 365px;
        margin: 0;
        text-align: center;
    }

    .under-construction-body-height {
        min-height: 100%;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .scratch{
        text-decoration: line-through;
    }

    .timeline {
        position: relative;
        max-width: 700px;
        margin: 0 auto;
    }

        .timeline::after {
            content: '';
            position: absolute;
            margin: 0 auto;
            width: 6px;
            left: 50%;
            background-color: var(--logo-i-color);
            top: 0;
            bottom: 0;
            z-index: -1;
            animation-delay: 0.6s;
            animation: draw-line 3s;
        }

    @media (min-width: 600px) {
        /* The actual timeline (the vertical ruler) */
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: var(--logo-i-color);
            top: 0;
            bottom: 0;
            margin-left: -3px;
            left: 31px;
            animation-delay: 0.6s;
            animation: draw-line 3s;
        }




        @keyframes draw-line {
            from {
                height: 0px;
            }

            to {
                height: 100%;
            }
        }

        @keyframes draw-stripes {
            from {
                width: 0px;
            }

            to {
                width: 29px;
            }
        }

        /* The stripes on the timeline */
        .container::after {
            content: '';
            position: absolute;
            height: 5px;
            border-top: 2px solid var(--timeline-stripe);
            border-bottom: 1px solid var(--timeline-stripe);
            background-color: transparent;
            transform: skewY(15deg);
            top: 25px;
            z-index: 1;
            animation: draw-stripes 0.5s forwards;
            animation-delay: 0.7s;
        }

        .container {
            padding-left: 70px;
            padding-right: 25px;
        }

            /* Make sure that all arrows are pointing leftwards */
            .container::before {
                content: " ";
                height: 0px;
                position: absolute;
                top: 22px;
                width: 0px;
                z-index: 1;
                left: 60px;
                border: medium solid var(--card-title-background);
                border-width: 10px 10px 10px 0;
                border-color: transparent var(--card-title-background) transparent transparent;
            }
    }

    /* The actual content */
    .timeline-content {
        background-color: var(--card-background);
        position: relative;
        border-radius: 6px;
    }

    .detail-content {
        padding: 20px 30px;
    }


    .timeline-content h2 > span {
        margin: auto;
    }

    .detail-content p {
        margin-bottom: 8px;
    }

    .timeline-content h2 > span:first-child {
        font-size: small;
        font-weight: normal;
    }

    @media (min-width: 600px) {
        .timeline-content h2 > span {
            margin: 0px;
        }

            .timeline-content h2 > span:first-child {
                font-size: medium;
                font-weight: bold;
            }
    }

    .timeline-content h2 {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 30px;
        background-color: var(--card-title-background);
        font-size: medium;
    }

    @media (min-width: 600px) {
        .timeline-content h2 {
            flex-direction: row;
            justify-content: space-between;
        }
    }


    /* Full-width containers */
    .container {
        width: 100%;
        position: relative;
        background-color: inherit;
        padding-top: 15px;
        padding-bottom: 15px;
    }



    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }


    .tag {
        padding: 3px;
        margin-top: 5px;
        display: inline-block;
        margin-right: 6px;
        background: rgba(0, 0, 0, 0.25);
    }

    .darker-tag {
        padding: 3px;
        margin-top: 5px;
        display: inline-block;
        margin-right: 6px;
        background: rgba(0, 0, 0, 0.3);
    }

    .side-projects {
        margin-top: 15px;
    }

    .text-tag {
        margin: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 3px;
        padding-right: 3px;
        background: rgba(0, 0, 0, 0.3);
    }

    .leafletMap {
        width: 300px;
        height: 300px;
    }

    @media (min-width: 520px) {
        .leafletMap {
            width: 400px;
            height: 400px;
        }
    }

    @media (min-width: 620px) {
        .leafletMap {
            width: 500px;
            height: 500px;
        }
    }

    @media (min-width: 720px) {
        .leafletMap {
            width: 600px;
            height: 600px;
        }
    }

    @media (min-width: 820px) {
        .leafletMap {
            width: 700px;
            height: 700px;
        }
    }

    @media (min-width: 920px) {
        .leafletMap {
            width: 800px;
            height: 800px;
        }
    }

    @media (min-width: 1000px) {
        .leafletMap {
            width: 420px;
            height: 420px;
        }
    }

    @media (min-width: 1100px) {
        .leafletMap {
            width: 470px;
            height: 470px;
        }
    }

    @media (min-width: 1200px) {
        .leafletMap {
            width: 530px;
            height: 530px;
        }
    }

    @media (min-width: 1300px) {
        .leafletMap {
            width: 580px;
            height: 580px;
        }
    }

    @media (min-width: 1400px) {
        .leafletMap {
            width: 630px;
            height: 630px;
        }
    }

    @media (min-width: 1500px) {
        .leafletMap {
            width: 680px;
            height: 680px;
        }
    }

    @media (min-width: 1600px) {
        .leafletMap {
            width: 720px;
            height: 720px;
        }
    }

    @media (min-width: 1700px) {
        .leafletMap {
            width: 770px;
            height: 770px;
        }
    }

    @media (min-width: 1800px) {
        .leafletMap {
            width: 820px;
            height: 820px;
        }
    }

    @media (min-width: 1900px) {
        .leafletMap {
            width: 870px;
            height: 870px;
        }
    }

    @media (min-width: 2000px) {
        .leafletMap {
            width: 920px;
            height: 920px;
        }
    }

    @media (min-width: 2100px) {
        .leafletMap {
            width: 970px;
            height: 970px;
        }
    }

    @media (min-width: 2200px) {
        .leafletMap {
            width: 1020px;
            height: 1020px;
        }
    }

    @media (min-width: 2300px) {
        .leafletMap {
            width: 1090px;
            height: 1090px;
        }
    }

    .loading-progress {
        position: relative;
        display: block;
        width: 8rem;
        height: 8rem;
        margin: 20vh auto 1rem auto;
    }

        .loading-progress circle {
            fill: none;
            stroke: var(--background);
            stroke-width: 0.6rem;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
        }

            .loading-progress circle:last-child {
                stroke: var(--logo-i-color);
                stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
                transition: stroke-dasharray 0.05s ease-in-out;
            }

    .loading-progress-text {
        position: absolute;
        text-align: center;
        font-weight: bold;
        inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    }

        .loading-progress-text:after {
            content: var(--blazor-load-percentage-text, "Loading");
        }