@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;
}


@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;
    }
}

@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;
    }
}