*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ---------- Custom properties ---------- */

:root {
    --ff-primary: 'Source Sans Pro', sans-serif;
    --ff-secondary: 'Source Code Pro' monospace;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-light: #ffffff;
    --clr-light-grey: #eeeeee;
    --clr-grey: #777777;
    --clr-dark: #303030;
    --clr-black: #111;
    --clr-accent: #4BF2F2;
    --clr-accent-dark: #20C0C0;
    --clr-blue-l: #0070D0;
    --clr-blue-d: #003869;

    --fs-h1: 4.5rem;
    --fs-h2: 3.75rem;
    --fs-h2-5: 2.25rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
    --fs-small: 0.8rem;

    --shadow-b: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
      0.125em 0.125em 0.25em rgba(0,0,0,.15);
}

@media (max-width: 1100px) {
    :root {
    --fs-h1: 6rem;
    --fs-h2: 4.5rem;
    --fs-h2-5: 3.5rem;
    --fs-h3: 2.5rem;
    --fs-body: 2rem;
    --fs-small: 1.4rem;
    }
}


/* ---------- Element-wise ---------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
    display: flex;         /* Trick for footer */
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
}

section {
    padding: 3em 2em;
}

img {
    display: block;
    max-width: 100%;
}

strong { font-weight: var(--fw-bold);}

:focus { /* Highlight focused object */
    outline: 2px solid var(--clr-accent);
    outline-offset: 1px;
}

ul {
    text-align: left;
}

a {
    color: var(--clr-accent-dark);
    text-decoration: none;
}

a:hover,
a:focus { opacity: 75%;}

form input,
form textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font: var(--ff-primary);
    margin: 0.5em 0.5em auto 0.5em;
}

form input {
    height: calc(1.5em + .75rem + 3px);
    min-width: 10em;
}

form textarea {
    resize: vertical;
    min-height: 2.3em;
    max-height: 14em;
}

blockquote {
    background-color: var(--clr-light-grey);
    padding: 1em;
    border-radius: .5em;
}


/* ---------- Utility classes ---------- */

.strip {
    padding: 0.5em;
    background: var(--clr-accent);
    text-align: center;
    font-size: var(--fs-h3);
}

.mt-2 { margin-top: 2em !important; }
.mb-2 { margin-bottom: 2em !important; }
.ml-2 { margin-left: 2em !important; }
.mr-2 { margin-right: 2em !important; }
.mx-a {
    margin-left: auto !important;
    margin-right: auto !important;
}
.my-a {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-10 { width: 100%; }

.bg-light { background-color: var(--clr-light); }
.bg-dark { background-color: var(--clr-dark); }
.bg-black { background-color: var(--clr-black); }
.bg-accent { background-color: var(--clr-accent); }

.flex-center {
    display: flex;
    align-content: center;
}


/* ---------- Typography ----------*/

h1,
h2,
h3 {
    line-height: 1;
    margin-top: 1em;
    margin-bottom: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin-top: .3em;}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.shadow {
    box-shadow: var(--shadow-b);
}

.intro {
    font-size: var(--fs-h3);
}

.section__title--intro {
    font-weight: var(--fw-reg);
    text-align: center;
}

.section__title--intro strong {
    /* Make the title name display in a different line */
    display: block;
}

.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3);
}

.section__subtitle--intro {
    text-align: center;
}

.section__subtitle--intro,
.section__subtitle--about {
    background: var(--clr-accent);
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}

.section__subtitle--about {
    color: var(--clr-dark);
    display: inline-block;
    width: max-content;
}

.section__subtitle--work {
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}

.section__achievements {
    background-color: var(--clr-dark);
    background-image: url(../img/graph-background.png);
    background-blend-mode: soft-light; /*blend bg-clr and bg-img*/
    background-size: 100%;
}

.attribution {
    font-size: var(--fs-small);
    color: var(--clr-blue-l);
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}


/* ---------- Social icons ---------- */

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 1em auto 1em auto;
    padding: 0;
    width: max-content;
}

.social-list__link {
    padding: .75em;
}

.social-list__link:hover {
    opacity: .7;
}


/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: .5em 2.5em;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    transition: transform 200ms ease-in-out;
    border-radius: .4em;
    border: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: max-content;
}

