:root {
            --primary-color: #2e9d46;
            --secondary-color: #f5faa7;
            --accent-color: rgba(255, 0, 174, 0.333);
            --secondary-font-color: rgba(255, 0, 174, 0.333);
            --border-radius: 30px; 
            --box-shadow: 20px 10px 5px rgba(202, 159, 17, 0.342), 10px 7px 10px inset rgba(244, 250, 167, 0.443);
            --header-height: 10vh;
        }
        p::first-line {
            font-size: 2.1em;
            font-weight: bold;
            color: var(--font-color);
            margin: 2px;
        }


        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
        body, html {
            margin: 0;
            padding: 0;
        }
        @keyframes bounceIn {
                0% { transform: scale(0.5); opacity: 0; }
                50% { transform: scale(1.1); opacity: 1;}
                100% { transform: scale(1); opacity: 1;}
            }
        @keyframes hover {
            0% { transform: translate(0, 0) }
            50% { transform: translate(0, 5px) }
            100% { transform: translate(0, 0) }
        }

        .chewy-regular {
            font-family: "Chewy", system-ui;
            font-weight: 400;
            font-style: normal;
        }

        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0 5vw 0 5vw;
        }
        .box {
            padding: 20px;
            background-color: rgba(46, 157, 70, 0.491);
            /*background: linear-gradient(to bottom, rgba(101, 194, 121, 0.491), rgba(66, 62, 147, 0.395));*/
            border: 1px solid rgba(245, 250, 167, 0.47);
            transition: background-color 0.3s ease;
            animation: bounceIn 1.5s ease;
            opacity: 0;
            animation-fill-mode: forwards;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
        }
        #javascript-game-design-box { animation-delay: 0s; }
        #godot-game-engine-box { animation-delay: 0.2s; }
        #webdesign-small-business-portfolio-box { animation-delay: 0.4s; }
        #illustration-graphic-design-box { animation-delay: 0.6s; }

        #digital-design-intro-box { animation-delay: 0s; }
        #digital-marketing-videos-box { animation-delay: 0.2s; }
        #mobile-game-design-box { animation-delay: 0.4s; }

        .header {
            top: 0;
            left: 0;
            width: 100%;
            border: 2px rgba(0, 0, 0, 0.08) solid;
            position: sticky;
            box-shadow: 0 10px 10px inset rgba(255, 0, 174, 0.279);
            color: rgba(211, 61, 163, 0.676);
            font-size: 3vw;
            z-index: 5;
            margin: 0 0 20px 0;
            max-height: var(--header-height);
        }
        li a {
            transition: background-color 1s ease;
            text-decoration: none;
            color: rgba(211, 61, 163, 0.676);
        }
        li a:hover {
            color: rgba(132, 17, 111, 0.8);
        }
        ul {
            list-style-type: none;
            font-weight: bolder;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8%;
            margin: 0;
            padding: 10px;
            transition: background-color 1s ease;
        }
        .footer {
            position: relative;
            width: 100%;
            height: 10vh;
            background-color: rgba(202, 159, 17, 0.342);
            text-align: center;
            line-height: 10vh;
            font-size: 1em;
            color: rgba(109, 69, 26, 0.685);
        }
        #merch_intro {
            color: #0e7a1c;
            margin: 5vh, 10vw;
        }
        #footer p {
            margin: 0;
            padding: 0;
            color: var(--secondary-font-color);
        }
        #digital-design-intro-box {
            height: min-content;
            font-size: 1.5em;
            margin-right: 0;
            flex-basis: 60%;
            /*overflow: auto;/* Allows scrolling if content overflows */
        }
        #mobile-game-design-box {
            width: min-content;
            flex-basis: 100%;
            margin: 0 auto;
            flex-direction: row;
            margin-top: 10%;
            p::first-line {
                font-size: 1.5em;
                color: #0e7a1c;
            }
        }
        #digital-marketing-videos-box {
            flex-basis: 20%;
        }
        #tiktok-marketing {
            font-size: 1.3em;
            width: 45vh;
            padding: 10px 1vh 10px 1vh;
            margin-bottom:0;
            color: rgba(211, 61, 163, 0.676);
            background: linear-gradient(to top, var(--secondary-color), rgba(255, 0, 174, 0.279));
        }
        #tiktok-marketing-caption {
            font-size: .8em;
            color: rgba(211, 61, 163, 0.676);
            background: linear-gradient(to top, var(--secondary-color), rgba(255, 0, 174, 0.279));
            width: 43vh;
            padding: 10px 1vh 10px 1vh;
            margin-top: 80vh;
            position: absolute;
        }
        .yoga-advertising-video {
            width: 30vw;
            margin: 0 auto;
            position: absolute;
        }
        .mobile-game-design-images {
            width: 500px;
            height: auto;
            margin: 0 auto;
            padding: 0;
        }
        .body {
            background-color: rgba(46, 157, 70, 0.589);
        }
        body {
            background-color: #ffe89b;
            font-family: 'Roboto', sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .box:hover {
            background-color: rgba(46, 157, 70, 0.8);
        }
        #contact-box {
            margin: 20px auto;
            padding: 20px;
            width: 30vw;
            height: fit-content;
            color: #0e7a1c;
            box-shadow: 20px 10px 5px rgba(202, 159, 17, 0.342), 10px 7px 10px inset rgba(244, 250, 167, 0.443);
        }
        .contact-inputs {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 1em;
        }
        #submit-button {
            background-color: rgba(95, 7, 110, 0.8);
            color: rgba(255, 255, 255, 0.562);
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin:auto;
        }
        #submit-button:hover {
            background-color: rgba(95, 7, 110, 0.9);
            color: rgba(255, 255, 255, 0.8);
            text-shadow: #333 4px 4px 6px;
        }
        #intro {
            margin-top: -10px;
            padding: 0;
            color: #0e7a1c;
        }
        #beetle-image {
            margin-right: 2%;
        }
        .btn {
            font-size: 1.5em;
            padding: 10px 20px;
            background-color: rgba(95, 7, 110, 0.8);
            color: rgba(255, 255, 255, 0.562);
            border: none;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            animation: hover 3s ease infinite;
        }
        .intro-btn {
            margin: -2% 0 0 5%;
            position: absolute;
            display: inline-block;
            top: 45%;
        }
        .btn:hover {
            background-color: rgba(95, 7, 110, 0.9);
            color: rgba(255, 255, 255, 0.8);
            animation: hover 1s ease;
            text-shadow: #333 4px 4px 6px;
        }
        .portfolio-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            margin: 0 5vw 0 5vw;
            gap: 30px;
        }
        .game-design-portfolio-video {
            max-width: 40vw;
            border: 2px solid #333;
            border-radius: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .animation-work-video-caption {
            max-width: 40vw;
            text-align: center;
            padding: 20px;
            font-family: "Roboto", sans-serif;
        }
        #javascript-game-design-box {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            height: min-content;
        }
        #godot-game-engine-box {
            margin-top: -20%;
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            height: min-content;
        }
        #webdesign-small-business-portfolio-box {
            grid-column: 2 / 3;
            grid-row: 1 / 4;
            max-height: 270vh;
            overflow-y: scroll;
        }
        #illustration-graphic-design-box {
            grid-column: 1 / 3;
            grid-row: 3 / 6;
            margin-top: -18%;
            max-height: 120vh;
            overflow-y: scroll;
        }
        .illustration-shots {
            width: 35vw;
        }
        .multiple-images {
            text-align: center;
            width: 40vw;
            height: fit-content;
        }
        .webdesign-shots {
            width: 40vw;
        }
        .animated-gif {
            position: absolute;
            margin-top: -150px;
        }
        .blog-container {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(to bottom, rgba(202, 97, 17, 0.342), rgba(214, 75, 75, 0.438));
            color: white;
            margin: 1% 10% 10% 10%;
            border-radius: 10px;
            p::first-line {
                font-size: 1.5em;
            }
        }
        #engagement-article-1 {
            width: 40%;
        }
        #engagement-article-2 {
            float: right;
            margin: -180px 0 0 510px;
            padding-right: 50px;
        }
        #engagement-article-3 {
            margin-top: -60px;
        }
        .blog-post {
            margin: 3% 10% 0 3%;
            padding: 30px 10px;
        }
        #heart-blog-title {
            margin-left: 5px;
            margin-bottom: -50px;
            width: 30vw;
        }
        #heart-image {
            float: right;
            margin-top: -650px;
            margin-right: 5%;
        }
        #small-heart-image {
            visibility: hidden;
            width: 0;
        }
        #small-heart-caption {
            visibility: hidden;
        }
        #heart-caption {
            float: right;
            margin: -210px 100px 0 0;
            font-size: .7em;
            color: rgb(5, 5, 5);
        }
        .about-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 5vw;
        }
        .about-box {
            color: #0e7a1c;
            padding: 20px;
            background-color: rgba(46, 157, 70, 0.491);
            border: 1px solid rgba(245, 250, 167, 0.47);
            transition: background-color 0.3s ease;
            animation: bounceIn 1.5s ease;
            opacity: 0;
            animation-fill-mode: forwards;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
            width: 30vw;
            height: min-content;
            overflow-y: auto;
        }
        .about-picture {
            margin-left: 0;
        }
        @media (max-width: 1100px) and (orientation: portrait) {
            .header {
                max-height: 20vh;
                font-size: 2.7em;
            }
            ul {
                gap: 5%;
            }
            .mobile-game-design-images {
                width: 75vw;
                height: auto;
            }   
            #mobile-game-design-box {
                width: min-content;
                flex-basis: 100%;
                flex-direction: row;
                font-size: 2em;
                font-weight: bold;
                color: #333;
                
            }
            #digital-design-intro-box {
                p::first-line {
                    font-size: 2.3em;
                    text-align: center;
                }
                flex-basis: 100%;
                font-size: 2em;
            }
            #digital-marketing-videos-box {
                width: 80vw;
                margin-bottom: 50px;
            }
            #tiktok-marketing {
                width: 80vw;
                font-size: 2.5em;
                padding: 10px 0vh 10px 0vh;
                margin-bottom: 0;
            }
            #tiktok-marketing-caption {
                width: 80vw;
                font-size: 1.5em;
                padding: 10px 0vh 10px 0vh;
                margin-top: 0;
                position: absolute;
            }
            .yoga-advertising-video {
                width: 80vw;
                margin: 0 auto;
                position: relative;
            }
            #heart-blog-title {
                font-size: 1em;
                margin: 10px;
            }
            #engagement-article-1 {
                width: auto;
            }
            #engagement-article-2 {
                float: none;
                margin: 0% 10% 0 3%;
                padding: 0px 10px 20px 10px;
                margin-top: -44px;
            }
            #heart-image {
                visibility: hidden;
            }
            #heart-caption {
                visibility: hidden;
            }
            #small-heart-image {
                visibility: visible;
                width: 50vw;
                min-width: 300px;
            }
            #small-heart-caption {
                visibility: visible;
            }
            .intro-btn {
                visibility: hidden;
            }
            .about-box {
                max-height: 50vh;
                width: 90vw;
                font-size: 1.5em;
                p::first-line {
                    font-size: 1.7em;
                    color: #333;
                }
            }
            .about-picture {
                height: auto;
                margin-left: 0vw;
            }
            #engagement-article-1 {
                width: auto;
            }
            #engagement-article-2 {
                float: none;
                margin: 0% 10% 0 3%;
                padding: 0px 10px 20px 10px;
                margin-top: -44px;
            }
            .about-container {
                flex-direction: column;
            }
            .portfolio-container {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column-reverse;
                justify-content: space-between;
            }
            #javascript-game-design-box {
                height: min-content;
                width: 90vw;
            }
            #godot-game-engine-box {
                margin-top: 0px; /*because with grid i had to adjust margin for fullsize*/
                width: 90vw;
                height: min-content;
            }
            #illustration-graphic-design-box {
                margin-top: 20px;
                width: 80vw;
            }
            #webdesign-small-business-portfolio-box {
                width: 80vw;
            }
            .multiple-images {
                text-align: center;
                width: 80vw;
                height: 50vh;
                overflow: scroll;
            }
            .game-design-portfolio-video {
                max-width: 80vw;
            }
            .animation-work-video-caption {
                max-width: 80vw;
            }
            .webdesign-shots {
                width: 80vw;
                height: auto;
                margin: 5px;
            }
            .illustration-shots {
                width: 80vw;
                height: auto;
            }
            #contact-box {
                height: fit-content;
                width: 90vw;
                font-size: 2.5em;
                    p::first-line {
                        font-size: 1.7em;
                        color: #333;
                    }
            }
        }

        @media (max-width: 1050px) and (orientation: landscape) {
            #tiktok-marketing-caption {
                font-size: 1.5em;
                padding: 10px 1vh 10px 1vh;
                margin-top: -40%;
                margin-left: 300px;
                width: 40vw;
                position: absolute;
            }
        }

        @media (max-width: 1100px) and (orientation: landscape) {
            .intro-btn {
                visibility: hidden;
            }
            #digital-design-intro-box {
                p::first-line {
                    font-size: 1em;
                }
            }
            #digital-marketing-videos-box {
                margin-top: 15%;
            }
            .yoga-advertising-video {
                margin: 0 auto;
                position: relative;
            }
            #small-heart-image {
                visibility: visible;
                width: 30vw;
                min-width: 300px;
                margin-top: 50px
            }
            #small-heart-caption {
                visibility: visible;
            }
            #heart-image {
                visibility: hidden;
            }
            #heart-caption {
                visibility: hidden;
            }
            #engagement-article-1 {
                width: auto;
            }
            #engagement-article-2 {
                float: none;
                margin: 0% 10% 0 3%;
                padding: 0px 10px 20px 10px;
                margin-top: -44px;
            }
        }
        @media (min-width: 1100px) and (max-width: 1175px) {
            #digital-marketing-videos-box {
                margin-bottom: 200%;
            }
            .intro-btn {
                visibility: hidden;
            }
        }
        @media (min-width: 768px) and (min-height: 1024px) and (orientation: portrait) {
            #contact-box {
                height: auto;
                overflow-y: scroll;
            }
        }