@font-face {
    font-family: Cronos_Regu;
    src: url(../font/Cronos-Pro_12459.ttf);
}
@font-face {
    font-family: Cronos_Semi;
    src: url(../font/Cronos-Pro-Semibold_12456.ttf);
}
@font-face {
    font-family: Cronos_Full;
    src: url(../font/Cronos-Pro-Bold_12435.ttf);
}

:root {
    --body-bg: #000;
    --banner-bg: #333;
    --card-bg: #666;

    --nav-bg: rgba(33,33,33, 0.5);
    --nav-current-bg: #246;
    --nav-hover-bg: #47C;

    --text-color: #fff;

    --side-padding: 2em 6em;

    --card-link-bg: #999;
    --card-link-hover-bg: #bbb;
}



/* Mobile */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background: var(--body-bg);
    color: var(--text-color);
}


/* ------------------------------ NAV ------------------------------ */
    nav {
        background: var(--nav-bg);
        padding: 0 2rem;

        justify-content: center; /* put nav items at center */
        align-items: center; /*vertical align nav items and hamburger*/

        display: grid;
        grid-template-columns: 60% 40%;
    }


    /* ------------------------------ NAV-IMG ------------------------------ */
        .nav-img {
            margin: 0;
            margin-right: auto; /*left align img*/
        }

        .nav-img img {
            vertical-align: middle; /*align image with text*/
            width: 60px;
        }
    /* ------------------------------ NAV-IMG ------------------------------ */

    
    /* ------------------------------ NAV-HAM ------------------------------ */
        .hamburger {
            width: 100%;
            cursor: pointer;
            margin-left: auto; /* right align hamburger */
            width: fit-content; /* right align hamburger */
        }

        .hamburger .bar {
            display: block;
            margin: 5px 0;
            width: 30px;
            height: 3px;
            background-color: #fff;

            transition: all 0.2s ease-in-out; /*animation*/
        }

        /*hamburger animation*/
            .hamburger.active .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
        /*hamburger animation*/
    /* ------------------------------ NAV-HAM ------------------------------ */

    
    /* ------------------------------ NAV-BUT ------------------------------ */
        .nav-main {
            background-color: var(--nav-bg);
            border-radius: 2rem 0 0 2rem;
            margin: 0;
            padding: 1rem;

            position: fixed;
            top: 100px;
            right: 0;
            transform: translateX(100vw); /* Hide offscreen */
            transition: all 0.4s ease-in-out;

            display: grid;
            row-gap: 1rem;
        }

        .nav-main.active {
            transform: translateX(0);
        }

        .nav-main li {
            list-style: none;
            text-align: center; /*center nav items*/
        }

        .nav-main li a {
            border-radius: 100vh;
            padding: 0.5rem 1.5rem;
        }

        .nav-main li a:is(:link, :visited, :hover, :active) {
            text-decoration: none;
            color: var(--text-color);
        }

        .nav-main li:has([aria-current="page"]) a { /*nav item current page, aria-current set from js*/
            background-color: var(--nav-current-bg);
        }

        .nav-main li a:is(:hover) { /*nav item hover effect*/
            background-color: var(--nav-hover-bg);
        }
    /* ------------------------------ NAV-BUT ------------------------------ */
/* ------------------------------ NAV ------------------------------ */


.banner {
    background-color: var(--banner-bg);
    padding: var(--side-padding);
}

.section-title {
    font-size: 4em;
    font-weight: 800;
    font-style: italic;
    text-align: center;
}

/* ------------------------------ CARD ------------------------------ */
    .card-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* ------------------------------ CARD-CONTENT ------------------------------ */
        .card-contain {
            background-color: var(--card-bg);
            border-radius: 3vh;

            margin: 1rem;
            padding: 0.5rem;
            height: fit-content;
        }

        .card-title {
            margin: 0.5rem auto;
            font-size: 1.5em;
            font-weight: 600;
            font-style: italic;
            width: 14rem; /*make text go to next line if no space*/
        }

        /* ------------------------------ CARD-IMG ------------------------------ */
            .card-img {
                margin: 0;
            }

            .card-img img {
                border: 0.2rem solid var(--card-link-bg);
                border-radius: 3vh;

                max-height: 20rem;
            }
        /* ------------------------------ CARD-IMG ------------------------------ */

        /* ------------------------------ CARD-BUT ------------------------------ */
            .card-link:is(:link, :visited, :hover, :active)  {
                text-decoration: none;
                color: var(--text-color);
            }

            .card-link-contain {
                margin: 0.5rem;

                background-color: var(--card-link-bg);
                border-radius: 100vh;

                padding: 0.5rem;
            }

            .card-link-contain:is(:hover) {
                background-color: var(--card-link-hover-bg);
            }
        /* ------------------------------ CARD-BUT ------------------------------ */
    /* ------------------------------ CARD-CONTENT ------------------------------ */
/* ------------------------------ CARD ------------------------------ */


/* Desktop */
/* @media (min-width: 768px) { */
@media (min-width: 1200px) {
    /* ------------------------------ NAV ------------------------------ */
        nav {
            grid-template-columns: 20% 80%;
        }

        .hamburger {
            display: none;
        }

        .nav-main {
            position: static;

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
            row-gap: 1.5rem;

            background-color: transparent; /* remove background from mobile mode */
            transform: none;
            transition: none; /* remove transition from mobile mode */
        }
    /* ------------------------------ NAV ------------------------------ */
}