@font-face {
            font-family: 'Abduction Regular';
            /* Path to your local files */
            src: url('/assets/Abduction_Regular.woff2') format('woff2'),
                url('/assets/Abduction_Regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap; /* Helps with loading speed */
            }
            @font-face {
            font-family: 'Vremena Grotesk Book';
            /* Path to your local files */
            src: url('/assets/VremenaGroteskBook.woff2') format('woff2'),
                url('/assets/VremenaGroteskBook.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap; /* Helps with loading speed */
            }
            @font-face {
            font-family: 'Vremena Grotesk Bold';
            /* Path to your local files */
            src: url('/assets/VremenaGroteskBold.woff2') format('woff2'),
                url('/assets/VremenaGroteskBold.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap; /* Helps with loading speed */
            }

            /* How to apply it to your text */
            * {
                
                color: white;
                box-sizing: border-box;
            }
            body {
            font-family: 'Abduction Regular', sans-serif;
            background-color: black;
            }
            /* The main wrapper */
            .specimen {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            background: #000;
            padding: 50px;
            font-family: 'YourFontName', sans-serif;
            color: #fff;
            font-size: 62px;
            }

            .char {
            position: relative;
            display: inline-block;
            cursor: pointer;
            transition: opacity 0.2s;
            }

            /* Dim other letters when hovering one (optional "focus" effect) */
            .specimen:hover .char:not(:hover) {
            opacity: 0.3;
            }

            /* The Zoom Box (Locked in place) */
            .zoom-box {
            /* Positioning */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5); /* Start small */
            
            /* Styling */
            width: 180px;
            height: 180px;
            border: 2px solid #fff;
            background: #000;
            color: #fff;
            
            /* Content Alignment */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 85px; /* The "Zoomed" size */
            
            /* Animation & Visibility */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.15s ease-out;
            z-index: 100;
            }

            /* The "Snap" Effect on Hover */
            .char:hover .zoom-box {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
            }

            .specimen-container{
                font-size: 62px;
                letter-spacing: 18%;
                width: 100%;
                text-align: center;
            }
            .live-text p{
                display: block;
                width: 100%;
                margin-top:0;
            }
            .live-text{
                display: flex;
                flex-direction: column;
            }
            section {
                width: 1280px;
                margin-left: auto;
                margin-right: auto;
            }
            #header{
                margin-top: 40px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            .button{
                border: solid 1px white;
                padding: 20px;
                font-family: Vremena Grotesk Book;
                text-decoration: none !important;
            }
            .paragraph{
                font-size: 18px;
                font-family: Vremena Grotesk Book, sans-serif;
                letter-spacing: 6%;
                width: 80%;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                line-height: 100%;
            }
            .paragraph span{
                font-size: 18px;
                font-family: Vremena Grotesk Bold, sans-serif;
            }
            .categories{
                display: flex;
                width: 90%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                margin-left: auto;
                margin-right: auto;
            }
            .categories span{
                font-size: 70px;
            }
            .categories span:last-of-type{
                font-size: 18px;
                font-family: Vremena Grotesk Bold, sans-serif;
                position: relative;
                right: 0px;
            }
            #headline{
                margin-top: 140px;
                margin-bottom: 30px;
                border: 1px solid #D9D9D9;
                font-size: 180px;
                letter-spacing: 36%;
                text-align: center;

                padding: 40px 20px 20px 20px;
            }
            .download{
                margin-top: 110px;

                display: flex;
                margin-left: auto;
                margin-right: auto;

                flex-direction: row;
                width: 45%;
                margin-bottom: 140px;
            }
             .download div{
                width: 100%;
                margin-top: 1px; 
            }

            .download > span{
                text-align: left;
            }
            .download .button{
                display: flex;
                text-align: center;
                justify-content: center;
                padding: 10px 30px 10px 30px;
                width: 100%;
            }
            .download > .paragraph{
                width: 60%;
            }
            .download div .paragraph, .download > div .paragraph span{
                font-size: 14px !important;

            }
            .desc.paragraph{
                margin-bottom: 140px;
            }
            .images .download{
                margin-top: 0px;
            }
            .images{
                margin-top: 140px; 
                display: flex;
                row-gap: 80px;
                flex-direction: column;
                margin-bottom: 140px;
            }
            .download.support .paragraph{
                width: 140%;
            }
            .download.support .button{
                width: 100%;
                padding: 20px;
            }
            .footer .paragraph{
                margin-top: 80px;;
            }
            .footer{
                display: flex;
                flex-direction: column;
                font-size: 140px;
                text-align: center;
            }
            #font_test {
                font-family: 'Abduction Regular', sans-serif;
                margin-top: 140px;
                margin-bottom: 30px;
                border: 1px solid #D9D9D9;
                font-size: 180px;
                letter-spacing: 36%;
                text-align: center;
                width: 100%;
                padding: 40px 20px 20px 20px;
                background-color: black;

            }
                        #showcase span{
                font-size: 90px;
                margin-top: -40px;
            }
            .download.single{
                width: 80%; 
                display: flex;
                align-items: center;
            }
            .download.single span.paragraph{
                padding-right: 80px;
            }

            .download.single .button{
                width: 60%; 
                margin-bottom: 10px;
            }
            #showcase{
                margin-top: 120px;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 180px;
                letter-spacing: 1%;
                text-decoration: none;
            }
            #showcase a{
                    text-decoration: none;
                }
            .alt.button{
                font-size: 18px;
                letter-spacing: 6%;
                padding: 0;
                border: none;
                text-transform: uppercase;
                text-decoration: underline !important; 
            }
            .zigzag {
            --a: 90deg; /* control the angle */
            --s: 40px; /* size of the zig-zag */
            --b: 2px;  /* control the thickness */
            
            background: #fff;
            height: calc(var(--b) + var(--s)/(2*tan(var(--a)/2)));
            width: 100%;
            --_g:var(--s) repeat-x conic-gradient(from calc(var(--a)/-2) at bottom,
                #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a));
            mask: 50% calc(-1*var(--b))/var(--_g) exclude,50%/var(--_g);


            margin-bottom: 80px;;
            }
            .support-box{
                margin-top: 80px;
                display: flex;
                flex-direction: column;;
                justify-content: center;
                align-items: center;
                gap: 40px;
            }

            @media (max-width: 1280px){
                section{
                    width: 1024px;
                }
                .nmf-logo{
                    width: 60%;
                }
                #header a{
                    width: auto ;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .download{
                    width: 60%;
                }
            }


            @media (max-width: 1024px){
                section{
                    width: 768px;
                }
                .nmf-logo{
                    width: 80%;
                }
                #header a{
                    width: auto ;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .download{
                    width: 100%;
                }
                .categories{
                    width: 100%;

                }
                .categories span{
                    font-size: 32px;
                }
                #font_test{
                    font-size: 110px;
                }
                .paragraph{
                    width: 100%;
                }
            }

            @media (max-width: 768px){
                section{
                    max-width: 380px;
                    padding-left: 10px;
                    padding-right: 10px;
                }
                #header{
                margin-top: 40px;
                display: flex;
                flex-direction: column;
                gap: 20px;
                }
                .nmf-logo{
                    width: 100%;
                }
                #font_test{
                    margin-top: 60px;
                    font-size: 54px;
                }
                .categories span{
                    font-size: 21px;
                    margin-right: 10px;
                }
                .categories{
                    flex-direction: row;
                    flex-wrap: wrap; 
                }
                .paragraph{
                    font-size: 16px;
                }
                .download{
                    flex-direction: column;
                }
                .download > .paragraph{
                    width: 100%;
                    text-align: center;
                    margin-bottom: 10px;
                }
                .download div{
                    margin-top: 10px;
                    text-align: center;
                }
                .images img{
                    height: 330px;
                    object-fit: cover;
                }
                .download.support .paragraph{
                    width: 100%;
                }
                .footer{
                    font-size: 80px;
                }

                
                #showcase{
                    font-size: 100px;;
                    text-decoration: none;
                }
                #showcase span{
                    font-size: 70px;;
                }
                .download.single{
                    width: 100%;
                }
                .download.single span.paragraph{
                    padding: 0;
                }
                .download.single .button{
                    width: 100%;
                }
                .alt.button{
                    margin-top: 20px;
                }
            }