:root{
    --color1: #ffbb00;
    --color2: rgb(250, 250, 250);
    --color3: rgb(244, 244, 244);
    --color4: rgb(31 41 55);
    --color5: rgba(31, 41, 55, 0.068);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Abel', sans-serif;
    color: var(--color4);
}

.bg-1{
    background-color: var(--color1);
}

.bg-1-5{
    background-color: var(--color4);
}

.text-1{
    color: var(--color1);
}

.text-4{
    color: var(--color4);
}

.bg-2{
    background-color: var(--color2);
}

.bg-3{
    background-color: var(--color3);
}

.bg-4{
    background-color: var(--color4);
}

.bg-1-opac{
    background-color: #ffbb002b;
}

.bg-4-opac{
    background-color: var(--color5);
}

.bg-2-opac{
    background-color: rgba(250, 250, 250, 0.908);
}

.bg-1-gradient{
    background: linear-gradient(177deg, var(--color1) 80%, var(--color2) 20%);
}

.bg-4-gradient{
    background: linear-gradient(177deg, var(--color4) 80%, var(--color2) 20%);
}

.bg-4-opac-gradient{
    background: linear-gradient(177deg, var(--color5) 80%, var(--color2) 20%);
}

.bg-2-gradient{
    background: linear-gradient(177deg, var(--color2) 80%, var(--color3) 20%);
}

.bg-3-gradient{
    background: linear-gradient(177deg, var(--color3) 80%, var(--color2) 20%);
}

.bg-1-gradient-d{
    background: linear-gradient(3deg, var(--color1) 80%, var(--color2) 20%);
}

.filter-1{
    filter: invert(78%) sepia(90%) saturate(3590%) hue-rotate(339deg) brightness(100%) contrast(102%);
}

.filter-white{
    filter: invert(100%);
}

.filter-gray{
    filter: grayscale(100%);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.background-pattern {
    position: relative; /* Ensure the div is relatively positioned */
}

.background-pattern::before {
    content: ""; /* Required for the pseudo-element */
    position: absolute; /* Position the pseudo-element relative to the div */
    top: 0;
    left: 0;
    width: 100%; /* Cover the entire div */
    height: 100%;
    /* background-image: url('C:/Users/simon/Documents/Werk/Dura Code/Website/developing/static/images/bkg/endless-constellation.png'); Replace 'path/to/your/image.jpg' with the actual path to your image */
    /* background-size: cover; Adjust the background size to cover the entire div */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='348' height='348' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23fff3e4' points='1600 160 0 460 0 350 1600 50'/%3E%3Cpolygon fill='%23ffe6c6' points='1600 260 0 560 0 450 1600 150'/%3E%3Cpolygon fill='%23ffd9a1' points='1600 360 0 660 0 550 1600 250'/%3E%3Cpolygon fill='%23ffca72' points='1600 460 0 760 0 650 1600 350'/%3E%3Cpolygon fill='%23FFBB00' points='1600 800 0 800 0 750 1600 450'/%3E%3C/g%3E%3C/svg%3E"); */
    background-attachment: fixed;
    /* background-size: cover; */
    opacity: 0.15;
    z-index: -1; /* Place the pseudo-element behind the content */
}