/* Add your custom styles here */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Great+Vibes&display=swap');

body {

  background-image: url("wallpaper.jpeg");
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  color: white;
  padding: 50px;

}

.wallpaper{

}

h1{
	font-size:70px;
	font-family: 'Great Vibes', cursive;
	  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 1;
}

img{
  width: 250px;
  height: auto;	
align-items: center;
justify-content: center;

display: inline-flex;
right: 300px


}

h2{
	text-align: center;
	font-size: 25px;
}

p{
	text-align: center;
	font-size: 20px;
}

#container{
	background-color: none;
	display: flex;
	height: 800px;
	align-items: flex-end;

}
 
 .person-container{

  background-color:  none;
  justify-content: space-between;
padding: 70px, 30px;
 

 } 
/*
// an empty array to hold our people data
const band = [];

// callback function that receives each page of data (considered here as records) and adds them to our list of people
function gotPageOfBand(records, fetchNextPage) {
  console.log("gotPageOfBand()");
  // This takes the list of records and add them to the people array
  band.push(...records);
  // request more pages
  fetchNextPage();
}

// call back function that is called when ALL pages are loaded
// You don't need to edit this function.
function gotAllBand(err) {
  console.log("gotAllBand()");

  // report an error, you'd want to do something better than this in production
  if (err) {
    console.log("error loading people");
    console.error(err);
    return;
  }

  consoleLogBand();
  showBand();
}

function consoleLogBand() {
  console.log("consoleLogBand()");
  band.forEach((members) => {
    console.log("Band:", members);
  });
}

// Show people based off the data that is retrieved
function showBand() {
  console.log("showBand()");
  band.forEach((members)=> {



  // Create the image for this person as a new img element
    var membersImages = document.createElement("img");
    // Set the src property of this image to the url of the image on Airtable (which is given by the fields of the person)
    membersImages.src = members.fields.images[0].url;
    // Add this newly created img element to the inside of our container div
    document.body.append(membersImages);


    var membersName = document.createElement("h1");
    membersName.innerText = members.fields.Name;
    document.body.append(membersName);
      // 1) Create the name for this person, as a new h1 element
    const personName = document.createElement("h1");
    // 2) Set the inside text of this h1 to the name for this person data
    personName.innerText = person.fields.Name;
    // 3) Add this newly created h1 to our container div
    peopleContainer.appendChild(personName);

    var membersBio = document.createElement("p");
    // 2) Set the inside text of this p to the name for this person data
    membersBio.innerText = members.fields.Bio;
    // 3) Add this newly created p element to the container div
    document.body.append(membersBio);


  });
}