/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color."

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

body {
  width: 80%;
  min-width: 800px;
  margin: 0 auto;
}

header img {
  height: 60px;
}

body {
  margin: 0;
}

*/

/* || General setup */

html {
  font-size: 10px;
  background-color: white;
}


body {
  width: 80%;
  max-width:100%;
  margin: 0 auto;
}



/* || typography */

h1,
h2 {
  font-family: "Cinzel Decorative", cursive;
  color: #2a2a2a;
}

p,
li {
  font-family: "Roboto Condensed", sans-serif;
  color: #2a2a2a;
  /* #2a2a2a is Black*/
}

h1 {
  font-size: 4rem;
  text-align: center;
  /* 4rem is 4times initial font sizeFor Shadow: text-shadow: 2px 2px 10px black; */
}

h2 {
  font-size: 3rem;
  text-align: center;
}

p,
li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* Adds a background image 
p {
  background-image: url("WhiteFlower.jpg");
}*/

/* || header layout */

header {
  margin-bottom: 10px;
}
 
main,
header,
nav,
article,
/* aside, */
footer,
section {
  background-color: #8f6383; /* #8f6383 is lilac*/
  padding: 1%; /* This is box that goes arouond sections*/
}

h1 {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* || header layout for H3 Right now using as 'Contact me'*/
h3 {
  text-transform: uppercase;
  font-size: 2rem;
  font-family: "Cinzel Decorative", sans-serif;
  color: #2a2a2a;
  display: flex;
  gap: 10px;
}

header img {
  height: 60px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  display: flex;
}

nav li {
  text-align: center;
  flex: 1;
}

nav a {
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav a:hover,
nav a:focus {
  color: #5c3251; /*color: red; #5c3251 is dark purple For when you hover over subheadings*/
}

/* || main layout */

main {
  display: flex;
  gap: 10px; /* Addes spaces after. Could also say 10em*/
}

article {
  flex: 4;
}

aside {
  flex: 1;
}

aside a {
  display: block;
  float: left;
  width: 100%; /* Was set to 50%*/

}

aside img {
  max-width: 100%;
}

footer {
  margin-top: 10px;
  margin-bottom: 15px;
}

.photos {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Solution: Display photos in two-column grid with equal columns
  and a 5px gap */
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr 1fr;
}