*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: black;
} 
body {
  background-color: white;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  transition: .5s ease;
  /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='0.5' stroke='%23fbf087ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-33,-7)' fill='url(%23a)'/></svg>") */
}

.switch {
  text-align: center;
  margin: 10rem;
}


.dm-btn {
  color: #0e004650;
  cursor: pointer;
  border: 1px solid;
  padding: 0.25em 0.5em;
  /* box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  left: 40px; */
}

.dark-mode {
  background-color: black;
  transition: 1s ease;
}


a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: #3e00b0;
} 


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

  .flex-container {
    flex-direction: column;
  }
}
.flex-container {
  display: flex;
  justify-content: space-evenly;
  justify-content: center;
  margin-bottom: 25vh;
  font-size: 1.3em;
  font-family: 'Work Sans', sans-serif; 
  font-weight: 900;
  text-shadow: 7px 7px 7px #A42995;

}

.flex-container > div {
  background-color: transparent;
  width: flex;
  max-width: 100vw;
  margin: 4vw;
  text-align: center;
  
  
}


.prev_box {
  margin-top: 150px;
  margin-bottom: 150px;
  font-weight: 200;
}

.prev_img {
  display: block;
  padding: 5px 15px 0px;
  margin-left: auto;
  margin-right: auto;
}

.portrait {
  max-height: 87vh;
  max-width: 70vw;
}

.landscape {
  max-height: 60vh;
  max-width: 80vw;
}

.info {
  display: block;
  padding-left: 13vw;
  padding-right: 13vw;
  text-align: center;
  font-size: .8em;
  margin: 2px;
  margin-top: .8em;
  
}

.info .title {  font-weight: 400; } 
.info .dimension, 
.info .year, 
.info .artist{  font-weight: 200; }