@font-face {
  font-family: 'Pusab';
  src: url('../fonts/PUSAB___.otf');
}
:root {
  --dark-blue: #023E8A;
  --intense-gold: #995533;
  --dark-gold: #A1582C;
  --soft-gold: #C1743F;
  --just-gold: #FFC800;
  --light-gold: #B96C39;
  --dark-brown: rgba(147, 79, 39, 0.8);
  --hard-brown: #803E1E;
  --soft-brown: #BE6F3F;
  --just-black: #000000;
  --soft-gray: rgba(0, 0, 0, 0.5);
  --just-white: #FFFFFF;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Pusab", cursive;
}
body {
  background-color: var(--dark-blue);
}
.header__main-title {
  margin-top: 2rem;
  font-size: 3.6em;
  text-align: center;
  color: var(--just-white);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
}
.leaderboard-container {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leaderboard {
  width: 60vw;
  height: 75vh;
  overflow: auto;
  border: 5px solid var(--just-black);
}
.userCard {
  display: grid;
  grid-template-columns: 15% 85%;
}
.userCard--odd {
  background-color: var(--dark-gold);
}
.userCard--even {
  background-color: var(--soft-gold);
}
.userCard__y-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.userCard__x-container {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.userCard__icon {
  margin: 0 auto;
  margin-top: 1rem;
  width: 5rem;
}
.userCard__rank {
  margin-bottom: 1rem;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
  color: var(--just-gold);
}
.userCard__username {
  cursor: pointer;
  font-size: 3em;
  font-weight: bold;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
  color: var(--just-gold);
}
.userCard__stat {
  font-size: 1.8rem;;
  color: var(--just-white);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
}
.icon {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.icon--md {
  width: 25px;
  height: 25px;
}
.icon--lg {
  width: 36px;
  height: 36px;
}
.icon--star {
  background-image: url("../img/star.png");
}
.icon--diamond {
  background-image: url("../img/diamond.png");
}
.icon--coin {
  background-image: url("../img/coin.png");
}
.icon--silvercoin {
  background-image: url("../img/silvercoin.png");
}
.icon--demon {
  background-image: url("../img/demon.png");
}
.icon--cp {
  background-image: url("../img/cp.png");
}
.icon--leaderboard {
  margin-left: 0.56rem;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.45);
  transform: scale(0);
  transition: transform 0.36s;
}
.modal__content {
  width: 60vw;
  height: 75vh;
}
.modal__content--show {
  transform: scale(1);
}
.user-panel {
  display: grid;
  grid-template-columns: 90% 10%;
}
.user-panel {
  border: 4px solid var(--just-black);
  border-radius: 12px;
  outline: 3px solid var(--just-white);
  background-color: var(--intense-gold);
}
.user-panel__header-container {
  display: grid;
  grid-template-columns: 12% 88%;
}
.user-panel__rank-container {
  padding-left: 1rem;
  display: flex;
  align-items: center;
}
.icon--trophy {
  width: 36px;
  height: 36px;
  background-image: url("../img/trophy.png");
}
.user-panel__rank {
  margin-left: 0.25rem;
  font-size: 1.36em;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--just-white);
}
.user-panel__username-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-panel__username {
  font-size: 4.2em;
  text-align: center;
  color: var(--just-white);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--just-black);
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.4);
}
.user-panel__stats {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.36rem;
  justify-content: center;
}
.user-panel__stat-container {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  align-items: center;
}
.user-panel__stat {
  font-size: 1.85em;
  color: var(--just-white);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
.user-panel__user-icons-container {
  margin-top: 1.36rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-panel__user-icons-wrapper {
  width: 80%;
  padding: 0.8rem 3rem;
  border: 2px solid var(--hard-brown);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  background-color: var(--soft-brown);
}
.user-icon {
  display: inline-block;
}
.user-icon--cube {
  width: 57px;
  height: 57px; 
}
.user-icon--ship {
  width: 95px;
  height: 52px;
}
.user-icon--ball {
  width: 57px;
  height: 57px;
}
.user-icon--ufo {
  width: 67px;
  height: 57px;
}
.user-icon--wave {
  width: 64px;
  height: 45px;
}
.user-icon--robot {
  width: 49px;
  height: 57px;
}
.user-icon--spider {
  width: 79px;
  height: 57px;
}
.user-icon--death-effect {
  width: 57px;
  height: 57px;
}
.user-panel__comments-container {
  height: 17rem;
  margin-top: 1.36rem;
  display: flex;
  justify-content: center;
}
.user-panel__comments {
  width: 80%;
  height: 17rem;
  overflow: auto;
  border: 2px solid var(--hard-brown);
  border-radius: 12px;
  background-color: var(--soft-brown);
}
.user-panel__user-comment-wrapper {
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-panel__user-comment-wrapper--odd {
  background-color: var(--dark-gold);
}
.user-panel__user-comment-wrapper--even {
  background-color: var(--light-gold);
}
.user-panel__user-comment {
  width: calc(100% - 1.6rem);
  height: calc(100% - 1.6rem);
  padding: 0.8rem;
  border-radius: 12px;
  background-color: var(--dark-brown);
}
.user-panel__commenter-data-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-panel__commenter-username {
  font-size: 1.65em;
  color: var(--just-gold);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
}
.user-panel__likes-container {
  display: flex;
  gap: 0.56rem;
  justify-content: center;
  align-items: center;
}
.icon--like {
  background-image: url("../img/like.png");
}
.user-panel__likes {
  font-size: 1.6em;
  color: var(--just-white);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--just-black);
}
.user-panel__comment-content-container {
  height: 4rem;
  display: flex;
  align-items: center;
}
.user-panel__comment-content {
  font-size: 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--just-white);
}
.user-panel__comment-date-container {
  display: flex;
  justify-content: right;
}
.user-panel__comment-date {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--soft-gray);
}
/* Social-Media */
.user-panel__social-media-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.social-media {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-left: 0.25rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.social-media__youtube {
  margin-top: 0.8rem;
  background-image: url("../img/youtube.png");
}
.social-media__twitter {
  background-image: url("../img/twitter.png");
}
.social-media__twitch {
  background-image: url("../img/twitch.png");
}
/* /Social-Media */