.work {
    margin-bottom: 10%;
}

.media {
    position: absolute;
    /* display: box;
    width: 30%;
    height: auto; */
    margin: 2%;
}
.n {
   display: none;
}

img:hover{
    -webkit-filter: drop-shadow(3px 3px 0px #f5f5f5)
    drop-shadow(-3px -3px 0px #f5f5f5);
    filter: drop-shadow(3px 3px 0px #f5f5f5) 
    drop-shadow(-3px -3px 0px #f5f5f5);
    z-index: 28;
}

#recomp {
	/* position: fixed;
	top: 72%;
	right: 1vw; */
   position: relative;
   top: 88vh;
   width: 100px;
	background-color: #ffffff;
	color:#2D2C31;
	border: .5px solid #2D2C31;
	display: block;
   z-index: 31;
   padding: 3px;
}

/* fabric wall */

 #m2 {
    width: 30vw;
    margin: 0 0 0 5vw;
 }

 /* hand */
 #m1 {
    width: 14vw;
    margin: 21vh 0 0 0;
 }

/* wires */
 #m3 {
    width: 17vw;
    margin: 40vh 0 0 18vw;
 }

 /* bracelet */
 #m4 {
    width: 16vw;
    margin: 20vh 0 0 12vw;
 }

 #caption {
    position: relative;
    top: 71vh;
    left: 0vw;
    z-index: 30;
    background-color: #ffffff;
    display: inline-block;
}

/* .container {
   padding: 20px;
   margin: 10px;
   border: 1px solid #000;
} */
.words, .sentence {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.word {
   padding: 3px 7px;
   border: 1px solid #000;
   background-color: rgba(255,255,255,.7);
   cursor: pointer;
}
.word-bank {
   display: inline-block;
   /* width: 30%; */
}
#word-bank-selection{
   padding: 10px;
   position: relative;
   top: 90vh;
   z-index: 30;
   background-color: rgba(255,255,255,.4);
   border: 1px solid rgba(0,0,0,.4);
}
#sentence-container{
   position: relative;
   top: 40vh;
   z-index: 30;
   width: 80%;
   text-align: center;
}


#head-box, #foot-box{
   display: none;
}
@media screen and (max-width: 900px) {
   #word-bank-selection{
      top: 77vh;
   }
}

@media screen and (max-width: 820px) {
   #word-bank-selection{
      top: 60vh;
   }
   main{
      margin: 0 10vw;
      width: 90vw;
   }
}