:root {
  --def-h: 15vh;
  --def-w: 2em;
}

@font-face {
  font-family: WremenaLight;
  src: url('WremenaLight.woff2');
}

body {
  margin: 0;
  padding: 0;
  font-family: WremenaLight, serif;
  font-size: 32px;
  min-height: 100%;
  line-height:1.1;
  color: black;
}

.button {
  border-radius: 0.5em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.button:hover {
  opacity: 0.9;
}

.button span {

}

#container {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  width: 100vw!important;
  height: 100%;
}




#col-1 {
  width: var(--def-w);
  height: 100%;
  writing-mode: vertical-lr;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;

}

#col-1 span {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0.5em 0;
}

#logo {
  transform: rotate(180deg);
  flex-grow: 2;
  text-align: center;
}



#readme {
  transform: rotate(180deg);
  flex-grow: 1;
  text-align: right;
}

#copy {
  transform: rotate(180deg);
  flex-grow: 1;
}



#col-2 {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  width: 100%;
}

#row-1 {
  width: calc(100% - var(--def-w));
  display: flex;
  flex-direction: row;
  align-content: stretch;

}

#row-2 {
  width: 100%;
  height: var(--def-h);
  display: flex;
  flex-direction: row;
  align-content: stretch;
}

#add {
  width: var(--def-w);
  height: 100%;
  background-color: blue;
  color:white;
  writing-mode: vertical-lr;
}

#add span {
  transform: rotate(180deg);
}

#ui-1 {
  flex-grow:1;
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}



#next-1 {
  width:100%;
  height: var(--def-h);
  background-color: green;
  background-image: url('next-1.jpg');
}


#ui-2 {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
}


#prev-2 {
  flex-grow:0;
  height: 100%;
  background-color: pink;
  background-image: url('prev-2.jpg');
}

#prev-2 span {
  transform: rotate(-90deg);
}

#main {
  width: 70vh!important;
  height: 70vh;
  flex-grow: 0;
}

#next-2 {
  width:calc(50vw - 35vh + var(--def-w));
  height: 100%;
  background-color: pink;
  flex-grow:1;
  background-image: url('next-2.jpg');
}

#next-2 span {
  transform: rotate(90deg);

}

#prev-1 {
  background-color: teal;
  flex-grow:2;
  background-image: url('prev-1.jpg');
}

#prev-1 span {
  transform: rotate(180deg);
}


#save {
  background-color: #ff7ba7;
  width: 20%;
  flex-grow:1;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#previewCan1, #previewCan2, #previewCan3 {
  position: absolute;
}

#previewCan3 {
}

.masked-1 {
  -webkit-mask-image: url('mask-1.svg');
  -webkit-mask-size: 2px 2px;
  -webkit-mask-repeat: repeat;
  -webkit-mask-clip: border-box;
  mask-origin: border-box;
  mask-image: url('mask-1.svg');
  mask-size: 2px 2px;
  mask-clip: border-box;
  mask-repeat: repeat;
}

.masked-2 {
  -webkit-mask-image: url('mask-2.svg');
  -webkit-mask-size: 2px 2px;
  -webkit-mask-repeat: repeat;
  -webkit-mask-clip: border-box;
  mask-origin: border-box;
  mask-image: url('mask-2.svg');
  mask-size: 2px 2px;
  mask-clip: border-box;
  mask-repeat: repeat;
}

#main div {
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center;
}

#pr1 {
  background-image: url('next-1.jpg');
}

#pr2 {
  background-image: url('next-2.jpg');
}