Add green color scheme

    font-family: "Roboto", sans-serif;

    background-color: #387bd0;

    background-image: url("/lib/nautilus/nautilus.svg");

    background-size: cover;

}

body.blue {

    background-color: #387bd0;

    background-image: url("/lib/nautilus/nautilus_blue.svg");

}

body.green {

    background-color: #2aac6d;

    background-image: url("/lib/nautilus/nautilus_green.svg");

}

main {

    display: grid;

    margin: 4em 0;

    row-gap: 1em;

    text-decoration: none;

}

.blue a.btn {

    color: #144a8b;

}

.green a.btn {

    color: #135a3a;

}

a.btn > i {

    font-size: 200%;

}

    <link rel="stylesheet" href="./css/main.css" />

</head>

<body>

<body class="blue">

    <main>

        <div class="tool">

            <a class="box btn" target="_blank" href="https://fachschaft.cl.uni-heidelberg.de/meet"><i class="fa-solid fa-phone-volume"></i> Meeting</a>

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="1920" height="921" viewBox="0 0 1920 921"><rect width="1920" height="921" fill="#191919"/><g data-index="0" transform="translate(960 460.5) scale(4.1) translate(-960 -460.5)"><defs><linearGradient id="vortex-0-0" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-1" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-2" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-3" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-4" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-5" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-6" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-7" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-8" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-9" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-10" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-11" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-12" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-13" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#8ff0a4" stop-opacity="0.17"/><stop offset="0.71" stop-color="#33d17a" stop-opacity="0.5"/><stop offset="1" stop-color="#26a269" stop-opacity="1"/></linearGradient></defs><g transform="translate(86 -12) rotate(0 960 460.5)" class="group"><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-13)" fill-opacity="1.0714285714285714" stroke="rgba(42, 176, 110, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-4.602574645536244 0.005105362887779408) rotate(-178.6079819614984) scale(10.699320537907195)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-12)" fill-opacity="1.1428571428571428" stroke="rgba(45, 187, 114, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-4.248530442033456 0.00471264266564253) rotate(-164.86890642599855) scale(8.916100448255996)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-11)" fill-opacity="1.2142857142857144" stroke="rgba(48, 198, 118, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-3.8944862385306678 0.004319922443505653) rotate(-151.12983089049868) scale(7.430083706879997)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-10)" fill-opacity="1.2857142857142856" stroke="rgba(51, 209, 122, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-3.54044203502788 0.003927202221368775) rotate(-137.3907553549988) scale(6.191736422399997)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-9)" fill-opacity="1.3571428571428572" stroke="rgba(62, 213, 127, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-3.186397831525092 0.0035344819992318977) rotate(-123.65167981949891) scale(5.1597803519999985)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-8)" fill-opacity="1.4285714285714286" stroke="rgba(73, 217, 132, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-2.832353628022304 0.00314176177709502) rotate(-109.91260428399903) scale(4.2998169599999985)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-7)" fill-opacity="1.5" stroke="rgba(84, 220, 137, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-2.478309424519516 0.0027490415549581426) rotate(-96.17352874849915) scale(3.583180799999999)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-6)" fill-opacity="1.5714285714285714" stroke="rgba(97, 224, 143, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-2.124265221016728 0.002356321332821265) rotate(-82.43445321299927) scale(2.9859839999999993)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-5)" fill-opacity="1.6428571428571428" stroke="rgba(108, 228, 148, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-1.77022101751394 0.0019636011106843876) rotate(-68.6953776774994) scale(2.4883199999999994)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-4)" fill-opacity="1.7142857142857144" stroke="rgba(119, 232, 153, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-1.416176814011152 0.00157088088854751) rotate(-54.956302141999515) scale(2.0736)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-3)" fill-opacity="1.7857142857142856" stroke="rgba(130, 236, 158, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-1.062132610508364 0.0011781606664106326) rotate(-41.217226606499636) scale(1.728)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-2)" fill-opacity="1.8571428571428572" stroke="rgba(141, 239, 163, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-0.708088407005576 0.000785440444273755) rotate(-27.478151070999758) scale(1.44)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-1)" fill-opacity="1.9285714285714286" stroke="rgba(143, 240, 164, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(-0.354044203502788 0.0003927202221368775) rotate(-13.739075535499879) scale(1.2)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-0)" fill-opacity="2" stroke="rgba(143, 240, 164, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(0) scale(1)" transform-origin="1010 510.5"/></g></g></svg>

 No newline at end of file