.btn-accent {
    background: var(--clr-accent);
    color: var(--clr-dark);
}

.btn-dark {
    background: var(--clr-dark);
    color: var(--clr-light);
}

.btn:hover {
    transform: scale(1.1);
}


/* ---------- YouTube embeds ---------- */

.youtube-embed {
    width: 560px;
    height: 315px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5em;
}


/* ---------- Header ---------- */

header {
    background-color: var(--clr-light);
    display: flex;
    justify-content: space-between;
    padding: 1em;
}

.logo {
    max-width: 5em;
    margin-left: 2em;
}

.nav {
    position: fixed;
    background: var(--clr-dark);
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    transform: translateX(100%);     /*hidden by default*/
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav__list {
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav__link {
    color: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    text-decoration: none;
}

.nav__link:hover {
    color: var(--clr-accent);
}

.nav-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 2em;
    top: 2em;
    z-index: 101;
    height: 3em;
    font-size: var(--fs-body);
}

.nav-open .nav {
    transform: translateX(0%);    /*show nav*/
}

.nav-open .nav-toggle {
    position: fixed;
}

.nav-open .hamburger {
    transform: rotate(.625turn);
}

.nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-0.8em);
}
.nav-open .hamburger::after {
    opacity: 0;
}

.hamburger {
    display: block;
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    background: var(--clr-dark);
    width: 3em;
    height: 0.4em;
    border-radius: 1em;
    transition: transform 250ms ease-in-out;
    font-size: var(--fs-body);
}

.nav-open .hamburger,
.nav-open .hamburger::before,
.nav-open .hamburger::after {
    background: var(--clr-accent);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}

.hamburger::before { top: 0.8em; }
.hamburger::after { bottom: 0.8em; }


/* ---------- Introduction ---------- */

