article
{
    padding: 5vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
    letter-spacing: 0.05em;
}

nav
{
    display: flex;
    z-index: 100;

    position: fixed;
    bottom: 0;
    padding: 1.5em;

    width: 100vw;
    height: fit-content;

    border-top: solid 0.5vh black;
    background-image: linear-gradient(to right, white 0%, white 30%, #00000000);

    align-items: center;
    font-size: 1.3vmin;

    [href="#HOME"]
    {
        h2, h3
        {
            display: inline;
        }
    }

    a::after
    {
        content: "|";
        width: 2em;

        padding-right: 2vh;
        padding-left:  2vh;
    }

    a:last-child::after
    {
        content: none;
    }

    a:hover::after
    {
        content: "<";
    }
}

.title
{
    grid-area: T;

    height: fit-content;
    align-content: start;

    font-size: 1.5rem;
    font-weight: 700;
    text-wrap: nowrap;

    animation: slideleft 1s;

    h3
    {
        font-size: 70%;
    }
}

#HOME
{
    display: grid;
    row-gap: 5vh;
    grid-template:
    "T . I I" 0.2fr
    "S . I I" auto
    "J . C D" 0.2fr /
    10vw 10vw auto auto;
    /*
        T = Title, S = Slogan, C = Comment,
        I = Icons, J = Jumper
    */

    height: 100vh;
        
    /*
        holy chet
        https://stackoverflow.com/questions/55876207/display-a-grid-p-row-vs-a-grid-div-row
        in grid layout,
        p is different to div, especially when containing element in it
    */

    .slogan
    {
        position: relative;
        right: 0.1em;

        grid-area: S;

        font-size: 3rem;
        writing-mode: vertical-lr;
        text-wrap: nowrap;
        line-height: 1.2em;
        font-weight: 800;

        text-align: center;
        /* align-content: center; */

        animation: slideleft 1s;
    }

    .jumper
    {
        grid-area: J;

        align-content: end;

        animation: slideleft 1s;

        a
        {
            display: block;
        }
    }

    .comment, .disclamer
    {
        white-space: pre-line;

        font-weight: 600;
        font-size: 100%;

        align-self: center;
    }

    .comment
    {grid-area: C;}
    
    .disclamer
    {
        grid-area: D;
        text-align: start;
    }

    .icons
    {
        grid-area: I;

        display: grid;
        grid-template:
        "W F S H" auto /
        1fr 1fr 1fr 1fr;

        *
        {
            background-size: 10vw;
            background-repeat: space;
        }

        .why
        {
            grid-area: W;
            background-image: url("./i/con/exercise.svg");
        }

        .foods
        {
            grid-area: F;
            background-image: url("./i/con/food.svg");
        }

        .sport
        {
            grid-area: S;
            background-image: url("./i/con/run.svg");
        }

        .healthy
        {
            grid-area: H;
            background-image: url("./i/con/fly.svg");
        }
    }

    .hint
    {
        position: absolute;
        bottom: 0;
        right: 0;

        padding: 1em;

        font-size: 1.5em;
        font-weight: 700;
        writing-mode: vertical-lr;
    }

    a:hover::after
    {
        content: " ←";
        position: absolute;
        transform: translateX(1vw);
        animation: slighterslideleft 0.5s;
    }

    a[target="_blank"]::after
    {
        position: absolute;
        content: url("./i/con/out.svg");
        animation: none;

        transition: transform 0.1s;
        transform: translateX(1vw) scale(1.5);
    }

    a[target="_blank"]:hover::after
    {
        transition: transform 0.1s;
        transform: translateX(1vw) scale(2);
    }
}

#WHY, #FOODS, #SPORT, #EXAMPLE
{
    h2
    {
        margin-bottom: 2.7vh;
        padding: 1rem;
        background-color: black;
        color: white;
    }
}

#WHY, #FOODS, #SPORT
{
    column-count: 2;
    column-gap: 5vw;

    div
    {
        
        display: inline-block; /* prevent to take title & content apart*/
        width: 100%;

        h2
        {
            background-color: white;
            color: black;
        }

        p, ul
        {
            font-size: 140%;
            line-height: 2.0em;
            font-weight: 600;

            margin-bottom: 2.7vh;
            
            padding: 2em;

            mark
            {
                background-color: #00000000;
            }
        }

        ul
        {
            list-style: inside;
        }
    }
}

#EXAMPLE
{
    .imgcontainer
    {
        display: flex;
        height: 100vh;
    }

    .imgcontainer
    {
        div
        {
            overflow: hidden;
            
            height: 70vh;
            width: auto;

            img
            {
                height: 70vh;
                width: auto;
            }
        }
        
    
        div:hover
        {
            overflow: visible;

            height: 70vh;
            width: auto;

            box-shadow: black 0px 0px 20px;
            
            z-index: 2;
        }
    }
}

/* background stuff */

/*
    https://stackoverflow.com/questions/49209970/width-100-of-an-absolute-positioned-element-is-bigger-than-the-parent
    TODAY I LEARNED
    the cood of a `position: absolute;` element will relative to first ancestor
    that having `position: relative;`,
    which is useful on cover/backgrounding something onto element with
    ::before & ::after  
*/

article, footer
{position: relative;}

article::before, footer::before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    /* blur filter's max limit is 100px under cross browser scense */
    /* https://stackoverflow.com/questions/70523380/how-to-blur-consistently-cross-browsers */
    filter: blur(100px);
}

#HOME::before
{
    transform: skewX(30deg) skewY(2deg) scale(0.8);
    background-color: #c6da56;
}

#WHY::before
{
    transform: skewX(-50deg) skewY(5deg);
    background-color: lightgrey;
}

#FOODS::before
{
    transform: skewX(-6deg) skewY(8deg);
    background-color: salmon;    
}

#SPORT::before
{
    transform: skewX(3deg) skewY(0deg) scale(0.9);
    background-color: cornflowerblue;
}

#EXAMPLE::before
{
    transform: skewX(20deg) skewY(-10deg) scale(0.8);
    background-color: black;
}

footer::before
{
    filter: blur(5px);

    transform: skewY(2deg);
    background-color: #172145;
}

/* footer */

footer
{
    height: 6em;
    width: 100vw;
    padding: 2em;

    align-content: center;

    color: white;

    span
    {
        text-decoration: line-through;
    }
}

#navpadder
{
    height: 15vh;
}