/* =========================================================
   GLOBAL
========================================================= */

#defaultCanvas0 {
    position: absolute;
    inset: 0;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   HERO 
========================================================= */

.hero {
    position: relative;
    margin-top: 5vh;
    display: grid;
    grid-template-areas:
        "canvas canvas canvas canvas canvas canvas"
        "first first first last last last"
        "port port port port port port";
}

#heroCanvasIndex {
    grid-area: canvas;
    width: 100%;
    height: 75vh;
    opacity: .5;
    position: relative;
}

#heroCanvasIndex #defaultCanvas0 {
    border-radius: 2vw;
}

.hero .first-name {
    grid-area: first;
}

.hero .last-name {
    grid-area: last;
    justify-self: end;
}

.hero h1 {
    font-size: 70px;
    line-height: auto;
}

.hero .port {
    grid-area: port;
    text-align: center;
    justify-self: center;
}

.hero .port h2 {
    font-size: 40px;
}

.hero>p {
    justify-self: center;
    margin-top: 1.25vh;
}

#aboutImg {
    max-height: 80vh;
    display: flex;
    align-items: center;
}

#aboutImg canvas {
    width: 100%;
    height: 100%;
}

footer h2 {
    grid-area: heading;
}

.footer-links {
    grid-area: links;
}

footer .name {
    grid-area: name;
}

footer .mail {
    grid-area: mail;
}

footer .credits {
    grid-area: credits;
}

/* =========================================================
   ABOUT 
========================================================= */

.about {
    margin-top: 10vh;
    display: grid;
    grid-template-areas:
        ". heading heading heading heading ."
        ". img img img img ."
        "text text text text text text";
}

.about h2 {
    grid-area: heading;
    justify-self: center;
}

.about p {
    grid-area: text;
    margin-top: 1.5vh;
}

#aboutImg {
    grid-area: img;
    position: relative;
    overflow: hidden;
}

.about-text-desktop {
    grid-area: desktop;
}

.about-text-desktop {
    display: none;
}

/* =========================================================
   WORK 
========================================================= */

.work {
    margin-top: 15vh;
}

.work h2 {
    grid-column: span 6;
}

.work-container {
    margin-top: 3vh;
    display: grid;
    row-gap: 30px;
    grid-template-areas:
        "title title title title title title"
        "img img img img img img"
        "desc desc desc desc desc desc"
        "date . tags tags . ."
        "view view view view view view"
        "nr nr nr nr nr nr";
}

.work-container h3 {
    grid-area: title;
    font-size: 32px;
}

.work-image-container {
    grid-area: img;
}

.work-container .description {
    grid-area: desc;
}

.work-container .date {
    grid-area: date;
}

.work-container .tags {
    grid-area: tags;
}

.work-container a {
    grid-area: view;
    font-size: 24px;
    font-weight: 700;
    color: var(--fg);
}

.work-container button {
    background: var(--fg);
    color: var(--bg);
    border: none;
    padding: 2.5% 5%;
    justify-self: end;
}

.work-container h5 {
    grid-area: nr;
    font-size: 32px;
    justify-self: center;
    width: 0;
    height: 0;
    overflow: hidden;
}

.view-project {
    display: none;
}

#footer {
    margin-top: 15vh;
    margin-bottom: 10vh;
    row-gap: 5vh;
    grid-template-areas:
        " heading heading heading heading heading heading"
        "name name mail mail . . "
        "links links . . . . "
        "credits credits credits credits . . "
    ;
}


/* =========================================================
   TABLET 
========================================================= */

@media (min-width: 600px) {

    .hero-mobile {
        display: none;
    }

    .hero {
        grid-template-areas:
            "canvas canvas canvas canvas canvas canvas canvas canvas"
            "first first first first last last last last"
            "port port port port port port port port";
    }

    .hero h1 {
        font-size: 19vw;
        margin-top: 0px;
    }

    #heroCanvasIndex {
        height: 74vh;
        grid-column: span 8;
    }

    .about {
        grid-template-areas:

            "heading heading heading heading heading heading heading heading"
            " . . img img img img . ."
            " . text text text text text text ."

        ;
    }




    .work-container {
        grid-template-areas:
            "title title title title title title title title"
            "img img img img img img img img"
            "desc desc desc desc desc desc desc desc"
            "date . tags tags . . . ."
            "view view view view view view view view"
            "nr nr nr nr nr nr nr nr";
    }



    #footer {
        margin-top: 15vh;
        margin-bottom: 10vh;
        row-gap: 12vh;
        grid-template-areas:
            " heading heading heading heading heading heading heading heading"
            "name name mail mail . . links links "
            "credits credits . . . . . . "
        ;
    }

}

@media (min-width: 850px) {
    .hero h1 {
        font-size: 19vw;
        margin-top: -5vw;
    }
}

/* =========================================================
   DESKTOP 
========================================================= */

@media (min-width: 1200px) {


    .hero h1 {
        font-size: 14vw;
        margin-top: -4vw;
    }

    .about {
        margin-top: 25vh;
        grid-template-areas:
            ". desktop desktop desktop . img img img . ."
            ". text text text . img img img . .";
    }

    .about h2 {
        justify-self: start;
    }

    .about p {
        position: relative;
        margin-top: -10vh;
    }

    .about-text-desktop {
        display: block;
    }

    .about-text-desktop p {
        margin-top: 5vh;
    }

    #about>p,
    #about>h2 {
        display: none;
    }

    .work {
        margin-top: 20vh;
    }

    .work h2 {
        grid-column: 2 / span 8;
    }

    #work>div:nth-child(2) {
        margin-top: 10vh;
    }

    .work-container {
        margin-top: 15vh;
        grid-template-areas:
            ". title title title title title title title title title"
            ". desc desc desc desc desc desc . date tags"
            "nr img img img img img img img img img";
    }

    .work-container h5 {
        width: auto;
        height: auto;
        overflow: visible;
        justify-self: center;
        align-self: center;
    }

    #heroCanvasIndex {
        grid-column: span 10;
    }

    .hero {
        grid-template-areas:
            "canvas canvas canvas canvas canvas canvas canvas canvas canvas canvas"
            "first first first first port port last last last last";
    }

    #navPopUp {
        display: none;
    }

    .port{
        position: relative;
        top: -5.5vw;
    }



    #footer {
        margin-top: 15vh;
        margin-bottom: 10vh;
        row-gap: 12vh;
        grid-template-areas:
            " . heading heading heading heading heading heading heading heading heading"
            ". name mail mail . . links . . ."
            ". credits credits . . . . . . ."
        ;
    }
}


@media (min-width: 1400px) {


    .work-container {
        margin-top: 15vh;
        grid-template-areas:
            ". title title title title title title title title title"
            ". desc desc desc desc desc . date tags tags "
            "nr img img img img img img img img img";
    }



}