@import url("/css/variables.css");

body{
    margin:0;
    background-color: var(--main-color);
    color: var(--black-color);
    font-family: "PlexRegular", monospace;
    font-size: var(--medium-font-size);
}

::selection {
    color: black;
    font-weight: bolder;
    background-color: var(--main-color);
}

a:link, a:visited {
    color: var(--black-color);
}

a:visited {
    opacity: .75;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

header {
    display: flex;
    flex-flow: row wrap;
}

header .header-contact {
    display: flex;
    flex-grow: 0;
    align-items: center;
    margin: 0.5em;
}

header .header-title {
    display: flex;
    flex-grow: 1;
    margin: 0.5em;
}


header .header-title h1 {
    margin-block-start : .25em;
    margin-block-end : .0em;
    font-family: "PlexSemiBold", monospace;
    color: var(--secondary-color);
    font-size: 32px;
}

header .header-title h1 span {
    opacity: .5;
}




.console input {
    background-color: transparent;
    border:none;
    color: white;
}

.console input:focus-visible {
    border:none;
}

.console, .experiences-header, footer {
    display: flex;
    padding: 0.5em 0;
    background-color: var(--black-color);
    color: white;
    align-items:center;
    justify-content:flex-start;
    font-size: var(--medium-font-size);
}

header, .console, .aboutme, .experiences-header, .experience, footer {
    padding-left: var(--default-left-padding);
    border-bottom: var(--panel-border);
}

footer{
    justify-content: space-between;
    border-bottom: none;
    align-items: center;
}

footer .made-in-eu {
    font-size: var(--small-font-size);
    align-items: center;
    align-self: center;
    display: inline-flex;
}

footer .made-in-eu img {
    margin: 0 1em;
}

footer .made-in-go {
    font-size: var(--small-font-size);
    align-items: center;
    align-self: center;
    display: inline-flex;
    white-space: pre;
}

footer .made-in-go img {
    margin: 0 .5em;
    max-height: 2.5em;
}

.aboutme {
    font-size: var(--medium-font-size);
}

.aboutme a {
    color: var(--secondary-color);
    text-decoration: none;
}

.main {
    background-color: rgba(255, 255, 255, 0.25);
}

.aboutme, .experience, .contact {
    padding: 1em 1em .25em 1em;
}

.experience .employer {
    padding-left: 1em;
    color: var(--secondary-color);
}

.experience .exp-title {
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    font-size: var(--large-font-size);
    font-family: "PlexSemiBold", monospace;
    display: flex;
}

.experience .client {
    line-height: .85em;
    font-size: var(--medium-font-size);
}

.experience .tagline{
    font-size: var(--medium-font-size);
}

.experience .client, .experience .tagline {
    display: block;
    font-family: "PlexSemiBold", monospace;
}


.experience .exp-title .date {
    font-size: var(--small-font-size);
    line-height: var(--large-font-size); /*Used to follow job title line height*/
    vertical-align: middle;
    margin-left: auto;
    text-align: right;
    border-bottom: 2px dashed var(--secondary-color);
}

.experience .content {
    font-size: var(--small-font-size);
    letter-spacing: -0.075em;
    padding: .5em 0;
}

.experience .content p {   
    margin-block-start: 0.6em;
    margin-block-end: 0.6em;
}

.experience .techs {
    display: flex;
}

.experience .tag, .aboutme .tag, .experiences-header .current-filter {
    margin: 0.125em;
    display: inline-flex;
    padding: .5em;
    border-radius: 7px;
    text-decoration: none;
}

.experience .tag, .aboutme .tag {
    box-shadow: -2px 2px red;
    background-color: var(--secondary-color);
    color: white;
}

.experience .tag:active, .experiences-header .current-filter:active {
    transform: translate(-2px, 2px);
    box-shadow: none;
}

.experiences-header .current-filter {
    box-shadow: -2px 2px var(--secondary-color);
    background-color: var(--main-color);
    color: var(--black-color);
    margin-top: -5px;
    margin-bottom: -5px;
}


.experiences-header .timeline-link {
    text-decoration: none;
    color: white;
    margin-left: auto;
    padding-right: var(--default-left-padding);
}

.experiences-header p {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: 0.5em;
}

/* ── Timeline (Gantt) ─────────────────────────────────────────── */

.timeline-container {
    padding: 0.75em var(--default-left-padding) 1em;
    border-bottom: var(--panel-border);
    overflow-x: auto;
}

/* Year axis row */
.timeline-axis-row {
    position: relative;
    height: 28px;
    border-bottom: 1px solid var(--black-color);
    min-width: 640px;
}

.year-label {
    position: absolute;
    bottom: 4px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--black-color);
    white-space: nowrap;
    user-select: none;
}

