body {
    background-color: skyblue;
}

:root {

    --body-color: #1c1c1c;
    --body-color-dark: #080808;
    --body-color-semidark: rgb(22, 22, 22);
    --body-color-light: rgb(50, 50, 50);
    --body-color-superlight: rgb(75, 75, 75);

    --primary-color: rgb(255, 105, 66);
    --primary-color-dark: rgb(158, 0, 0);
    --primary-color-light: rgb(236, 119, 87);

    /*--secondary-color: rgb(223, 154, 87);*/
    /*--secondary-color-dark: rgb(162, 97, 35);*/
    /*--secondary-color-light: rgb(252, 142, 37);*/

    --success-color: #43bc42;
    --warn-color: #e3c51a;
    --info-color: #2971d8;
    --error-color: #a61b1b;

    --text-color: white;
    --text-color-lightgrey: rgb(200, 200, 200);
    --text-color-grey: rgb(173, 173, 173);
    --text-color-darkgrey: rgb(114, 114, 114);

    --heading-font: 'Inter', sans-serif;
    --paragraph-font: var(--heading-font);


    --break-color: var(--primary-color);

    --nav-color: var(--body-color);
    --nav-ac-color: var(--primary-color);
    --sd-color: rgba(0, 0, 0, 0.2);

    --nav-text-color: var(--text-color);

    --nav-text-font: var(--heading-font);


    --item-border-radius-small: 5px;
    --item-border-radius-large: 8px;
}

/*SCROLLBAR*/
body::-webkit-scrollbar {
    width: 6px;
}
body::-webkit-scrollbar-thumb {
    background: var(--primary-color-light);
    border-radius: 2px;
}
body::-webkit-scrollbar-thumb:active {
    background: var(--primary-color);
}
/*SELECTION*/
::selection {
    background: var(--primary-color);
    color: white;
}


body
{
    margin: 0;
    padding: 0;
    font-family: var(--paragraph-font);
    color: var(--text-color);
    overflow-x: hidden;

    background-color: var(--body-color);

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
body * {
    font-family: var(--paragraph-font);
}

body:has(main){
    background-color: var(--body-color-dark);
}

/*Buttons*/
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: 0.1s ease background, 0.1s ease color;
    font-weight: bold;
}
a:hover, a:active, a:focus, a#active{
    color: var(--primary-color-dark);
}

a.button {
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 7px;
    border-radius: 4px;
}
a.button:hover, a.button:active, a.button:focus, a.button#active{
    background-color: var(--primary-color-dark);
}
/*Bold Text*/
b{
    color: var(--primary-color);
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

/*Line Breaks*/
div.lineBreak{
    height: 2px;
    width: 100%;
    background-color: var(--break-color);
}

div.lineBreak.thick{
    height: 3px;
}

/*Required Stars*/
.requiredStar {
    font-size: inherit;
    font-weight: 800;
    color: var(--error-color);
}

/*Code Font*/
p.codeBlock{
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0 0 2px !important;
    display: inline-block;
}

p.codeBlock.background{
    background-color: var(--body-color-light);
    padding: 10px;
    border-radius: var(--item-border-radius-small);
}

/*Progress Bars*/
.progressBar {
    width: 100%;
    height: 20px;
    background-color: var(--body-color-superlight);
    border-radius: var(--item-border-radius-small);
}
/*TODO REWRITE PROGRESS BAR TO WORK WITH NEW CLASS NAME*/
.progressBar > progress {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: var(--item-border-radius-small);
}

html {
    scroll-behavior: smooth;
}