/* ===== Diagonal Waves Background ===== */
/* ===== By 8bitCAP - still need to fix part of it ===== */

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
}

body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 160vw;
    height: 160vh;
    pointer-events: none;
    z-index: -1;
}

body::before {
    background: #102e3a;

    content:'';
    position: fixed;
    inset: 0;
    z-index: -99;
    pointer-events: none;

    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 3px, transparent 4px);
    background-size: 30px 30px; 
    background-position: 0 0;
    background-repeat: repeat;
}

/* Waves SVG as data URI */
body::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700'><defs><path id='wave' d='M0,250 C83,190 167,190 250,250 C333,310 417,310 500,250 C583,190 667,190 750,250 C833,310 917,310 1000,250'/></defs><g transform='rotate(20 500 350) translate(-260, 90)'><use href='%23wave' fill='none' stroke='%231faa9f' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(0, 40)'/><use href='%23wave' fill='none' stroke='%231da2a4' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-8, 80)'/><use href='%23wave' fill='none' stroke='%231a9aa9' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-16, 120)'/><use href='%23wave' fill='none' stroke='%231892ae' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-24, 160)'/><use href='%23wave' fill='none' stroke='%23158ab3' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-32, 200)'/><use href='%23wave' fill='none' stroke='%231383b8' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-40, 240)'/><use href='%23wave' fill='none' stroke='%23117bbc' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-48, 280)'/><use href='%23wave' fill='none' stroke='%230e73c1' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-56, 320)'/><use href='%23wave' fill='none' stroke='%230c6bc6' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-64, 360)'/><use href='%23wave' fill='none' stroke='%230963cb' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-72, 400)'/><use href='%23wave' fill='none' stroke='%23075bd0' stroke-width='81' stroke-linecap='round' stroke-linejoin='round' transform='translate(-80, 440)'/></g></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: -60px top;
}