/* NOW marker — vertical dashed line spanning all experience rows */
.timeline-rows-wrapper {
    position: relative;
    min-width: 640px;
}

.now-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed rgba(0, 120, 212, 0.25);
    z-index: 1;
    pointer-events: none;
}

/* Experience rows */
.timeline-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 4px 0;
}

.timeline-bars-col {
    position: relative;
    height: 58px;
}

/* Info label (title @employer · client) — above the bar */
.bar-info-label {
    position: absolute;
    top: 0;
    font-size: 11px;
    font-family: "PlexSemiBold", monospace;
    white-space: nowrap;
    color: var(--black-color);
    z-index: 1;
}

.bar-employer-tag {
    font-family: "PlexMono", monospace;
    font-weight: normal;
    color: #888;
}

.bar-client-tag {
    font-family: "PlexMono", monospace;
    font-weight: normal;
    color: var(--secondary-color);
    opacity: 0.8;
}

/* Gantt bar — at the very top of each row */
.timeline-bar {
    position: absolute;
    top: 0;
    height: 14px;
    background-color: var(--secondary-color);
    border-radius: 3px;
    min-width: 4px;
    box-sizing: border-box;
}

.timeline-bar.ongoing {
    border-radius: 3px 0 0 3px;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.3) 4px,
        rgba(255, 255, 255, 0.3) 6px
    );
}

/* Info label line 1: Title @Employer */
.bar-info-label {
    position: absolute;
    top: 18px;
    font-size: 11px;
    font-family: "PlexSemiBold", monospace;
    white-space: nowrap;
    color: var(--black-color);
    z-index: 3;
}

.bar-employer-tag {
    font-family: "PlexMono", monospace;
    font-weight: normal;
    color: #888;
}

/* Info label line 2: Client */
.bar-client-label {
    position: absolute;
    top: 31px;
    font-size: 10px;
    font-family: "PlexMono", monospace;
    white-space: nowrap;
    color: var(--secondary-color);
    opacity: 0.8;
    z-index: 3;
}

/* Date label — bottom line */
.bar-date-label {
    position: absolute;
    top: 43px;
    font-size: 10px;
    color: var(--secondary-color);
    opacity: 0.75;
    white-space: nowrap;
    letter-spacing: 0;
    z-index: 3;
}


@media screen and (min-width: 920px) {

    .main {
        margin: 3em 0;
        border: var(--panel-border);
        box-shadow: 
        rgba(var(--black-color-r), var(--black-color-g), var(--black-color-b), 0.5) -5px 5px,
        rgba(var(--black-color-r), var(--black-color-g), var(--black-color-b), 0.4) -10px 10px,
        rgba(var(--black-color-r), var(--black-color-g), var(--black-color-b), 0.3) -15px 15px,
        rgba(var(--black-color-r), var(--black-color-g), var(--black-color-b), 0.2) -20px 20px,
        rgba(var(--black-color-r), var(--black-color-g), var(--black-color-b), 0.1) -25px 25px;
    }

    .aboutme, .experience {
        padding: 1em 1.5em .5em 1.5em;
    }

    header .header-title h1 {
        margin-block-start : .5em;
        margin-block-end : .5em;
    }

    .timeline-container {
        padding: 0.75em 1.5em 1em;
    }

}

@media screen and (min-width:920px) and (max-width:1200px){
    .main {
        margin-left: 15vw;
        margin-right: 15vw;
    }
}

@media screen and (min-width:1200px){
    .main {
        margin-left: 25vw;
        margin-right: 25vw;
    }
}