:root {
  --wall-height: 88vh;
  --floor-height: 12vh;
}

.gallery-hall
{
  display: grid;
  grid-template-rows: var(--wall-height) var(--floor-height);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-hall::-webkit-scrollbar {
  display: none;
}

.floor
{
  background-image: url(https://ik.imagekit.io/gale/floor);
  background-position: center;
  background-repeat: repeat-x;
  background-size: 700px 100%;

  /* baseboards */
  border-top: solid 3px #694416a9;
  box-shadow: 0 -4px #D9C3AA;
}

.floor:after { /* add gradient to floor */
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, #ffffff55, #D1A99155);
}

.wall
{
  background-image: linear-gradient(to bottom, #D3CBBE, #F5F2ED);
  display: grid;
  grid-auto-flow: column;
  place-items: center;
}

.intro-text
{
  font-size: 1.2rem;
  width: min(60vw, 450px);
  margin: 0 15vw;
  color: #371a10b5;
}

.intro-text h1
{
  font-size: 1.4rem;
  font-weight: 700;
}

.intro-text a /* remove link styling */
{
  color: #918986;
  text-decoration: none;
}

span.enter-text:hover
{
  cursor: pointer;
}

img.artwork
{
  height: 70vh;
  max-height: 70vh; 
  margin: 0 max(200px, 15vw);
  -webkit-box-reflect: below 13vh linear-gradient(transparent, #00000012);
  box-shadow: 
    0 2px 3px 0px #00000045,       /* form shadow */
    -1px 9px 3px 2px #00000030,    /* cast shadow */
    0px -7px 100px 25px #ffffffaf; /* spotlight */

  }

img.tall
{
  height: 70vh;
  max-height: 70vh;
  -webkit-box-reflect: below 15vh linear-gradient(transparent, #00000012);
}

img.less-tall
{
  height: 50vh;
  max-height: 50vh; 
  -webkit-box-reflect: below 25vh linear-gradient(transparent, #00000012);
}

img.taller
{
  height: 75vh;
  max-height: 75vh;
  -webkit-box-reflect: below 10.5vh linear-gradient(transparent, #00000012);
}

img.framed
{
  border-image: url(https://ik.imagekit.io/gale/gallery-frames/wood-frame.png) 179 164 163 194 stretch stretch;
  border-color: #cfbab0;
  border-style: solid;
  border-width: 16px;
}

.painting-label .h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.painting-label .p {
  font-size: 1rem;
  margin: 0;
}

.painting-label .p span {
  font-weight: 700;
}

.door
{
  height: 62vh;
  width: 28vh;
  margin: 0 120px;
  border-radius: 2px;
  position: relative;
  bottom: -13.3vh;
  background-image: linear-gradient(to bottom, #282828, #665c4d);
  border-style: inset;
  border-top: solid 2px #ffffff78;
  border-left: solid 2px #ffffff78;
  border-right: solid 2px #ffffff78;
}

.door.main-hall:before
{
  content: "main hall";
  /* door text placed above the door */
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #897b6b;
}

.door a 
{
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
}