:root {

    /* image sources */
    --btn: url('https://cdn.planetxylox.com/content/site/img/button_part_one.webp');
    --btn-second: url('https://cdn.planetxylox.com/content/site/img/button_part_two.webp');
    --bg-img: url("https://cdn.planetxylox.com/content/site/img/main.webp");
    --bg-main: url("https://cdn.planetxylox.com/content/site/img/bg.webp");
    --planet-bg: url('https://cdn.planetxylox.com/content/planets/bg.webp');
    
    /* main */
    --color: white;
    /* Use this site: https://cssgradient.io/ to make gradient backgrounds */
    --background: linear-gradient(333deg, rgba(165,165,165,1) 0%, rgba(251,251,251,1) 0%, rgba(165,165,165,1) 100%);;
    --bg-alt: #949494;
    --main: #000;
    
    /* header text color */
    --header-text: #151515;
    
    /* For the Narbar */
    --nav-bg: #3f51eb;
    --nav-border: #0e1fbc;
    --nav-text: #fff;
    --nav-text-hover: #d3d3d3;
    --nav-text-active:  #d3d3d3;
    --nav-dropdown-bg: #0e1fbc96;
    --nav-dropdown-hover-bg: #3546dd96;
    /* edit the stroke rbg, this value is the nav-border, just to rgb */
    --nav-icon: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(14, 31, 188)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    
    /* carousel, edit the fill */
    --car-icon-next: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
    --car-icon-prev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");

    /* Tabs (seen in settings) */
    --tabs: #181818;
    --tabs-bg: #3f51eb;
    --tabs-border: #3e4ab6 #2f3ca8 #1f2ca1; 
    --tabs-hover: #404aa1;
    
    /* For form stuff */
    --input-color:#a9a9a9;
    --input-border:#8b8b94;
    
    /* For images */
    --img-bg: #0e0e0e00;
    --img-border: #0f0f0f00;
    
    
    /* Links and to highlight */
    --imp-hover: #1f1f88;
    --imp: #00005d;
    
    /* For the Footer */
    --footer-color: white;
    --footer-link-color: white;
    --footer-link-alt-color: #bdbdbd;
    
    
    /* Table and hr thingy */
    --hr: #202020;
    
    /* Pagination */
    --page: #000052;
    --page-text: #fff;
    --page-bg: #000052;
    --page-border: #d3d3d3;
    
    /* Animation text for staff's usernames */
    --animation: linear-gradient(to right, #1e93bd, #449be0, #1f6eae, #2a98f1);;
    
    /* For Guestbook */
    --chatbox: #8b8b94;
    --chat-report: brown;
    
    /* For the popup */
    --pop-success: #144d3d;
    --pop-success-bg: #206452;
    --pop-sucesss-border: #064635;

    --pop-warning: #d48b04;
    --pop-warning-bg: #a17c37;
    --pop-warning-border: #8a6e3a;

    --pop-error: #611717;
    --pop-error-bg: #751e1e;
    --pop-error-border: #460606;

}