/*mailbox */
#georgie-mail__wrapper {
  border: 10px solid var(--accent1);
  bottom: 0;
  box-shadow: 0 0 10px var(--dark1);
  color: var(--white2);
  height: 500px;
  position: fixed;
  right: 0;
  width: 350px;
  transform: translate(300px, 400px);
  z-index: 9999;
}

.mailbox,
.mailbox #georgie-mail__body {
  background-color: var(--accent4);
}

.mailbox #georgie-mail__body__inventory-wrapper,
.inventory #georgie-mail__body__mailbox-wrapper,
.inventory #georgie-mail__footer__mailbox-wrapper {
  display: none;
}

.inventory #georgie-mail__footer__inventory-wrapper {
  display: flex;
  align-items: center;
}

.inventory,
.inventory #georgie-mail__body,
.inventory #georgie-mail__footer {
  background-color: var(--dark1);
  color: var(--white1);
}

.inventory #inventory-reset-button {
  margin-left: 30px;
  height: 40px;
}

#georgie-mail__body__inventory-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

#georgie-mail__body__inventory-list li {
  height: 150px;
  margin: 0 5px 20px 5px;
  width: 45%;
}

#georgie-mail-send-mail-button {
  height: 75px;
}

.item {
  align-items: center;
  background: transparent;
  border: 5px solid var(--dark2);
  color: var(--white1);
  display: flex;
  flex-direction: column;
  height: 150px;
  padding: 10px;
  text-transform: uppercase;
  width: 100%;
}

.item:hover {
  border-color: var(--dark3);
  text-decoration: underline;
}

.sp-positioning-in {
  transform: translate(300px, 400px) !important;
  transition: transform 1.8s;
}

.sp-positioning-out {
  transform: translate(0, 0) !important;
  transition: transform 1.8s;
}

#georgie-mail__header {
  background-color: var(--accent1);
  /* border: 3px dotted var(--dark3);
  border-bottom: 0px;  */
  max-height: 50px;
}

#georgie-mail__header button {
  width: 100px;
  cursor: pointer;
}

.georgie-mail__tab {
  font-family: "Gantari";
  background-color: var(--black);
  color: var(--white1);
  border: 0;
  height: 50px;
  margin-top: 3px;
  width: 150px;
}

.georgie-mail__tab span {
  text-shadow: 0 0 3px var(--accent1);
}

.georgie-mail__tab:nth-child(2) {
  background-color: var(--accent4);
  color: var(--white1);
}

.georgie-mail__tab:nth-child(2) span {
  font-weight: 900;
}

#georgie-mail__header #georgie-mail__minmax {
  height: 50px;
  width: 50px;
}

#georgie-mail__header__inventory-btn {
  background-color: var(--dark1);
}

#georgie-mail__body {
  background-color: var(--dark2);
  border: 5px dashed var(--dark2);
  color: var(--white1);
  height: 300px;
  margin: 10px;
  overflow-y: scroll;
  padding: 10px;
}

#georgie-mail__footer {
  padding: 0px 10px;
  display: flex;
  flex-direction: row;
}

#georgie-mail__footer__mailbox-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#georgie-mail__footer textarea {
  flex: 1;
  font-size: 16px;
  height: 75px;
  resize: none;
  color: var(--white1);
  background-color: var(--accent4);
}

#georgie-mail__footer textarea::placeholder {
  color: var(--white1);
}

#georgie-mail__footer button {
  background-color: var(--dark2);
  color: var(--white1);
  text-transform: uppercase;
}

#georgie-mail__footer__resource-link {
  filter: drop-shadow(0 0 8px var(--accent3));
  position: absolute;
  top: 50px;
  right: 3px;
}

#georgie-mail__footer__resource-link:hover {
  filter: drop-shadow(0 0 8px var(--accent3));
}

.mail {
  background-color: var(--accent2);
  color: var(--black);
  padding: 15px;
  margin: 10px 0;
}

.mail a {
  color: var(--accent3);
  text-decoration: 2px underline var(--dark2);
}

.mail button {
  font-size: 16px;
  font-weight: bold;
  background-color: var(--accent3);
  border: 0;
  padding: 3px;
}

.mail button:hover {
  background-color: var(--accent3);
  color: var(--accent3);
}

.mail__name {
  color: var(--black);
  font-size: 1.5em;
  margin-bottom: 10px;
  padding-top: 10px;
  width: 100%;
}

.mail:last-of-type .mail__name {
  color: var(--black);
}

.mail__name.latest {
  color: var(--dark2);
}

.mail__date {
  color: var(--black);
  text-align: right;
  width: 100%;
}

.mail:last-of-type {
  border: 0 solid var(--dark2);
  -webkit-animation: borderAlert 2s linear;
}

.mail:not(.mail:last-of-type) {
  background-color: var(--accent1);
  color: var(--black);
  border: 1px dashed var(--accent3);
}

.mail button:not(.mail:last-of-type button) {
  background-color: var(--accent3);
  color: var(--black);
}

#georgie-mail__unread-btn,
#georgie-mail__new-item-btn {
  color: white;
  background-color: var(--accent3);
  border: 5px solid var(--accent4);
  border-radius: 40px 40px 0 40px;
  height: 90px;
  position: absolute;
  width: 80px;
  z-index: 999;
}

#georgie-mail__unread-btn:hover,
#georgie-mail__new-item-btn:hover {
  background-color: var(--accent2);
}

#georgie-mail__unread-btn {
  left: -60px;
  top: -74px;
}

#georgie-mail__new-item-btn {
  left: 165px;
  top: -74px;
}

.georgie-mail__unread-btn:hover {
  background-color: var(--accent4);
  border: 5px solid var(--white2);
}

/*mailbox */

/* animations */
@-webkit-keyframes borderAlert {
  50% {
    border-width: 5px;
  }
  100% {
    border-width: 0;
  }
}
/* animations*/

@font-face {
  font-family: "Gantari";
  src: url("/style/fonts/Gantari-Regular.ttf") format("truetype");
}