/* This is the Top Header for each page where the website name/logo will go 
[here is one code for the clear one  background-color: rgba(240, 248, 255, 0.215); and the green I used was "background-color: #8FBC8F;"]*/
.logo-header {
    font-family: "Lexend";
    font-size: 45px;
    text-align: left;
    display: block;
    background-image: url("images/digitalartcapstonebanner.jpg");
    background-repeat: no-repeat;
    padding-bottom: 110px;
    color: #39332e;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@font-face {
  font-family: 'Komorebi';
  src: url(https://brittanyifaweb.neocities.org/fonts/Komorebi.358990c7435181fab9d4b60e2923f0d.65084194858edd5ff259b5dbe7487bf.otf);
}

.home-logo {
    width: 30px;
    height: 30px;
}

/* this is a div tag that I used as a wrapper/container for the top padding because each individual h1 had both top and bottom padding each and that interfered with how I wanted to align the words with the background image. I chose to use the div tag to have both h1's together with their own separate paddings, line heights, and line spacings */
.banner-h1 {
    padding-top: 3px;
    padding-left: 5px;
}

/* I chose to do two different h1's for the two separate words because I needed them to be stacked on top of eachother right beside eachother in the logo banner to match the image I designed in Krita. This was so that I had an accessibility-friendly logo banner with the website title in it. I also played around with the font-size, padding, line height, and line spacing to align the text of the h1's to the text of the first version of my logo banner image as much as I could */
h1 {
    font-family: "Komorebi";
    font-size: 45px;
    text-align: left;
    text-transform: uppercase;
    display: block;
    padding-left: 14px;
    line-height: 12px;
    letter-spacing: 2px;
}

/* Navigation area underneath the h1 image and logo so that there is a section of space and background underneath for the nav links*/
nav {
    background-color: #E9F5DB;
    color: #39332e;
    text-align: center;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Nav links for both header and footer, utilized a padding-bottom so that there was more consistent space in the navigation bar around the nav links*/
header {
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 20px;
}


/* this is so that the div container around the nav links makes them aligned side by side rather than stacked on top of */
div {
    display: inline-block;
}

/* this was so that each of the nav links had a separate border property element. I also wanted the nav link bars to have the same colours as the h1 header banner image and the h2 background colours */
.nav-links {
    border: 2px solid darkgreen;
    background-color: #bad9b5;
}

/* these are the sizing properties for the decorative image in the h2 elements, which are larger than the decorative images in the h3 */
.h2-nav-image {
    min-width: 10px;
    max-width: 10px;
    padding-top: 5px;
    padding-left: 5px;
}

/* these are the sizing properties for the decorative images in the h3 elements because it is smaller than the decorative image size in the h2*/
.nav-image {
    min-width: 10px;
    max-width: 10px;
    max-height: 25px;
    padding-top: 5px;
    padding-left: 2px;
}

/* I added a padding left to the nav links because it was not as centre-aligned as I thought it would be, since they are bulleted links */
.header-nav {
    display: inline-block;
    padding-bottom: 30px;
    padding-right: 65px;
    max-width: 600px;
    min-width: 600px;
}

article {
    max-width: 600px;
}

/* this is so both the header and nav list properties do not have the bullet dots */
.header-ul {
    list-style: none;
    padding-right: 45px;
}

li {
    padding: 2px
}

/* Moved background image for the entire html so that there could be a background colour on the body */
html {
    background-image: url("./images/photo-1572248525483-6a953490f4b5.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    min-width: 600px;
    max-width: 100%;

}

/* instead of a background image, the body has a background colour */
main {
    color: #39332e;
    font-family: "Onest";
    background-color: #f6fff8;
    text-align: center;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 50px;
    min-width: 600px;
}

/* image of the food guide serving recommendations, size to fit the screen */
.food-guide-servings {
    min-width: 100px;
    max-width: 600px;
    min-height: 200px;
}

/* this section is to make the p-tags centred and to give a specific width to how far I wanted them to spand */
p {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

/* this is the element of the bulleted list of offerings on the index.html landing page so that these had the bullet points and had their own alignment and sizing properties within the home-page */
.index-offerings {
    text-align: left;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

/* smaller headers that specify what each page will contain. These are at the top of the page and I wanted to centre align them, create a specific sizing for them, as well as giving them a max and min width for different page sizing options, I also gave a bit of padding so that there was space around the text and the text borders (dark green borders) were not awkwardly wrapped around only the letters of the h2s */
h2 {
    color: #39332e;
    background-color: #bad9b5;
    text-align: center;
    font-size: 50px;
    border-radius: 5px;
    width: fit-content;
    min-width: 200px;
    max-width: 1000px;
    border: 3px solid darkgreen;
    padding: 7px;
    margin-left: auto;
    margin-right: auto;
}

/* these h3s are to divide the sections of each section of the information parts of the webpages, I wanted them a specific size as well as centre aligning them */
h3 {
    font-size: 35px;
    border-radius: 5px;
    width: fit-content;
    min-width: 200px;
    border: 3px solid darkgreen;
    padding: 7px;
    margin-left: auto;
    margin-right: auto;
}

/* Code for the privacy policy structure, which was generated by Google Gemini for the purposes of convenience before the interview*/
.privacy-policy-paragraph {
    text-align: left;
    padding-left: 100px;
    padding-right: 100px;
}

/* I wanted the li's in this ul to be aligned with a padding-left attribute so that they were underneath the p-tags in an appropriate spacing */
.privacy-policy-ul {
    padding-left: 165px;
}

/* food guide images code */
.alternatives-list {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    min-width: 200px;
}

.alts-ul {
    padding-left: 165px;
    padding-right: 160px;
}

/* footer of the bottom of the webpages, aligned to the left, div tags around each items inherited the display: inline-block properties, added upper padding because it otherwise was not there, each li also had the border inherited from the div properties. I also added a padding-bottom property because I did not want the bottom of the footer element to be directly underneath the text of the copyright */
footer {
    color: #39332e;
    background-color: #E9F5DB;
    text-align: center;
    width: 85%;
    padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 10px;
    min-width: 600px;

}

/* I wanted to align the footer nav more to the center, according to the "copyright 2025" text so I used a padding-right attribute to do so */
.footer-nav {
    list-style: none;
    padding-right: 40px;
}
.copyright-footer {
    text-align: left;
}