.intro {
    background-color: var(--clr-light);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.intro__img {
    border-radius: 50%;
    max-width: 12em;
    max-height: 12em;
    margin-left: auto;
    margin-right: auto;
}

.section__title--intro {
    z-index: 2;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.section__subtitle--intro {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    min-width: 14em;
}

.social-list--intro a {
    color: var(--clr-dark);
}

@media (min-width: 1100px) {
    .intro {
    display: grid;
    width: min-content;
    margin: 0 auto;
    grid-column-gap: 1em;
    grid-template-areas:
        "img title"
        "img subtitle"
        "none links";
    grid-template-columns: min-content max-content;
    }

    .intro__img {
    grid-area: img;
    min-width: 250px;
    position: relative;
    z-index: 3;
    }

    .section__title--intro {
    margin-top: auto;
    }

    .section__subtitle--intro {
    display: inline-block;
    align-self: start;
    grid-column: -1 / 1;
    grid-row: 2;
    text-align: right;
    position: relative;
    left: -1.5em;
    width: calc(100% + 4em);
    }

    .social-list--intro {
    grid-area: links;
    grid-column: 2;
    grid-row: 3;
    margin: auto !important;
    }
}


/* ---------- About me ---------- */

.about-me {
    background-color: var(--clr-dark);
    width: 100%
}

.about-me .content {
    max-width: 1000px;
    margin: 0 auto;
    color: var(--clr-light);
}

@media (max-width: 1100px) {
    .about-me__img {
    max-width: 16em;
    margin-left: auto;
    margin-right: auto;
    }
}

@media (min-width: 1100px) {
    .about-me .content {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-areas:
        "title img"
        "subtitle img"
        "text img";
    grid-column-gap: 2em;
    }

    .section__title--about {
    grid-area: title;
    }

    .section__subtitle--about {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    left: -1em;
    right: 1em;
    width: calc(100% + 2em);
    padding-left: 1em;
    padding-right: calc(200px + 3em); /* 2em+img+1em */
    }

    .about-me__img {
    grid-area: img;
    position: relative;
    z-index: 2;
    }
}


/* ---------- My projects ---------- */

.my-work {
    background-color: var(--clr-light);
    color: var(--clr-dark);
    text-align: center;
}

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        /*As many columns as fit, each between 300px and 1fr*/
    max-width: 1500px; /*Usually aplied with auto-fit and margin: auto*/
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
    overflow: hidden;
    background-color: var(--clr-light-grey);
}

.project__item {
    background: var(--clr-accent);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.project__img {
    width: 100%;
    background-color: white;
    transition:
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
}

.project__item:focus {
    position: relative;
    z-index: 2;
}

.project__img:hover,
.project__item:focus .project__img,
.zoom-accent {
    transform: scale(1.2);
    opacity: .55;
}

.project--info {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--clr-light);
    font-size: var(--fs-h2-5);
    background: rgba(0, 0, 0, 0.5);
}
.project__item:hover .project--info {
    display: inline;
}


/* ---------- More about me ---------- */

.skills {
    background-color: var(--clr-dark);
    background-image: url(../img2/services-bg.jpg);
    background-size: cover;
    /* background-blend-mode: multiply; */ /*blend bg-clr and bg-img*/
    color: var(--clr-light);
    text-align: center;
}

.section__title--infoblocks {
    color: var(--clr-light);
    position: relative;
}

.section__title--infoblocks::after {
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    margin: 0.5em auto 0;          /*top left-right bottom*/
    background: var(--clr-light);     /*currentColor; matches the bg of the original text*/
    opacity: 0.5;
}

.infoblock {
    min-width: 16em;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1100px) {
    .infoblocks {
    display: flex;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    }

    .infoblock {
    width: 33%;
    margin: 0 auto;
    }

    .infoblock + .infoblock {
    margin-left: 2em;

    }
}

.infoblock h3 {
    margin-top: 2em;
}

.infoblock a {
    margin-top: 1.5em;
}


/* ---------- Footer ---------- */

.footer {
    background: var(--clr-black);
    color: var(--clr-accent);
    text-align: center;
    padding: 2.5em 0;
    font-size: var(--fs-h3);
    min-height: 12em;
    height: 100%;
    margin-top: auto;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list--footer {
    margin-top: 2em;
    margin-bottom: 2em;
}


/* ---------- Individual portfolio item styles ---------- */

.section__tags {
    display: flex;
    justify-content: center;
    padding: 0;
    z-index: 2;
    margin-top: -2em;
    margin-bottom: 2em;
}

.section__tags span {
    background-color: var(--clr-blue-l);
    border-radius: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: white;
}

.section__tags span + span {
    margin-left: 0.2em;
}

.portfolio-item-individual {
    padding: 0 2em 2em;
    max-width: 1000px;
    margin: 0 auto;
}

.portfolio-item-individual img {
    margin-left: auto;
    margin-right: auto;
}

.portfolio-item-individual p {
    margin-left: auto;
    margin-right: auto;
}

.horizontal-elements {
    display: flex;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.horizontal-elements img {
    min-width: 350px;
    max-height: 800px;
}

.horizontal-elements * + * {
    margin-left: 2em;
}


/* ---------- 404 Error ---------- */

.error-404 {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
}

.error-404 img {
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    max-height: 15em;
}


/* ---------- Contact me ---------- */

.contact {
    background-color: var(--clr-grey);
    background-image: url(../img/contact.png);
    background-size: cover;
    background-blend-mode: multiply; /*blend bg-clr and bg-img*/
    background-position: center;
    text-align: center;
}

.section__title--contact {
    color: var(--clr-light);
    position: relative;
}

.section__title--contact::after {
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    margin: 0.5em auto 0;          /*top left-right bottom*/
    background: var(--clr-light);     /*currentColor; matches the bg of the original text*/
    opacity: 0.5;
}

.contact__input {
    display: block;
    min-width: 10em;
    width: 100%;
}

#back {
    display: none;
}

#submit, #back {
    margin-top: 1em;
}

@media (min-width: 1100px) {
    .contact__form {
    display: grid;
    width: 100%;
    margin: 0;
    grid-column-gap: 1em;
    grid-template-areas:
        "name email"
        "message message"
        "back submit";
    }

    #Name {
    grid-area: name;
    }

    #Email {
    grid-area: email;
    }

    .contact--message {
    grid-area: message;
    min-height: 15em;
    }

    #back {
    display: block;
    grid-area: back;
    }

    #submit {
    grid-area: submit;
    }
}