/* This page will look to provide the styling for all frequently used classes in the system, separated from other styling to maintain readable code structure */

/* This class removes the bullet point from all UL elements */
ul {
    list-style-type: none;
}

/* This class defines the size and distance from other elements of the logo within the navbar */
.navLogo {
    width: 3rem;
    height: 3rem;
    margin-right: 3px;
}

/* This class determines the position of the dark mode button */
.DarkModeToggle {
    position: relative;
    top: 1rem;
    left: 1rem;
}

/* This class determines the position of the high contrast mode button */
.ContrastToggle {
    position: relative;
    top: 1rem;
    left: 1rem;
    margin-top: 5px;
}

/* This class determines the position of the sign out button */
.SignOutButton {
    position: relative;
    top: 2rem;
    left: 2.5rem;
}

/* This class toggles the high contrast feature when called */
.ContrastOverlay {
    filter: contrast(150%);
}

/* This class determines the position of the delete account button */
.DeleteAccountButton {
    position: relative;
    top: 3rem;
    left: 1.5rem;
}

/* This class determins wheere the cards for objects like orders are displayed to keep them synced between customers and producers */
[data-bs-theme="light"] {
.CardDisplay {
    margin: 2vh;
    background-color: #A4B18A;
    border: none;
	}}

/* This class defines the dimensions and colour of the header box used for pages like the home page */
.HeadContainer {
    width: auto;
    background-color: #cac6bc;
    text-align: center;
    margin-top: 15px;
    padding-bottom: 10px;
}

/* This class defines the size of the home page and other page body containers within the HeadContainer  */
.BodyContainer {
    width: 30%;
    background-color: #DBD7CD;
    text-align: center;
}

/* This class defines the colour of the footer and also causes it to remain at the bottom of every page it is on */
.Footer {
    background-color: #898a75;
    margin: 3px;
    clear: both;
    position: relative;
    z-index: 1;
    height: -3em;
    margin-top: 40em;  
}

/* This checks the current system theme provided in the body and uses the styling within when dark mode is active */

[data-bs-theme="dark"] {
    /* This class determins wheere the cards for objects like orders are displayed to keep them synced between customers and producers */
    .CardDisplay {
        margin: 2vh;
        background-color: #595f4a;
        border: none;
    }

    /* This class defines the dimensions and colour of the header box used for pages like the home page */
    .HeadContainer {
        width: auto;
        background-color: #52504b;
        text-align: center;
        margin-top: 15px;
        padding-bottom: 10px;
}

    /* This class defines the size of the home page and other page body containers within the HeadContainer  */
    .BodyContainer {
        width: 30%;
        background-color: #595f4a;
        text-align: center;
    }

    /* This class defines the colour of the footer and also causes it to remain at the bottom of every page it is on */
    .Footer {
        background-color: #595f4a;
        margin: 3px;
        clear: both;
        position: relative;
        z-index: 1;
        height: -3em;
        margin-top: 40em;  
    }
}