styles.css

h3 {
  /* background-color: lightblue; */
}

p {

}

span {

}

div {

}

a {

}

img {

}

button {

}

input {

}

/* 
these will now be displayed differently 
*/
span.different1 {
  display: block;
}

div.different2 {
  display: inline;
}

h3.different3 {
  display: inline-block;
}
/* 
^ this isn't always a good thing to do since you're undoing the way certain tags were 
made to be displayed. if possible, always use the right semantic tag for the job. 
*/



/* FLEX TIME */



.container {
  /* display: flex; */
  background-color: orange;
}

.container2 {
  width: 300px;
  height: 300px;
  border: 2px solid red;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.container3 {
  border: 2px solid blue;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
}

.container3 div {
  background-color: lightcoral;
  border: 1px solid lightblue;
}

.container3 .nested-container {
  width: 50%;
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
}