html{
 height: 100%; 
}

body{
margin: 0;
padding: 0;
background:linear-gradient(0deg, rgba(228, 174, 174, 0.3), rgba(228, 174, 174, 0.3)), url('../../../img/shrines/james/hearts5.gif');
  background-position: center;
  background-repeat: repeat;
color: #050040;
font-family: 'Mali';
font-size: 1em;
margin: 0;
}

.container {
width: 47%;
min-width: 800px;
min-height: 90vh;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
}

header {
background-image: url('../../../img/shrines/james/gif1.gif');
    background-position: center;
    background-repeat: no-repeat;
height: 265px;
border: 20px solid transparent;
border-image: url(../../../img/shrines/james/tumblr_6c5f81e5ff408005893df9eaeceaa40f_85baf666_400.png) 22 round;
border-image-outset: 10px;
margin-top: 20px;
display: flex;
}

.wrap {
height: 255px;
margin: 15px;
display: flex;
}

.wrap span {
align-self: flex-end;
}

nav{
background-color:#750616;
padding: 10px;
border-radius: 25px;
text-align: left;
margin-top: 10px;
box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}

nav a{
color: #ffffff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
text-decoration: none;
font-size: 1.25rem;
}

nav ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
text-align: center;
}

main {
box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
border: 5px ridge rgb(255, 210, 33);
margin-top: 10px;
height: 450px;
}

.iframe{
  width:100%;
  height: 100%;
}

footer{
background-color:#750616;
color: #ffffff;
padding: 10px;
border-radius: 25px;
text-align: center;
margin-top: 10px;
box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.5);
}

footer a{
color: #ffffff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
text-decoration: none;
}

footer ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}

/* Media query */
@media only screen and (max-width: 900px) {

.container {
    min-width: initial;
    width: 100%;
}

header{
  height: 6rem;
}

.title{
  width: 55%;
}

.wrap {
  margin: 0px;
  height: auto;
}

nav a{
  font-size: 0.8rem;
  margin: 5px;
}

  
}