@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    body {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2144%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(0%2c 0%2c 0%2c 1)'%3e%3c/rect%3e%3cpath d='M131.534%2c298.744C187.687%2c300.668%2c232.939%2c254.752%2c257.068%2c204.011C278.041%2c159.909%2c267.456%2c109.391%2c241.143%2c68.251C217.041%2c30.568%2c176.188%2c10.368%2c131.534%2c7.741C80.826%2c4.758%2c22.944%2c10.19%2c-2.947%2c53.892C-29.143%2c98.109%2c-4.678%2c150.845%2c20.063%2c195.892C46.149%2c243.387%2c77.379%2c296.889%2c131.534%2c298.744' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-57.6 -17.06 a40.54 40.54 0 1 0 81.08 0 a40.54 40.54 0 1 0 -81.08 0z' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M124.189%2c277.235C176.957%2c279.204%2c220.188%2c240.585%2c247.108%2c195.157C274.665%2c148.654%2c290.072%2c90.82%2c262.051%2c44.595C234.749%2c-0.444%2c176.686%2c-11.859%2c124.189%2c-7.623C79.182%2c-3.991%2c42.085%2c24.655%2c20.137%2c64.115C-1.134%2c102.358%2c-3.004%2c147.216%2c16.195%2c186.54C38.3%2c231.816%2c73.84%2c275.356%2c124.189%2c277.235' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1442.872%2c248.047C1488.215%2c246.429%2c1525.077%2c214.701%2c1546.585%2c174.751C1566.898%2c137.02%2c1567.089%2c92.608%2c1546.904%2c54.809C1525.392%2c14.526%2c1488.535%2c-20.083%2c1442.872%2c-19.462C1397.991%2c-18.852%2c1366.168%2c18.758%2c1343.626%2c57.572C1320.951%2c96.614%2c1304.633%2c142.599%2c1325.496%2c182.639C1347.679%2c225.212%2c1394.897%2c249.759%2c1442.872%2c248.047' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1265.93 -12.59 a49.48 49.48 0 1 0 98.96 0 a49.48 49.48 0 1 0 -98.96 0z' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1413.145%2c174.594C1450.355%2c175.133%2c1491.256%2c173.096%2c1512.186%2c142.326C1535.3%2c108.345%2c1534.228%2c62.691%2c1513.335%2c27.301C1492.771%2c-7.532%2c1453.594%2c-25.218%2c1413.145%2c-25.433C1372.281%2c-25.651%2c1331.354%2c-9.264%2c1311.091%2c26.224C1290.971%2c61.461%2c1295.962%2c106.094%2c1318.957%2c139.525C1339.306%2c169.109%2c1377.242%2c174.073%2c1413.145%2c174.594' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M84.905%2c644.873C122.387%2c643.155%2c148.926%2c613.184%2c168.319%2c581.064C188.628%2c547.427%2c208.655%2c506.826%2c188.684%2c472.988C168.895%2c439.458%2c123.824%2c438.655%2c84.905%2c439.728C48.494%2c440.732%2c10.516%2c447.961%2c-9.411%2c478.452C-31.1%2c511.639%2c-32.442%2c554.877%2c-12.894%2c589.369C6.914%2c624.321%2c44.772%2c646.712%2c84.905%2c644.873' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M90.066%2c650.214C128.969%2c649.561%2c163.6%2c625.389%2c181.296%2c590.738C197.557%2c558.899%2c190.161%2c521.537%2c171.292%2c491.171C153.573%2c462.656%2c123.571%2c446.034%2c90.066%2c443.918C51.806%2c441.502%2c9.661%2c447.431%2c-11.112%2c479.651C-33.246%2c513.98%2c-27.468%2c558.764%2c-6.629%2c593.894C13.768%2c628.278%2c50.093%2c650.885%2c90.066%2c650.214' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M86.558%2c623.964C120.541%2c622.853%2c156.007%2c613.914%2c173.195%2c584.578C190.536%2c554.981%2c183.751%2c518.035%2c165.72%2c488.853C148.667%2c461.253%2c118.929%2c446.527%2c86.558%2c444.36C49.101%2c441.853%2c7.392%2c445.587%2c-13.366%2c476.867C-35.838%2c510.729%2c-33.317%2c556.967%2c-10.481%2c590.584C10.121%2c620.911%2c49.915%2c625.162%2c86.558%2c623.964' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1461.548%2c752.266C1517.841%2c749.553%2c1558.12%2c702.246%2c1583.11%2c651.732C1605.048%2c607.387%2c1604.671%2c556.044%2c1579.774%2c513.29C1555.044%2c470.824%2c1510.672%2c441.654%2c1461.548%2c442.984C1414.404%2c444.26%2c1379.58%2c479.84%2c1353.914%2c519.405C1324.841%2c564.222%2c1295.427%2c616.026%2c1317.841%2c664.517C1343.081%2c719.122%2c1401.462%2c755.162%2c1461.548%2c752.266' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1343.98%2c511.274C1360.898%2c511.014%2c1376.276%2c502.159%2c1385.05%2c487.692C1394.182%2c472.635%2c1397.363%2c453.484%2c1388.116%2c438.497C1379.218%2c424.076%2c1360.922%2c420.805%2c1343.98%2c421.132C1327.745%2c421.445%2c1311.432%2c426.457%2c1302.695%2c440.144C1293.297%2c454.866%2c1291.891%2c473.884%2c1300.659%2c488.99C1309.395%2c504.042%2c1326.578%2c511.542%2c1343.98%2c511.274' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1413.6920243128338 375.38971303030115L1271.2199441585542 464.4161494214796 1360.2463805497327 606.8882295757592 1502.7184607040122 517.8617931845807z' fill='rgba(24%2c 255%2c 0%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2144'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        font-family: 'Poppins', sans-serif;
        color: rgb(255, 255, 255);
        margin: 0;
        overflow-x: hidden; 
    }

    main {
        width: 95%;
        max-width: 400px;
        margin: 60px auto;
    }

    section {
        width: 100%;
        background-color: rgba(61, 61, 61, 0.4);
        padding: 25px 20px;
        border-radius: 12px;
        margin-bottom: 30px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
    }

    section:hover {
        transform: translateY(-3px);
    }

    xmp {
        max-width: 100%;
        width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
        margin: 0;
        padding: 15px;
        display: block;
        background-color: rgba(0, 0, 0, 0.85);
        color: #0f0;
        border-radius: 8px;
        border: 1px solid #0f0;
        box-shadow: 0 4px 20px rgba(0, 255, 0, 0.2);
        font-size: 0.95rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    xmp:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 30px rgba(0, 255, 0, 0.4);
    }

    h1 {
        font-weight: 600;
        text-shadow: 1px 1px 4px rgb(0, 255, 0);
    }

    h1 {
        font-size: 2.2rem;
        text-align: center;
        margin-bottom: 0.5em;
        color: rgb(104, 185, 49);
    }

    h2 {
        font-size: 1.4rem;
        margin-bottom: 0.3em;
        color: rgb(104, 185, 49);
    }

    p {
        line-height: 1.6;
        color: #d4ffd4;
    }

    .btn-home {
        position: fixed;
        top: 15px;
        left: 15px;
        border: 2px solid white;
        border-radius: 50%;
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .6;
        transition: all 0.4s ease-in;
        box-shadow: 1px 1px 4px rgb(0, 255, 0);
    }

    .btn-home:hover {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 6px 30px rgba(0, 255, 0, 0.4);
    }

    img[src$="emmet.svg"] {
        display: block;
        margin: 0 auto;
        transition: transform 0.6s ease, filter 0.6s ease;
}

    img[src$="emmet.svg"]:hover {
        transform: rotate(10deg) scale(1.05);
        filter: drop-shadow(0 0 15px #0f0);
    }