:root {
    --themeColorHue: 270;
    --infectionRed: hsla(0, 100%, 80%, 1);
}

/* all color transitions take 0.2 seconds */


body {
    background: black;
    
}

#main-inner-box {
    border: 1px solid hsl(0,0%,2%); 
    background: var(--generalBackground); 
    position: relative;
    overflow: hidden;
}

#dots-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* background: red; */
}

#dots-background-gradient {
    background: linear-gradient(75deg, var(--generalBackground) 0%, var(--generalBackground) 50%, var(--generalBackground) 70%,  hsla(0,0%,4%,0.6) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

#dots-background-graph-holder {
    /* background: url('https://images.pexels.com/photos/1429395/pexels-photo-1429395.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); */
    /* background-size: cover; */
    /* background-position: 170% 50%; */
    width: 100%;
    height: 100%;
    
}

main {
    z-index: 1;
    position: relative;
}



.interface-button {
    background-color: hsla(0,0%,10%, 1);
    color: hsla(0,0%,80%, 1);
}

.interface-button-icon {
    color: hsla(var(--themeColorHue), 100%, 70%, 1)
}

.interface-button:hover {
    background-color: hsla(0,0%,0%, 1);
}


.sub-addition-button:hover {
    color: hsla(var(--themeColorHue),100%,70%, 1);
}

#sub-addition-button-plus {
    transition: transform 0.2s ease-in-out;
}

.parameter-display-text {
    color: hsla(var(--themeColorHue),100%,80%, 1);
    font-size: x-large;
}

#node-property-menu {
    min-height: 30vh; min-width: 300px; border-radius: 10px; backdrop-filter: blur(6px); border: 2px solid hsla(var(--themeColorHue), 40%, 70%, 0.1); max-height: 70vh; position: absolute; background-color: hsla(0, 0%, 0%, 0.6);
}

#edge-property-menu {
    min-height: 30vh; min-width: 300px; border-radius: 10px; backdrop-filter: blur(6px); border: 2px solid hsla(var(--themeColorHue), 40%, 70%, 0.1); max-height: 70vh; position: absolute; background-color: hsla(0, 0%, 0%, 0.6);
}

#main-graph-holder:focus {
    outline: none;
}

.select-dropdowns {
    background: var(--generalBackground);
    color: white;
}

.blurryBack {
    backdrop-filter: blur(10px);
    background-color: hsla(0,0%,6%, 0.2);
}


.moving-gradient-text {
    background: linear-gradient(90deg, hsla(260, 100%, 80%, 1), hsla(340, 100%, 80%, 1), hsla(260, 100%, 80%, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 2s ease infinite;
  }
  
  @keyframes gradient-animation {
    0% {
      background-position: 0px 50%;
    }
    50% {
      background-position: 100px 50%;
    }
    100% {
      background-position: 0px 50%;
    }
  }
  


@media (max-width: 400px) {
    #dots-background-gradient {
        background: linear-gradient(75deg, hsla(0,0%,4%,1) 0%, hsla(0,0%,4%,1) 50%, hsla(0,0%,4%,0.9) 90%,  hsla(0,0%,4%,0.6) 100%);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --generalBackground: hsla(0, 0%, 6%, 1);
    }

    body {
        color: lavender;
    }

    /* :root {
        --infectionRed: hsla(0, 80%, 40%, 1);
    }


    body {
        background: hsla(0,0%,79%,1);
        color: hsla(0,0%,0%,1);
    }

    #main-inner-box {
        border: 1px solid hsl(0,0%,98%); 
        background: var(--generalBackground); 
    }
    
    #dots-background-gradient {
        background: linear-gradient(75deg, hsla(0,0%,100%,1) 0%, hsla(0,0%,100%,0.9) 50%, hsla(0,0%,100%,0.9) 70%,  hsla(0,0%,100%,0.6) 100%);
    }

            
    .interface-button {
        background-color: hsla(0,0%,80%, 1);
        color: black;
    }

    .interface-button:hover {
        background-color: hsla(0,0%,20%, 1);
        color: white;
    }

    .interface-button-icon {
        color: hsla(var(--themeColorHue), 100%, 70%, 1)
    }

    #node-property-menu {
        border: 2px solid hsla(var(--themeColorHue), 40%, 70%, 0.1); background-color: hsla(0, 0%, 78%, 0.6);
    }

    .blurryBack {
        background-color: hsla(0,0%,98%, 0.2);
    } */


            
}