:root {
  --c-violet-darker: rgb(66, 91, 255); /* global scope */
  --c-violet-dark: rgb(145, 160, 255); /* global scope */
  --c-violet-light:  rgb(203, 210, 255);
  --c-white-1: rgb(225, 232, 255);
  --c-grey-1: rgb(55, 71, 175);
}

.navbar-brand{
  border-bottom: solid var(--c-violet-darker);
}

body{
    background-color: var(--c-violet-light);
}

h3{
    font-weight: bold;
}


.bitcount-prop-double-cool {
  font-family: "Bitcount Prop Double", system-ui;
  font-size: 4rem;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

.rubik-puddles-regular {
  font-family: "Rubik Puddles", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 3.5rem;
  margin-bottom: 0;
  color: var(--c-violet-darker);
}

.bitcount-grid-single-ink {
  font-family: "Bitcount Grid Single Ink", system-ui;
  font-size: 4rem;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}


.post{
    background-color: white;
    color: var(--c-violet-dark);
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px 0 var(--c-violet-darker), 6px 20px 0 var(--c-violet-darker);
    font: small-caption;
    text-shadow: none;
}

.post-image {
    width: 100%;
    border-radius: 25px;
}

.post-rating{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.post-rating-container{
  display: flex;
}

.post-rating-container > div {
  background-color: var(--c-violet-light);
  border-radius: 10px;
  display: flex;
  margin: 5px;
  padding: 1px 10px;
}

.post-rating-container > div > h6 {
  margin-bottom: 0;
  font-weight: bold;
}

.post-rating-container > div > p {
  margin-bottom: 0;
}

.reply-field{
  width: 100%;
}

.mood > p{
  font-size: 3.5rem;
  margin-right: 50px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
   border: solid var(--c-violet-light);
}

.emoji-btn {
  font-size: 1.8rem;
  background: none;
  border: 3px solid transparent;
  border-radius: 12px;
  padding: 4px 8px;
  cursor: pointer;
  transition: transform 0.15s;
}
.emoji-btn:hover { transform: scale(1.2); }
.emoji-btn.selected { border-color: var(--bs-primary); transform: scale(1.15); }

.buttom-bar{
  align-items: center;
}

.buttom-bar > button{
  background-color: var(--c-violet-darker);
  color: white;
  border-radius: 12px;
  padding: 5px 20px;
  border: none;
}

.picture-grid{
  display: flex;
  flex-wrap: wrap;
}

.picture-item > img{
  width: 30vw;
}