:root {
  --painting-height: 200px;
  --left-indent: 5vw;
  --painting-indent: 20vw;
  --painting-margin-top:30vh;
}

*{
  margin: 0;
}

::-webkit-scrollbar{
  height: .25em;
  width: .25em;
}

::-webkit-scrollbar-thumb{
  border-radius: 0px;
  background: #f2f3f9;
  height: .25em;
  width: .25em;
  opacity: 0;
}

::-webkit-scrollbar-thumb:hover{
  border-radius: 0px;
  background: #f2f3f9;
  height: .25em;
  opacity: 100;
}

body{
  font-size: 16px;
}

p{
  padding: .5em;
}

.blue{
  color: blue;
}

iframe{
  width: 80vw;
  height: 80vh;
  display: block;
}

main{
  margin: auto;
  width: 100%;
  height: 100%;
}

/* nav */
nav{
  position: fixed;
  margin-top: 0;
  width: 100%;
  height: fit-content;
  z-index: 2000;
  background-color: white;
  padding-left: var(--left-indent);
  display: flex;
  flex-direction: horizontal;
  border-bottom: 1px solid #000;
  mix-blend-mode: hard-light;
}

nav p{
  padding-left: 0;
}


/* wrapper */
.essay-wrapper{
  width: 100%;
  height: fit-content;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  overflow-x: hidden;
}

.essay-wrapper:first-child{
  margin-top: var(--painting-margin-top);
}


/* painting */
.painting-wrapper--text-box{
  position: fixed;
  margin-left: var(--painting-indent);
  margin-top: var(--painting-margin-top);
  text-align: center;
  width: 10em;
  height: var(--painting-height);
  /* background-color: white; */
  background-image: url(images/canvas.png);
  mix-blend-mode: hard-light;
  border-top: 1px solid #000;
  z-index: 1000;
  cursor: grab !important;
}

/* .painting-wrapper--text-box:hover{
  background-image: none;
  background-color: white !important;
  mix-blend-mode: normal;
} */

/* .painting-wrapper--color-wash{
  position: fixed; 
  width: 10em;
  height: var(--painting-height);
  background-image: url("images/RECALC! 2.jpg");
  background-position: center center;
  background-size: 400px;
  margin: auto;
  margin-top: var(--painting-margin-top);
  opacity: 0;
  z-index: 3000;
  mix-blend-mode: multiply;
  display: none;
} */

/* .painting-wrapper--color-wash:hover{
  opacity: 20%;
} */

/* painting changes */
.turned{
  rotate:90deg;
  transition: ease-in-out 1s;
}

.turned-back{
  rotate:0deg;
  transition: ease-in-out 1s;
}

.moved{
  transform: translateY(-40vw);
  transition: ease-in-out 1s;
}

.moved-back{
  transform: translateY(4vw);
  transition: ease-in-out 1s;
}

.blued{
  background-image: url("images/RECALC! 2.jpg");
  transition: ease-in-out 1s;
}

.whited{
  background-image: url("images/fail3.png");
  transition: ease-in-out 1s;
}

/* white box */
.white-box{
  width: 100%;
  /* background-color: white; */
  height: var(--painting-height);
  display: block;
  background-color: #ffffff;
  background-image:  linear-gradient(#f2f3f9 3px, transparent 3px), linear-gradient(90deg, #f2f3f9 3px, transparent 3px), linear-gradient(#f2f3f9 1.5px, transparent 1.5px), linear-gradient(90deg, #f2f3f9 1.5px, #ffffff 1.5px);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
  background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
  border-top: 1px solid #000;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.white-box p{
  padding-left: var(--left-indent);
  width: 40vw;
}

/* big box */
.big-box{
  width: 100%;
  /* background-color: white; */
  height: fit-content;
  /* display: flex;
  flex-direction: row;
  overflow-x: scroll; */
  background-color: lightgrey;
  border-top: 1px solid #000;
  padding-top: .5em;
  padding-bottom: 1em;
}

.big-box p{
  padding-left: var(--left-indent);
  font-size: 4em !important;
  font-style: normal !important;
  line-height: 1em;
  padding-bottom: 50vh;
}

.right-align p{
  padding-right: 40vw;
  padding-left: 0;
  text-align: left;
}

.hover-highlight:hover{
  cursor: pointer;
  background-color: yellow;
}

/* box notes */
.box-notes{
  position: relative;
  display: block;
  margin-right: 0;
  margin-top: 0;
  margin-left: auto;
  margin-bottom: auto;
  width: 30vw;
  height: 100%;
  background-color: lightyellow;
  opacity: 0;
  /* display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden; */
}

.box-notes:hover{
  opacity: 100%;
  transition: .1s ease-in-out;
}

.box-notes p {
  padding-left: 1em;
}

.indent{
  padding-left: 1.5em;
}

.box-notes img{
  height: 100%;
  width: auto;
  display: block;
}


/* image box */
.image-box{
  border-top: 1px solid #000;
  height: fit-content;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
} 

.image-box img{
  display: block;
  width: auto;
  height: 80vh;
  padding: 0 !important;
  margin: 0 !important;
}

.image-box--tall img{
  padding: 0 !important;
  margin: 0 !important;
}

/* booklet */
.booklet-box{
  width: 100%;
}

.booklet-box--wrapper{
  width: 100%;
  display: flex; 
  gap: 2em;
  border-top: 1px solid #000;
  margin: auto;
  padding-left: var(--left-indent);
  background-color: blue;
  overflow-y: hidden;
  overflow-x: scroll;
}

.booklet-box img{
  width: auto;
  height: 80vh;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 30vw;
  padding-left: 0;
}

.booklet-box--tall{
  height: 90vh !important;
  padding: 0 !important;
}

.last-image{
  margin-right: var(--left-indent);
}