/*

To read:
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
*/

body {
  background-image: url("assets/blended_black_stucco.jpg");
  background-repeat: repeat;

}

#container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

#paddingContainer {
  flex: 1;
  flex-shrink: 10;
}

#mainItems {
  flex-direction: row;
  flex-wrap: nowrap;
}

#deepFake {
  position: absolute;
}

#paintingItems {
  display: flex;
  flex: 1;
  flex-direction: row;
}

#monaLisaWithFrame {
  min-height: 622px;
}

#museumLabelWrapper {
  flex: 1;
  display: flex;
  margin-left: 40px;
  padding-right: 40px;
  justify-content: left;
  display: flex;
  align-items: center;
}

#museumLabelContainer {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
}

.labelHeader {
  font-size: 16px;
}

a:link, a:visited, a:active {
 color: black;
 text-decoration: none;
}

a:hover {
  text-decoration: None;
  color: gray;
}

#museumLabel {
  width: 300px;
  font-size: 13px;
  background-color: white;
  padding: 20px;
  border-radius: 2px;
  -webkit-box-shadow: 3px 5px 4px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 5px 4px 0px rgba(0,0,0,0.75);
  box-shadow: 3px 5px 4px 0px rgba(0,0,0,0.75);
  background-image: url("assets/natural_paper_bg.jpg");
  background-size: 100% 100%;
}

#labelVideo {
  padding-top: 20px;
  padding-left: 2px;
}



@media only screen and (max-width: 768px) {

  #container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }

  #museumLabelContainer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }

}


@media only screen and (max-device-width: 768px) {
  #container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }

  #museumLabelContainer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }

}

@media only screen and (max-device-width : 640px) {

  #container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }

  #museumLabelContainer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }



}
