/* Desktop */
@media screen and (min-width: 767px) {
  header{
    margin-left: 10rem;
    margin-right: 10rem;
    padding: .5rem;
  }.title{
    padding: 1rem;
  }
} /* Mobile */
@media screen and (max-width: 768px) {
  h1.title{
    padding: 1rem;
    border-radius: 8px;
    background-color: whitesmoke;
    box-shadow: 0 3px 6px rgba(110,110,110,0.5);

    text-decoration: solid;
    text-shadow: #3A3A3C;
    width: 75%;
    
    text-transform: uppercase;
  }.footer{
    margin-top: 1rem;
    padding: 1rem;
  }.copyright{
    margin: auto;
    border-top-color: rgb(52, 56, 58);
    box-shadow: 0 3px 6px rgba(0,0,0,0.5);
    letter-spacing: 4px;
    word-spacing: 10px;
    line-height: 16px;
    background-color: rgba(200,200,200,0.5);
    border-radius: 8px;
    text-transform: uppercase;
  }
}

html {
  /* background-image: url('/images/iron-ore.jpeg'); */
  background-image: url('/images/bg.jpeg');
}

header{
  background-color: #253292;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

.xyz-banner{
  padding-top: 1rem;
  max-width: 50%;
  width: 30%;
  margin: auto;
  display: block;
}

li.bar{
  text-align: center;
}ul.bar{
  margin: .5rem;
  width: 4rem;
  max-width: 8rem;
}

.title{
  border-radius: 8px;
  background-color: whitesmoke;
  box-shadow: 0 3px 6px rgba(110,110,110,0.5);
  text-align: center;
  text-decoration: solid;
  text-shadow: #3A3A3C;
  
  max-width: 95%;
  margin: 2rem;
  text-transform: uppercase;
}

.navbar{
  /*margin-bottom: 1rem !important;*/
  /*padding-bottom: 8px;*/
  display: inline;
}.navbar-links ul{
  padding-left: .01rem;
  display: flex;
  text-shadow: 0 3px 6px rgba(0,0,155,0.2);
}.navbar-links li{
  list-style: none;
  margin: .25rem;
  padding: .25rem;
  background-color: whitesmoke;
  text-align: center;
  flex: auto;
  border: 8px solid #253292;
}.navbar-links li a{
  text-decoration: none;
  color:#3A3A3C;
  padding: .1rem;
}.navbar-links li:hover{
  background-color: lightskyblue;
}

.content{
  /*
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 2rem;
  width: fit-content
  */
}

.media{
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

img.media{
  width: 22.5rem;
  margin-bottom: 0.5em !important;
}

video.media{
  width: 300px;
  height: "240";
  width: "320";
}

#footer{
  border-top-color: rgb(52, 56, 58);
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  padding: 2rem;
  border-top: 1px solid #f1f1f1;
  letter-spacing: 4px;
  word-spacing: 10px;
  line-height: 16px;
  background-color: rgba(200,200,200,0.5);
  border-radius: 8px;
  text-transform: uppercase;
  text-align: center;
}