/* the default css for when the user has not clicked any of the checkboxes on the settings page */
body{
    margin: 0;
}

/* navbar styling */
nav {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #169153;

}

ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    list-style-type: none;
    align-self: center;

}



#highlight{
    background-color: #E76F51;
    border-radius: 15%;
    border-width: 0px;
    color: black;
    display: flex;
    justify-self: center;
    align-self: center;

}

#highlight:hover {
    background-color: black;
    color: #E76F51;
}

ul li a {
    padding: 7.5px 7.5px 7.5px 7.5px;
    text-decoration: none;
    marker: none;
    color: black;
    display: flex;
    align-self: center;
}

ul li:hover {
    background-color: #177245;
    border-radius: 15%;
}

#basketlink{
    font-size: x-large;
    padding: 0px 7.5px 0px 7.5px;
    
}

#bold {
    font-weight: bold;
    
}

#logo {
    text-decoration: none;
    display: flex;
    align-self: center;
    font-size: x-large;
    color: black;
}



/* main page styling */
h1 {
    display: flex;
    justify-content: center;
    font-size: 80px;
}

h2 {
    display: flex;
    justify-content: center;
}

a {
    padding: 15px 15px 15px 15px;
    min-width: 62px;
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-size: larger;

}

div {
    display: flex;
    background-color: #4CBB17;
    justify-self: center;
    align-self: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 20%;
    border-radius: 15%;
    padding: 35px 10px 35px 10px;
    align-items: center;

}

p {
    font-size: larger;
}

#aboutul {
    display: flex;
    align-items: center;

}

/* change the colours of the Divs on the about page, while keeping them the same height. */
#farmerDiv {
    background-color: #177245;
    min-height: 330px;
}

#methodDiv {
    background-color: #169153;
    min-height: 330px;
}

#benefitDiv {
    /* can stay the same colour */
    min-height: 330px;
}

#highlightText {
    color: #E76F51;
}

/* allow the text highlights to mimic the highlighted buttons when hovered over - both are links, after all. */
#highlightText:hover {
    color: black;
}

#form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 45px 10px 45px;
}

button {
    padding: 8px 25px 8px 25px;
    font-size: larger;
}

label {
    padding-top: 5px;
    font-size: large;
}

table {
    display: flex;
    align-content: center;
    justify-content: center;
}

tr {
    display: flex;
    background-color: #4CBB17;
    justify-self: center;
    align-self: center;
    justify-content: center;
    flex-direction: column;
    max-width: 20%;
    min-width: 20%;
    border-radius: 15%;
    margin: 35px 10px 35px 10px;
    padding: 25px 10px 25px 10px;
    align-items: center;
    min-height: 264px;
}

tbody {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-evenly;
    justify-content: space-evenly;
    align-self: center;

}

#storehighlight{
    background-color: #E76F51;
    border-radius: 15%;
    border-width: 0px;
    color: black;
    display: flex;
    justify-self: center;
    align-self: center;
    padding: 15px 15px 15px 15px;
    min-width: 62px;
    text-decoration: none;
    font-size: larger;

}

#storehighlight:hover {
    background-color: black;
    color: #E76F51;
}


#orderTable{
    tbody{
        min-width: 75%;    
    }
}