/* reset */
/* 1. Use a more-intuitive box-sizing model */
*,* ::before, ::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
margin: 0;
}

* {
padding: 0;
}



/* sky */
body {
  background-color: rgb(43, 227, 255);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}



/* overall tower placement, container for roof, floors, and foundation */
.tower {  
  margin: 10% 10% 0%;
  display: flex;
  flex-direction: column;
}



.roof {
  background-image: url(../../static/images/shingles.png);
  background-position: center bottom;
  background-size: 20rem;

  /* no way to change mask height/width it seems?? */
  /* added the mask image to the roof div to make it the right size*/
  mask-image: url(../../static/images/triangle_mask.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 0%;
  mask-position: center bottom;
}

/* styling the triangle image in the roof div used as a mask above */
.roof > img {
  width: 100%;
  opacity: 0;
}



/* whole floor including walls */
.shop {
  margin-left: 3%;
  margin-right: 3%;

  border-left: 2rem #3c4843 solid;
  border-right: 2rem #3c4843 solid;
  border-bottom: 1rem #3c4843 solid;

  background-image: url(../../static/images/stone_brick.png); 
    /* don't think I can use flask inside of a css file */
  background-size: 20rem;

  min-height: 30vh; 
}



/* container for wares, wiz_image, and interaction bar */
.shop_interface {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;

  padding: 1rem;
}



/* wares */
h3 {
  background-color: rgb(217, 186, 148);
  padding: 1rem 2rem;
}

.shop_item_list {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;

  list-style-type: none;
  list-style-position: inside;
  background-color: rgb(217, 186, 148);
  margin: 1rem;
}

.shop_item_list > li {
  background-color: bisque;
  padding: 1rem 2rem;
}



/* extra wiz image + interaction bar flex 
container for first two text wizards and diff
styling for those two images */
.textGuy {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  flex: 1 1 30%;

  max-width: 60%;
}

.textGuy > .wiz_image {
  min-width: 12rem;
  max-width: 60%;
}



/* all wizard images */
.wiz_image {
  max-width: 50%;
  height: 100%;
}



/* wizard name and "interact" button */
.shop_interaction_bar {
  text-align: center;
  margin: 1rem;
}

.shop_owner {
  background-color: bisque;
  padding: 1rem 2rem;
}

button {
  padding: 1rem 2rem;

  background-color: rgb(32, 56, 86);
  color:white;
}

.shop_button {
  margin: 1rem;
}



.foundation {
  margin-left: 3%;
  margin-right: 3%;

  background-color: #697d75;
  height: 12rem;
}

.ground {
  background-color: green;
  height: 25rem;
}



.dialogue_popup_all {
  visibility: hidden;
  position: fixed;
  height: 100vh;
  width: 100vw;
  bottom: 0;
  
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.456);
}

.speaking_avatar {
  position: absolute;
  bottom: 28vh;
  left: 5vh;
  /* height: 30vh; */
  width: 40vw;
  max-width: 30%;
  z-index: -1;
}

.dialogue_box {
  position: inherit;
  bottom: 0;
  height: 30vh;
  width: 100vw;
  background-color: rgb(165, 136, 100);
  overflow-y: scroll;

  z-index: 2;
}

#close_dialogue_button {
  position: inherit;
  right: 0vh;
  bottom: 30vh;
}

.dialogue_p {
  /* height: 20vh; */
  padding: 2em;
  
}

.dialogue_buttons {
  display: flex;
  justify-content: space-evenly;
  padding-top: 1rem;
}

.item_list_for_shopping {
  /* position: fixed; */
  /* margin: auto; */
  /* top: 2vh; */
  margin: 20vh auto;
  width: 80vw;
  transition: 1s;
}

.item_list_for_shopping > li:hover {
  background-color: rgb(165, 136, 100);
  border: 0.2rem solid bisque;
}


.wizard_says_holder {
  padding: 2rem;
}

.response_holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  list-style-type: none;
}