/* In this file, are some style rules to get you started.
The CSS selectors already provided here are for some of the elements I would like you to create style rules for.
There may be other elements you wish to add or change the style properties of, feel free to do so. */


/* ================ GENERAL STYLE RULES ================ */
body {
  background-color: #F0F8FF,
  font-size: 14px;
  background-image: url("../images/backgroundceramic.jpg");

}
.searchbox{
  border-radius: 12px;
  width: 100%;
}


.container {
  background-color: #eadecd;
}
h1,h2, h4, h5, h6 {
  font-size: 30px;
  font-family: fantasy;
  line-height: 1;
  /* set some generic style rules for your headings */
}
h3 {
  font-size: 20px;
  font-family: cursive;
  line-height: 1;
}

p {
  font-family: fantasy;
  line-height: 1.5;

  /* set generic style rules for your paragraph elements */
}

/* ================ STYLE RULES TOP NAVIGATION ================ */
nav a {
  font-style: italic;
  text-decoration: none;
  /* apply some font style rules for the <a> elements inside the navigation */
}

/* ================ STYLE RULES FOR HEADER AREA ================ */
header {
  text-align: center;
  /* replace the background image of the header that I've provided here. Make sure to save the image in the 'images' folder */
  background-image: url("../images/turkishfood.jpg");
  background-size: cover;

}

header h1 {
  font-family: 'Berkshire Swash', cursive;
  font-size: 48px;
  color: white;
  /* you might need add some special styles for the <h1> inside the header so that it stands out from the background image */
}

header p {
  font-size: 25px;
  text-decoration-color: grey;
  /* you might need add some special styles for the <p> inside the header so that it stands out from the background image */
}

/* ================ STYLE RULES FOR MAIN CONTENT AND ASIDE AREA ================ */
article {
  border-bottom: 1px solid lightgray;
  text-align: center;
}
article p{
  text-align: left;
}

article img {
    width: 100%;
    padding: 6px;
    border: 1px solid grey;
}

.article-info .author a {
  text-align: center;
  font-family: monospace;
  font-size: 15px;
  /* Add style rules for the link to the author name in the article info */
}

/* the list-style: none; rule removes the bullet points in the list.
I've also removed the default padding that comes with the <ul> element */
.categories ul {
  list-style: none;
  padding: 0;
}

.categories a {
  font-size: 20px;
  font-family: monospace;
  text-decoration: none;
  /* Add some style rules for the <a> elements in the Browse by Categories section */
}
.categories h3 {
  text-decoration: underline;
}

.subscription-form {
  background-color: #69635C;
  font-family: monospace;
  color: rgb(100, 0, 0);
}
.subscription h3{
  text-align: center;
  text-decoration: underline;
}
.subscription p {
  text-align: center;
}

/* Change up the style of the subscribe button so it's catchier than what I currently have here,
I've provided some examples of the properties you can change. */
.subscribe-button {
  font-size: 16px;
  font-weight: bold;
  background-color: pink;
  border-color: inherit;
  border-radius: 6px;
  width: 110px;
  border-radius: 12px;
  width: 100%;
}

/* Notice the :hover in the CSS selector below, this is known as a pseudo-class,
It provides specific style rules when you hover over this element. Check it out on the browser when you hover over the button.
Change up the style rules I've provided here, the yellow background and blue text is quite ugly!
When you're done, you might also want to add this pseudo class selector to the link elements in the main <nav> */
.subscribe-button:hover {
  background-color: black;
  color: white;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.50);
  border-radius: 12px;
}
.recentrecipes{
  text-align: center;
  text-decoration: underline;
  font-size: 20px;
  font-family: monospace;
}

/* ================ STYLE RULES FOR THE FOOTER AREA ================ */
footer {
  background-color: #F0F8FF;
}

#copyright-text {
  font-size: 12px;
  text-align: left;
  /* Add style rules for the copyright text in the footer */
}

/* ================ RESPONSIVE DESIGN STYLE RULES ================
I've included a media query here as an example.
This is for you to determine if there are certain styles that you need to specify for small screen widths.
For example, some of the font-sizes might need to be adjusted when viewing on mobile screens. */

@media screen and (max-width: 690px) {

  /* Style rules for small screen widths here. This will apply to screen widths that are 690px wide or smaller.
  You may change the max-width value as you see fit. */

}