/*
  NAME: Pearl Chen
  CS 132 Spring 2023

  Factoring out all color styles to keep track of palette
*/

/* ------------------ Landing Screen Colors ------------------- */

#sound-menu {
  background-color: black;
}

button,
#sound-menu * {
  color: blanchedalmond;
}

/* ------------------ Welcome Screen Colors ------------------- */

#char-creation-view,
#welcome-view {
  background-image: linear-gradient(rgb(21 112 116), rgb(173 206 255), rgb(235, 235, 235));
}

* {
  color: rgb(45, 108, 133);
}

button:hover {
  background-color: rgba(141, 202, 252);
}

button:hover,
.user-msg > p {
  color: white;
}

.popup, .oval {
  background-color: rgba(248, 248, 248, 0.8);
}

.friend-msg > p {
  background-color: white;
}

.user-msg > p,
button {
  background-color: rgb(60, 134, 156);
}

h1,
h3 {
  /* Making the text have a gradient clipping mask fill */
  /* Source: https://cssgradient.io/blog/css-gradient-text/ */
  background: -webkit-linear-gradient(rgb(255, 249, 249) 5%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#chats-list > div:first-child,
#chat {
  background-color: rgb(238, 238, 238);
}

#chats-list > div {
  background-color: rgba(248, 248, 248);
}

/* ---------------------- In Game Colors ---------------------- */

#dino-game {
  background-color: rgb(239, 231, 220);
}

#game-start-msg > *,
h4 {
  color: rgb(113, 12, 26);
}

/* Set board cards */
.card {
  background-color: white;
  border: 2px solid rgb(227, 220, 220);
}

.card.selected {
  box-shadow: 0px 0px 7px black;
}