body {
  margin: 0px;
}

#background {
  width: 100vw;
  height: 100vh;
  background-size: auto 100vh;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.hang-area {
  position: absolute;
}

#anchor {
  position: absolute;
  max-width: 0px;
  max-height: 0px;
  overflow: visible;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.frame {
  border-width: 4px;
  border-style: solid;
  border-bottom-color: #250e00;
  border-left-color: #3c1600;
  border-right-color: #331300;
  border-top-color: #290f00;
  outline: solid #1b0a00 8px;
}


.vert-scaler {
  display: flex;
  vertical-align: middle;
  flex-direction: row;
  /* position: absolute; */
  /* top: -50%; */
}


/* small images */

.small {
  background: url(pics/small.jpg)
}

.small .hang-area {
  box-sizing: border-box;
  left: 43%;
  top: 15%;
  width: 14%;
  height: 39%;
  /* border: solid red 2px; */
}

.small #anchor {
  left: 50%;
  top: 50%;
}

.small #anchor #pic {
  display: flex;
  align-self: center;
  box-shadow: -5px 3px 20px 4px #000000c2;
  filter: brightness(96%) contrast(98%);
  height: 35%;
}

/* large images */

.large {
  background: url(pics/large2.jpg)
}

.large #anchor {
  left: 50%;
  top: 50%;
}

.large #anchor #pic {
  display: flex;
  align-self: center;
  box-shadow: 5px -1px 18px 7px #000000c9;
  filter: saturate(94%) brightness(100%) contrast(86%);
  height: 28.5%;
}

/* full */

.large .hang-area {
  box-sizing: border-box;
  left: 39.1%;
  top: 3%;
  width: 12.3%;
  height: 48%;
  /* border: solid red 2px; */
}

.full #pic {
  display: block!important;
  height: 100vh!important;
  outline: none;
  border: none;
}

.full .hang-area {
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
}

.full #anchor {
  top: 50%;
  left: 50%;
}

.full {
  background: rgb(0,0,0);
}