/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
/* COLOURS
pink: 250, 217, 255
scrumpley pink: 255, 155, 182
scrumpley baby pink: 255, 215, 227
purple: 190, 155, 255
text: rgb(224, 93, 129);
*/

body {
  font-family: 'Pixelify Sans';
  background-image: url(images/pageBackground.png);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.chatboxManager {
  display: flex;
  max-width: 80vw;
  max-height: 40vh;
  position: fixed;
  left: 25px;
  width: 700px;
  height: 200px;
  bottom: 0px;
  pointer-events: none;
}

.chatButtonsManager {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}

.chatButtonsManager button {
  display: block;
  background-color: rgb(255, 215, 227);
  border: 2px solid rgb(255, 155, 182);
  padding: 2px 2px;
  margin: 2px 2px;
  text-align: center;
  align-self: center;
  font-size: medium;
  
  border-radius: 2px;
  font-family: 'Pixelify Sans';
  color: rgb(224, 93, 129);
}

.tagSelected {
  background-color: white !important;
}

.passwordManager {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: rgb(224, 93, 129);
  padding: 4px;
  background-color: rgb(255, 215, 227);
  border: 5px solid rgb(255, 155, 182);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  width: 200px;
  height: 150px;
  left: 
  
}

.chatbox {
  display: flex;
  flex-direction: column;
  padding: 15px;
  gap: 10px;
  position: fixed;
  border-bottom: 0px;
  border-radius: 10px;
  width: inherit;
  height: inherit;
  visibility: hidden;
  max-width: inherit;
  max-height: inherit;
  border: 6px solid rgb(255, 155, 182);
  background: rgba(255, 215, 227, .9);
  /*background-image: url(images/displayBackground.png);*/
  pointer-events: auto;
}


.chatboxIconClosed {
  position: absolute;
  width: 200px;
  bottom: 0px;
  pointer-events: auto;
}

.chatboxIconOpen {
  position: absolute;
  width: 200px;
  top: -35px;
  pointer-events: auto;
}

.chatText {
  display: block;
  font-size: x-large;
  color: rgb(224, 93, 129);
  text-shadow: -2px 0px 0px white;
  width: inherit;
  height: auto;
  max-width: calc(100% - 20px);
  max-height: inherit;
  top: 15px;
  right: 30px;
  left: 25px;
}


.blockManager { /* contains the display box and the selector boxes */
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100vw;
  height: 80vh;
}


.displayManager { /* contains the display of the avatar */
  display: flex;
  flex: 1 1 30%; /* grow, shrink, and base size */
  align-items: center;
  justify-content: center;
  border: 7px solid #be9bff;
  position: relative;
  border-radius: 10px;
  margin: 15px;
  padding: 10px;
  overflow: hidden;
  
}

.displayLayer { /* one of the layers / children of displayManager being displayed! */
  display: block;
  padding: 0px;
  margin: 0px;
  position: absolute;
  height: 100%;
  width: auto;
}

.favouriteButton {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  
}

.selectorManager {
  flex: 1 1 70%;
  /*background: #bae6ff;*/
  background-image: url("images/displayBackground.png");
  background-attachment: scroll;
  border: 7px solid #be9bff;
  overflow-y: auto;
  border-radius: 10px;
  margin: 15px;
  padding: 10px;
}

.selector { /* contains the data for the selector boxes, honestly kinda pointless, probably should delete? */
cursor: inherit;
}

.items-grid {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 2px;
  align-items: center;
}
  
.item {
  overflow: visible;
  border: 0px solid #be9bff;
  border-radius: 5px;
  align-self: stretch;
    
}