/* 1. Reset: Allow images to exist and fix box sizing */
* {
  box-sizing: border-box;
  /*font-family: monospace;*/
}

img {
  display: block; /* Removed display: none! */
  max-width: 100%;
  height: auto;
}

body {
  background-color: white;
  color: black;
  font-family: sans-serif;
  margin: 0;
  padding-top: 50px;
}

/* 2. Navigation */
.nav {
  text-align: center;
  border: 2px solid green;
  border-radius: 25px; /* gives smooth edges*/
  width: 60%;
  margin: 0 auto 20px auto;
  padding: 10px;
  position: relative; /* This helps keep GIFs contained */
  font-family: monospace;
  
}

/* 3. The Parent Container (Flexbox) */
.parent {
  /* background-color: red; */ 
  display: flex; 
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid black;
  border-radius: 25px;
  min-height: 300px;
  overflow: hidden; /* Keeps the image inside the round corners */
}

/* 4. The Three Sections */
.child {
  padding: 15px;
  /*border: 1px solid red; */
  text-align: center;
}

#left {
  flex: 1; /* Side width */
}

#middle {
  flex: 2; /* Wider middle section */
  border-left: 2px solid black;
   /*border-radius: 25px; */ /* probably a bad idea , lets see in future */
  border-right: 2px solid black; 
}

#right {
  flex: 1; /* Side width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 auto 0;
  
}

/* 5. The Buttons */
.btn button {
  display: block;
  width: 100%;
  margin: 5px 0;
}

/* footer */
.footer{
  border-top: 2px solid black; 
  /*color: white; 
  background-color: black;*/
  text-align: center; 
  padding-top: 50px;
  margin: 50px 0 0 0;
}