::-webkit-scrollbar-track {
    background: rgb(25, 25, 25);
}

body
{
    background: rgb(25, 25, 25);
}

p, h1, h2, h3, h4, h5, h6, button
{
    color: white;
}
a
{
    color:rgb(55, 155, 255)
}

small
{
    color: rgb(155, 155, 155);
}
small a
{
    color:rgb(0, 155, 195);
}



button
{
    border: 2px solid rgb(190, 190, 190);
    background-color: rgb(60, 60, 60);
}
button:hover
{
    background-color: rgb(80, 80, 90);
}
button:active
{
    box-shadow: 0px 0px black;
}

vr
{
    background-color: rgb(180, 180, 190);
}
hr
{
    background-color: rgb(100, 100, 100);
}

.messageBox
{
    background-color: rgb(55, 55, 55);
}
.messageBox-Title
{
    background-color: rgb(65, 65, 65);
}

.navbar, footer
{
    background-color: rgb(30, 30, 30);
    box-shadow: 5px 5px 20px 5px rgb(0, 0, 0); /* Excluded from footer (overwritten with 0 0 0 0 in global.css) */
}
@media (min-width: 800px) {
    .navbar:hover
    {
        box-shadow: 5px 5px 40px 5px rgb(0, 0, 0);
        outline: 1px solid rgba(255, 255, 255, 0.2);
    }
}

.navBtn
{
    background-image: linear-gradient(
        to bottom,
        rgba(65, 65, 65, 1),
        rgba(50, 50, 50, 1));
}

.blocksaffinityTitle-BlinkingCursor
{
    background-color: white;
}

.sidebar
{
    background: linear-gradient(
        300deg,
        rgb(20, 20, 20),
        rgb(60, 60, 60));
}
.sidebarIn
{
    box-shadow: 0px 0px 50px 5px rgb(0, 0, 0);
}

.sideBtn
{
    background-image: linear-gradient(
        to right,
        rgba(85, 85, 85, 1),
        rgba(50, 50, 50, 1));
    background-color: transparent;
}
.sideBtn:hover
{
    background-color: transparent;
}
.sideBtn:active
{
    background-image: linear-gradient(
        to right,
        rgba(65, 65, 65, 1),
        rgba(60, 60, 60, 1));
}


/* blocksaffinity text on home page */
.gradient-Text {
    background-size: 300% 300%;
    background-image: linear-gradient(
        25deg,
        rgb(255, 17, 17),
        rgb(249, 82, 255),
        rgb(82, 143, 255),
        rgb(82, 255, 97)
    );
    color: transparent;
    background-clip: text;
    animation: AnimateGradient 15s ease infinite;
}
@keyframes AnimateGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.home-section-divider
{
    background-color: rgb(40, 40, 40);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.welcomeBox, .Box
{
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* background-color: rgba(255, 255, 255, 0.05); */
    background-color: rgb(37, 37, 37);
}
.welcomeBox:hover
{
    background-color: rgb(39, 39, 39);
}
.InnerBox
{
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-color: rgb(37, 37, 37);
}
/* 
[5/8/2025]
Later decided that this transparent and then opaque background on hover isn't a good idea.
Background is now permanently transparent. Blur is stil present.
.welcomeBox:hover, .Box:hover
{
    /* 12.75 because 255 * 0.05 = 12.75
    and i did that because rgbvalue * brightness to do some opacity thing 
    i dont know how to explain but its not random i dont think
    just needed to convert the 
    
    wait nvm i just spent all that time explaining and its not even right silly me
    
    just did the lazy colour picker way and is unnoticable */
    /*
    background-color: rgb(37, 37, 37);
} */

.FeatProj-callToAction
{
    background-color: rgba(255, 255, 255, 0.05);
}
.mainFeatProj
{
    box-shadow: #3c39ef 0px 0px 5px 5px;
}
@media (min-width: 650px) /* normal width */
{
    .mainFeatProj:hover
    {
        box-shadow: #3c39ef 0px 0px 15px 8px;
    }
} 
.AlvaroTrigoShadowGradient-PleiadesMC:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, #ff4dde 0%, #0008ff 100% );
    background-size: 300% 30%;
    transform: translate3d(0px, 0px, 0) scale(1.10);
    filter: blur(50px);
    opacity: var(1);
    transition: opacity 0.3s;
    border-radius: inherit;
    animation: AnimateGradient 10s ease infinite;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property)
*/
.AlvaroTrigoShadowGradient-PleiadesMC::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.plmc-gradient-text
{
    background-image: linear-gradient(
        to right,
        #3c39ef,
        #527aff
    );
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.isdt-gradient-text
{
    background-size: 500% 500%;
    background-image: linear-gradient(
        to right,
        #ffffff,
        #b6b6b6
    );
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: AnimateGradient 5s ease infinite;
}

/* This class is to be used EXCLUSIVELY for BLACK images with TRANSPARENT BACKGROUNDS */
/* When the fill colour is BLACK, the inverse makes it white. This is intended behaviour. */
/* In styles which are dark, this class should be added and the inverse should be set to 80% */
/* In styles which are light, 20% */
.img-theme
{
    filter: invert(80%);
}

footer
{
    background-color: rgb(45, 45, 45);
}


/* *************************** */
/* *** PAGE SPECIFIC STYLES ** */
/* *************************** */