.categories {
  margin-top: 10vh;
}

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #272727;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color: whitesmoke;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #181818;
  color: #5fc4cd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #121212;
  color: #5fc4cd;
}

/* Style the tab content */
.tabcontent {
  padding: 6px 12px;
  height: 500px;
  border-top: none;
  overflow-y: scroll;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  padding-top: 50px;
}

.tabcontent::-webkit-scrollbar {
  width: 1em;
}

.tabcontent::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.tabcontent::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.messages__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.msg {
  display: flex;
  flex-direction: column;
}

.msg audio {
  width: 90%;
  display: none;
}

.msg__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.msg__right {
  color: gray;
  font-size: 1.1rem;
}

.msg__right a {
  color: gray;
}

.msg__right i {
  cursor: pointer;
}

.msg__img__wrp {
  position: relative;
}

.msg__img__wrp i {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: rgb(170, 168, 168);
}

.msg__img {
  width: 100%;
  background-color: #121212;
}

.msg__title {
  font-size: 1.1rem;
}

.msg__date {
  color: gray;
}

.books__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.book {
  display: flex;
  flex-direction: column;
}

.book audio {
  width: 90%;
  display: none;
}

.book__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.book__right {
  color: gray;
  font-size: 1.1rem;
}

.book__right a {
  color: gray;
}

.book__right i {
  cursor: pointer;
}

.book__img__wrp {
  position: relative;
}

.book__img__wrp i {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: gray;
}

.book__img {
  width: 100%;
}

.book__title {
  font-size: 1.1rem;
}

.book__date {
  color: gray;
}



.events__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.evt {
  display: flex;
  flex-direction: column;
}

.evt audio {
  width: 90%;
  display: none;
}

.evt__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.evt__right {
  color: gray;
  font-size: 1.1rem;
}

.evt__right a {
  color: gray;
}

.events__container a{
  color: gray;
  text-decoration: none;
}

.events__container .evt__title{
  color: whitesmoke;
}

.evt__right i {
  cursor: pointer;
}

.evt__img__wrp {
  position: relative;
}

.evt__img__wrp i {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: gray;
}

.evt__img {
  width: 100%;
}

.evt__title {
  font-size: 1.1rem;
}

.evt__date {
  color: gray;
}





.tstm__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.tstm {
  display: flex;
  flex-direction: column;
}

.tstm audio {
  width: 90%;
  display: none;
}

.tstm__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.tstm__right {
  color: gray;
  font-size: 1.1rem;
}

.tstm__right a {
  color: gray;
}

.tstm__right i {
  cursor: pointer;
}

.tstm__img__wrp {
  position: relative;
}

.tstm__img__wrp i {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: gray;
}

.tstm__img {
  width: 100%;
}

.tstm__title {
  font-size: 1.1rem;
}

.tstm__date {
  color: gray;
}

.tstm__container a{
  color: gray;
  text-decoration: none;
}

.tstm__container .tstm__title{
  color: whitesmoke;
  /* background-color: rgba(0, 0, 0, 0.753); */
}

.talk {
  background-image: url(../images/dalmatian-spots.svg);
  height: 300px;
  width: 100%;
  margin: 50px 0;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .messages__container {
    grid-template-columns: 1fr 1fr;
  }
  .books__container {
    grid-template-columns: 1fr 1fr;
  }
  .events__container{
    grid-template-columns: 1fr 1fr;
  }
  .tstm__container{
    grid-template-columns: 1fr 1fr;
  }
  .hero__bckImg {
    height: 200px;
    object-fit: cover;
  }
}

@media (max-width: 433px) {
  .messages__container {
    grid-template-columns: 1fr;
  }
  .books__container {
    grid-template-columns: 1fr;
  }
  .events__container{
    grid-template-columns: 1fr;
  }
  .tstm__container{
    grid-template-columns: 1fr;
  }
}