*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: linear-gradient(45deg, rgb(48, 6, 33) 10%, rgba(0,0,0,1) 53%);    
    height: 100vh;
}


#nav-bar{
    position: fixed;
    top: 92vh;
    left: 83vw;


    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: fit-content;

    z-index: 0;
}

h3{
    color: white;
    margin-right: 10px;
}


#main-grid-container{
    background-color: white;

    height: 800px;
    width: 800px;



    position: relative;

    top: 5%;
    left: 30%;

    display: grid;

    /*
    grid-template-columns: repeat(4, 400px);
    grid-template-rows: repeat(4, 400px);
*/
}

.individual-divs{
    border: 1px solid rgb(100, 54, 54);

}



/*BUTTONS-CONTAINER*/
#buttons-container{
    width: fit-content;

    position: relative;
    left: 10%;
    bottom: 50%;

    display: grid;
    row-gap: 20px;
    column-gap: 20px;

    padding: 10px;

    border:  1px solid rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0px 0px 70px 10px rgb(14, 14, 15);

    
    
}


/*HTML COLOR PICKER ELEMENT*/
#color-picker{
    min-height: 30px;
    max-height: 60px;

    min-width: 30px;
    max-width: 60px;
}







/*BUTTONS*/


/*ALL BUTTONS*/

.button{


    margin: 5px 2px;
    padding: 15px 35px;

    font-weight: bolder;
    text-align: center;
    text-transform: uppercase;

    transition: 0.5s;

    background-image: linear-gradient(to right, #000000 71%, #ffffff  100%, #000000  100%);
    background-size: 800% auto;

    color: white;            

    box-shadow: 0 0 10px #eee;

    border-radius: 15px;

}

.button:hover{
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    box-shadow: 0 0 20px rgb(255, 255, 255);
    text-decoration: none;
}



/*RANDOM BUTTON'S RAINBOW HOVER EFFECT*/
/*Taken from - [EXPLANATION for animation] [DONT UNDERSTAND] rainbow Gradient hover button CANNOT FADE IN TRANSITION.txt*/
/*Inside Github private reprository- "Old-HDD-CSS-Backups"*/

#random-button{
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 15px;
    z-index: 1;
}

#random-button:hover{
    animation: animate 8s linear infinite;
}

@keyframes animate{
    0%{
     background-position: 0%;
    }
    100%{
     background-position: 400%;
    }

}

#random-button:before{
    content: '';
    position: absolute;
    z-index: -1;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
    opacity: 0;
    transition: 0.5%;
}

#random-button:hover:before{
    filter: blur(0px);
    opacity: 1;
    animation: animate 8s linear infinite;
 
}


/*BLACK BUTTON ANIMATIONS*/
/*NEED TO ADD DELAY*/


#black-button{
    background: linear-gradient(45deg, rgba(71,71,71,1) 4%, rgba(0,0,0,1) 66%);
    transition: background 0.5s linear;

}

#black-button:hover{
    background: linear-gradient(45deg, rgba(0,0,0,1) 1%, rgba(102,102,102,1) 73%);
    transition: 0.5s;

}

/*ERASE BUTTON*/
#erase-single-button{
    background: linear-gradient(45deg, rgba(184,184,184,1) 0%, rgb(172, 172, 172) 100%, rgb(163, 163, 163)100%);

    color: black;
    font-weight: medium;
}


#erase-single-button:hover{
    background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%, rgba(196,196,196,1) 100%);


    font-weight: bold;

}




/*ERASE ALL BUTTON*/
#erase-all-button{
    background-image: linear-gradient(to right, #000000 71%, #ffffff  100%, #000000  100%);
    background-size: 800% auto;

    color: white;            

    box-shadow: 0 0 10px #eee;

    border-radius: 15px;
}


#erase-all-button:hover{
    background-position: right center; /* change the direction of the change here */
    color: #fff;

    box-shadow: 0 0 20px rgb(255, 255, 255);

    font-weight: bolder;
    font-size: medium;
}




/*LABEL (FOR SLIDER CHANGE VALUE)*/
label{
    color: white;
    font-size: larger;
    font-weight: bolder;
}

/*RANGE INPUT*/


#range-picker-slider{
    color: red;
    background: transparent;
    opacity: 50%;
}


#range-picker-slider:hover{
    opacity: 100%;

}













/*CSS MEDIA QUERIES*/




@media(max-width: 1530px){
    #nav-bar{
        visibility: hidden;
    }
}





/*SCALING FOR 1080p, TAKE MIN-WIDTH INTO CONSIDERATION*/
@media(min-width: 1153px) and (min-height: 700px){
    #main-grid-container{
        top: 10%;
        /*height: 60vw;
        width: 60vw;*/
    }

    #buttons-container{
        bottom: 55%;
        margin-right: 155;

    }

}



/*SCALING FOR 4K and 1440p, TAKE MIN-WIDTH INTO CONSIDERATION*/
@media(min-width: 1153px) and (min-height: 900px){
    #main-grid-container{
        top: 8%;
        /*height: 60vw;
        width: 60vw;*/
    }

    #buttons-container{
        bottom: 50%;
    }

}




/*1440p Fix FOR MAIN-GRID-CONTAINER*/
@media (min-width: 1153px) and (min-height: 1200px){
    #main-grid-container{
        top: 0%;
    }
}


@media(min-width: 2122px) and (min-height: 1500px){
    #main-grid-container{
        top: 10%;
        bottom: 30%;
        height: 1250px;
        width: 1250px;
    }

    #buttons-container{
        top: -45%;
    }

}



@media(min-width: 1153px) and (min-height: 1250px){
    #buttons-container{
        bottom: 30%;
    }

}




@media(max-width: 1152px){
    #main-grid-container{
        margin-left: 5%;
        height: 700px;
        width: 700px;
    }

    #buttons-container{
        bottom: 50%;
        right: 5%;
    }

    .button{
        margin: 1px 1px;

        max-width: 70%;
        max-height: 90%;
    }

}





/*TABLETS*/
@media (min-width: 501px) and (max-width: 1080px){
    #main-grid-container{
        top: 0.5vh;
        left: 10%;
        width: 75vw;
        height: 85vw;

    }

    #buttons-container{
        display: flex;
        flex-direction: row;
        /*flex-wrap: wrap;*/
        align-items: center;

        padding-left: 20px;
        padding-right: 0;
        

        zoom: 0.7;

        margin-right: auto;
        margin-left: auto;

        position: fixed;
        left: 10vw;
        bottom: 3vh;

       

    }

    .button{
        flex: 100%;
        padding: 4% 0%;
        width: 15vw;
        text-align: center;


    }

    #range-picker-slider{
        width: 70%;
    }
}



/*PHONES*/
@media (min-width: 100px) and (max-width: 500px){
    #main-grid-container{
        top: 0.5vh;
        left: -2vw;
        width: 95vw;
        height: 90vw;;

    }

    #buttons-container{
        display: grid;
        padding: 4%;
        grid-template-columns: 1fr 1fr;
        

        /*
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;*/

        width: 100vw;


        height: 72vh;



        zoom: 0.7;

        margin-right: auto;
        margin-left: auto;

        position: fixed;
        bottom: 1vh;

        

       
    }


    .button{
        flex: 100%;
        font-size: larger;
        text-align: center;
        min-width: -webkit-fill-available;
        padding: 10% 0%;

        grid-column: 1/3;

    }



    #color-picker-container{
        margin-top: 10%;
        grid-column: 1/3;

    }

    #color-picker{
        width: 30%;
        height: 200%;
    }

    #custom-color-text{
        bottom: 50%;
    }

    #range-label{
        grid-column: 1/3;
    }

    #range-picker-slider{
        grid-column: 1/3;
    }
}


/*FOR 18:9 ASPECT RATIO PHONES*/
@media (min-width: 100px) and (max-width: 500px) and (max-height: 900px){
    #buttons-container{
        zoom: 0.35;
        width: 140vw;
        height: max-content;
        bottom: 0vh;
    }

    #random-button, #black-button, #erase-single-button, #erase-all-button{
        font-size: larger;
        text-align: center;
        min-width: -webkit-fill-available;
        padding: 10% 0%;
        }
}

@media (min-width: 100px) and (max-width: 500px) and (max-height: 728px){
    #buttons-container{
        zoom: 0.27;
    }
}