/* ............................... */
            
            /* GOOGLE FONTS */
            /* --------------------------------------------------------- */
            .playwrite-us-modern
            {
                font-family        : "Playwrite US Modern", cursive;
                font-optical-sizing: auto;
                font-weight        : 100;
                font-style         : normal;
            }    

            @font-face
            {
                font-family : "Areal";
                src         : url("../font/ABCAreal-Regular.woff2") format("woff2");
                font-weight : 400;
                font-style  : normal;
                font-display: swap;
            }
            /* --------------------------------------------------------- */

            html
            {
                font-size  : 1.25rem;
            }      

            html,
            body
            {
                background : #220b66;
                color      : #FFFFFF;
                margin     : 0;
                padding    : 0;
                font-family: "Areal", sans-serif;
            }

            body
            {
                max-width  : 100%;
                padding    : 1.25rem;
                line-height: 1.5;
            }

            a
            {
                text-decoration: none;
            }
            
            a, a:visited
            {
                color: #FFFFFF;
            }

            p a 
            {
                font-weight: 600;
            }
    
            a:hover
            {
                color: #FF00FF;
            }

            a:active
            {
                color: #00FFFF;
            }

            /* readable column on larger screens */
            @media(min-width: 768px)
            {

                body
                {
                    max-width: 50ch;
                    margin   : 0 auto;
                    padding  : 2rem;
                }
            }

            @media (min-width: 1200px)
            {
                
                body
                {
                    display          : grid;
                    grid-auto-flow   : column;
                    grid-auto-columns: 1.5fr 1fr 1fr 1fr;
                    gap              : 3rem;

                    max-width: none;
                    margin: 0 auto;
                }

                section#CTA
                {
                    display: none;
                }

                footer
                {
                    position        : fixed;
                    bottom          : 2vh;
                    left            : 2vw;
                }

                .two_columns
                {
                    display              : grid;
                    grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
                    gap                  : clamp(2rem, 5vw, 5rem);
                    align-items          : start;
                    width                : min(100%, 90rem);
                    margin-inline        : auto;
                }
            }

            /* spacing */
            h1 
            {
                animation: oscillate 2s infinite;
            }

            @keyframes oscillate
            {
                0%
                {
                    font-weight: 100;
                }

                50%
                {
                    font-weight: 400;
                }

                100%
                {
                    font-weight: 100;
                }
            }
            h1, h2, h3
            {
                font-family   : "Playwrite US Modern", cursive;
                font-weight   : 100;
                transition    : 0.4s;
                letter-spacing: 0;
            }

            h1:hover, h2:hover, h3:hover
            {
                font-weight: 400;

            }

            h1
            {
                margin-bottom: 1rem;             
            }

            h2
            {
                margin-top   : 2rem;
                margin-bottom: 0.5rem;
            }

            h3
            {
                margin   : 0;
                display  : inline;
                font-size: 1rem;
            }

            p
            {
                margin-bottom: 1rem;
            }            

            footer
            {
                margin-top: 2rem;
            }
            /* ............................... */

            @media(min-width: 768px)
            {
                #description
                {
                    position:sticky;
                }

                .case_study
                {
                    max-width: 50ch;
                }
            }

            .category_grid
            {
                display              : grid;
                grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
                gap                  : 1.25rem;
                margin               : 0;
                padding              : 0;
                list-style           : none;
            }

            #description
            {
                position  : relative;
                top       : 2rem;
                align-self: start;
            }

            /*
            ul.descriptions li
            {
                font-size: 0.60rem;
            }
            */

            ul.links
            {
                list-style-type: "→ ";
            }

            ul.links li
            {
                transition: transform 0.25s ease-in-out;
            }

            ul.links li:hover
            {
                transform: translateX(20px);
            }

            a.right
            {
                transition: transform 0.25s ease-in-out;
                display   : block;
            }

            a.right:hover
            {
                transform: translateX(20px);
            }

            a.left
            {
                transition: transform 0.25s ease-in-out;
                display   : block;
            }

            a.left:hover
            {
                transform: translateX(-20px);
            }

            img
            {
                width  : 100%;
                height : auto;
                display: block;
            }
            
            #video_embed
            {
                min-width: 0;
            }

            #video_embed iframe
            {
                display     : block;
                width       : 100%;
                height      : auto;
                aspect-ratio: 16 / 9;
                border      : 0;
            }