/* This is my custom stylesheet for all pages on the website */

/* Styling the background for the website */

body {
  background-color: #F4F1BB;
  margin-top: 10%;
}


/* Styling the header that'll appear on every pages
TODO: - Make it less "rectangly"
- Style the text */

header {
  background-color: #f8a5c2;
  font-family: 'Ephesis', cursive;
  font-size: 36px;
  position:fixed;
  top:0;
  width: 100%;
}


/* Styling for the navigation bar
TODO: -highlight index link
-get a pretty frame
*/

.navigation {
  border-color: #e77f67;
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

/* Reseting the figure element's margin for smoother pictures integration */

figure{
  margin: 0;
}


/* Styling for the homepage's mini galleries */

.pictures{

  background-color: #A63D40;
  border-color: #A63D40;
  border-radius: 1em;
  border-style: solid;
  border-width: thick;
  display: flex;
  grid-template: auto / 1fr 1fr 1fr;*/
  justify-content: space-evenly;
  list-style-type: none;
}


/* The class that styles most pictures across the website */

.pics {
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  height: 100%;
  width: 100%;
}


/* This class styles pictures with a text next to them */

.commentedpic {
  background-color: #242423;
  border-color: #91785D;
  border-radius: 1em;
  border-style: solid;
  border-width: thick;
  color: #F4F1BB;
  display: flex;
  list-style-type: none;
  margin: auto 2em 2em 1em;
}

/* Text styling for the commentedpic class */

.photographerintro, .pricesdescription{
  margin: 0 5% 0 5%;

}

.photographerintro h3{
  font-size: 2rem;
}

.pricesdescription h3{
  font-size: 3rem;
  margin: 0;
}

/* Styling for the form */

.mailme {
  background-color: #9ED0E6;
  width: 50%;
}

.mailme fieldset{
  display: grid;
  grid-gap: 1em;
  padding: 1em;
}


/* Styling for the bigger pictures on the site */

.widepic{
  background-color: #A63D40;
  border-color: #A63D40;
  border-radius: 1em;
  border-style: solid;
  border-width: thick;
}


/* Styling for the text used for larger paragraphs */

.fillertext{
  margin: 0 5% 0 5%;
}

.fillertext h2{
  color: #433E3F;
  text-align: center;
  text-decoration: underline;
}


/* The class that styles the section containing the gallery's pictures*/

.gallerypics {
  background-color: #A63D40;
  border-color: #A63D40;
  border-radius: 1em;
  border-style: solid;
  border-width: thick;
  column-gap: 0.5em;
  display: grid;
  grid-template-areas:"a b c";
  list-style-type: none;
  row-gap: 0.5em;
}


/* Styling for the details from the join me section */

.whereami{
  display: flex;
  justify-content: space-around;
  font-size: 1.5rem;
}

/* A bit of style to make the address not look like a list */

.postaladress{
  list-style-type: none;
}