*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body{
            background:#000;
            color:white;
            font-family:Arial, Helvetica, sans-serif;
        }

        .manufacturing-consent-regular{
            font-family:"Manufacturing Consent", system-ui;
        }

        .nav{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:80px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 30px;
            background:rgba(12,12,12,.9);
            backdrop-filter:blur(10px);
            z-index:100;
        }

        #profile_icon{
            width:55px;
            height:55px;
            border-radius:50%;
            object-fit:cover;
        }

        .button_container {
            display: flex;
            flex-direction: column;
            gap: 30px;
            align-items: flex-start;
        }

        .button {
            text-decoration: none;
            color: white;
            padding: 12px 30px;
            border-radius: 12px;
            background: #220d0d;
            transition: .25s;
        }

        .button:hover{
            background:#440f0f;
            transform:translateY(-2px);
        }

        .panel{

            min-height:100vh;
            display:flex;
            flex-direction:column;
            align-items:center;
            padding-top:120px;
            padding-left:20px;
            padding-right:20px;
        }

        .intro{
            text-align:center;
            margin-bottom:40px;
        }

        .intro h1{
            font-size:clamp(2rem,5vw,4rem);
        }

        .text_window{
            width:min(900px,100%);
            background:#300000;
            border-radius:20px;
            padding:30px;
            font-size:clamp(1rem,2vw,1.3rem);
            line-height:1.7;
            box-shadow:0 0 25px rgba(255,0,0,.12);
        }

        .hamburger{
            display:none;
            background:#220d0d;
            color:white;
            border:none;
            font-size:30px;
            padding:5px 12px;
            border-radius:12px;
        }

        .hamburger:hover{
            transform:scale(1.1);
        }

        .nav_links {
            transition:.3s;
            display:flex;
            gap: 15px;
        }

        @media(max-width:700px){

            .hamburger{
                display:block;
            }


            .nav_links{
                position:absolute;
                top:80px;
                left:0;
                width:100%;
                display:flex;
                flex-direction:column;
                align-items:center;
                gap:20px;
                padding:20px;
                background:#0c0c0c;
                border-radius:0 0 20px 20px;
                opacity:0;
                transform:translateY(-20px);
                pointer-events:none;
                visibility:hidden;
                transition:
                    opacity .3s ease,
                    transform .3s ease,
                    visibility .3s;
            }


            .nav_links.active{

                opacity:1;
                transform:translateY(0);

                pointer-events:auto;
                visibility:visible;

            }

        }

        html {
            scroll-behavior: smooth;
        }

        .section_name {
            background: #270000;
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 24px;
            width: fit-content;
            margin: 0 auto;
            text-align: center;
        }

        section {
            min-height: 100vh;

            display: flex;
            justify-content: center;
            align-items: flex-start;

            padding: 100px 20px;

            scroll-margin-top: 60px;
        }

        .nav_button {
            color: white;
            padding: 10px 22px;
            border-radius:20px;
            background: #220d0d;
            font-size: 18px;
            transition: 0.3s;
        }
        .nav_button:hover {
            background: #5e0000;
            box-shadow: 0 0 20px #5e0000;
            transform: translateY(-3px);
        }

        #projects-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 20px;
        }

        .project-card {
            cursor: pointer;
            display: block;
            width: 100%;
            box-sizing: border-box;
            background: #270000;
            color: white;
            padding: 20px;
            border-radius: 20px;
            text-decoration: none;
        }

        .project-card:hover {
            transform: translateY(-5px);
            transition: 0.25s;
        }


        .project-card h2 {
            margin-top: 0;
        }

        .project-card a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }