/* This is an extra CSS file you can add to the pages to add a few extra touch ups.
   
   • Variables to save time (use it for the website colour scheme)
   • I personally don't like the look of the default scroll bar so I hide it by changing its color to the same as the backgrounds'
   • It then changes the colour accent of the scroll thumb and giving it a border radius (round edges)
   • Sets the default body, text color and padding/margins for the page.
   • Adding this code straight into the main.css file would probably be a good idea, as long as everyone likes these changes.

*/

/* Made a new CSS sheet to test new background and text colour variables for more modular code */
:root {
    font-size: 15px;
    font-family: "Lato", sans-serif;
    --text-primary: #ffffff;
    --text-secondary: lightGray;
    --bg-primary: #0e0e0e;
    --bg-secondary: black;
    --mint: #00bfae;
    --lighter: #00a68c;
    --darker: #006d5d;
    --floater: rgb(4, 129, 129);
    --transition-speed: 600ms;
    --cursor: url("../Images/cursors/default.png") 0 0, auto !important;
    --pointer: url("../Images/cursors/Link-Select.png") 0 0, pointer !important;
    --text: url("../Images/cursors/Text-Select.png") 0 0, text !important;
    --move: url("../Images/cursors/move.png") 0 0, move !important;
}

.dark {
    --text-primary: #ffffff;
    --text-secondary: lightGray;
    --bg-primary: #0e0e0e;
    --bg-secondary: black;
    --mint: #00bfae;
    --lighter: #00a68c;
    --darker: #006d5d;
    --floater: rgb(4, 129, 129);
    transition: var(--transition-speed) ease-in-out;
}

.light {
    --text-primary: #000000;
    --text-secondary: #0e0e0e;
    --bg-primary: #ffffff;
    --bg-secondary: lightGray;
    --mint: #00bfae;
    --lighter: #00a68c;
    --darker: #006d5d;
    --floater: rgb(4, 129, 129);
    transition: var(--transition-speed) ease-in-out;
}

/* Disables selection 

*::selection{
visibility: hidden;
}

*/

html {
    scroll-behavior: smooth;
}

/* Sets default page layouts and stops content from overflowing (scroll in the x axis) */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Fancy scroll bar :) */

body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    border-radius: 50px;
}

.scroll-down::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--bg-primary), var(--floater));
    border-radius: 50px;
}

.scroll-up::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--floater), var(--bg-primary));
    border-radius: 50px;
}

/* CUSTOM CURSOR */

/* Default Cursor */
body {
    cursor: var(--cursor);
}

/* Pointer (For links, buttons) */
a,
button {
    cursor: var(--pointer);
}

/* Text (I-Beam for input fields) */
input,
textarea {
    cursor: var(--text);
}

/* Move (For draggable elements) */
.draggable,
.move {
    cursor: var(--move);
}