/* CSS HEX
    --dark-red: #8B0000;
    --steel-blue: #4682B4;
    --ivory: ##FFFFF0;
    --goldenrod: #DAA520;
*/
body {
  font-size: 16px;
  max-width:576px;
  margin: 0 auto;
  padding: 0 0.5rem;
    background-image: url(met-temple.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: ivory;
}

header {
    background-color: ivory;
    text-align: center;
    font-size: 28px;
    background-image: url(in-the-met.jpg);
    color: ivory;
}

nav {
 border: solid 2px darkred;
    background-color: ivory;
    padding-left: 10px;
}

nav ul {
    float: left;
}

nav li {
}

nav li a:link {
}
nav li a:hover {
}

img {max-width: 576px;
}

main {
    background-color: ivory;
    padding-left: 10px;
    padding-right: 10px;
}

footer {
  background-color: darkred;
    color: ivory;
    background-image: url(in-the-met.jpg)
}


a {
}
a:link {
    color:goldenrod
}
a:hover {
    color:steelblue
}

a:visited {
    color: darkred;
}


h1, h2, h3, h4, h5, h6 {
    font-style: italic;
    padding-left: 10px;
  }

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3{
  font-size: 1.75rem;
}

h4{
  font-size: 1.5rem;
}

h5{
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}
.hs-responsive-embed-youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
}
.hs-responsive-embed-youtube iframe {
position: absolute;
width: 100%!important;
height: 100%!important;
}

/* use classes */



/* responsive query */
@media screen and (min-width: 577px) {
  body {border:solid 2px black}
}