/* STYLE SECTIONING TAGS */
*{
  margin: 0px;
  padding: 0px;
}

body {
 margin: 0px;
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 text-align: center;
 background-color: #FDE4FE; 
}

/* STYLE TEXT */

header {
  margin: 0px;
  padding: 40px;
  color: #FF6FC1;
  background-color: white;
}

main {
  color: black;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

td {
  padding: 50px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

/* STYLE IMAGES */
img {
  border-radius: 50%;
}

#friends {
  border-radius: 10%
}
#hudsonettes {
  border-radius: 10%
}
#tennis {
  border-radius: 10%
}
#barcelona {
  border-radius: 10%
}
#taiwan {
  border-radius: 10%
}

#ppl {
  border-radius: 10%
}


/* STYLE NAV BAR */

ul {
  list-style-type: none;
  background-color: #FF6FC1;
  overflow: hidden;
  padding: 1em;
  margin: 0px;
}
li {
  display: inline;
}

li a{
  text-decoration: none;
  color: white;
  font-size: 1.3em;
  padding: 1em;
}

li a:hover {
  background-color: #171717;
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}