.buttons, .prj {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    box-shadow: inset 0, 0, 0, 10px var(--text-color);
    margin-left: -5px;
}

.buttons > a {
    color: var(--text-color);
    cursor: grab;
    padding: 8px 10px;
    font-size: 14px;
    border: 2px solid ;
    border-color: var(--gray-color);
    border-radius: 6px;
    user-select: none;
    margin: 5px 0 0 5px;
    flex: 1 0 calc(25% - 32px);
    text-align: center;
    background: var(--gray-color);
    transition: transform 0.2s ease;
    box-shadow: inset 0 0 20px var(--black-color), 0 0 10px var(--black-color);  
}

.buttons > a:focus {
    background: var(--focus-color);
}

.buttons > a:hover {
  transform: scale(1.1);
  border-color: var(--green-color);
  box-shadow: inset 0 0 5px var(--green-color), 0 0 10px var(--green-color), inset 10px 5px 20px var(--green-color), inset -10px 0px 20px var(--green-color);
}

.buttons > a:active {
  color: var(--text-color);
  border-color: none;
  box-shadow: 0 0 20px var(--green-color);
  background: var(--green-color);
  transform: scale(1.1);
}



.cards > div {
  border: 0.16em solid var(--gray-color);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 20px var(--black-color), 0 0 30px var(--black-color);
  transition: transform 0.2s ease;
  backdrop-filter: blur(2);
  background: var(--gray-color);
}


.card-name {
  display: flex;
  align-items: center;
  font-size: 90%;
  color: var(--text-color);
  cursor: grab;
}

.cards .link {
  color: var(--accentless-color);
  margin-left: auto;
  font-family: Doto;
}

.cards #symbol-icon {
  margin: 0 0 -3px -4px;
}

.cards > img {
  width: 31px;
  height: 31px;
  margin-left: 10px;
  margin-right: 8px;
  margin-bottom: -3px;
  

}

.sibranium-card:hover {
  background: url(/resource/snow.gif) no-repeat;
  background-position: center center;
  box-shadow: 0 0 0px var(--red-color);
  background-blend-mode: darken;
}

.rust-card:hover {
  background: url(/resource/crab.gif) no-repeat;

  background-position: right center;
  background-blend-mode:color-dodge;

}

.thk-card:hover {
  background: url(/resource/thk.gif) no-repeat;
  background-blend-mode: darken;
  background-position: center center;
  color: var(--text-color);
}

.card-red:hover  {
  transform: scale(1.1);
  background-color: var(--red-color);
  border-color: var(--red-color);
  box-shadow:  0 0 50px var(--red-color);
}

.card-blue:hover  {
  transform: scale(1.1);
  border-color: var(--blue-color);
  background-color: var(--blue-color);
  box-shadow:  0 0 50px var(--blue-color);
}

.card-purple:hover  {
  transform: scale(1.1);
  border-color: var(--purple-color);
  background-color: var(--purple-color);
  box-shadow:  0 0 50px var(--purple-color);
}

.card-copy:active  {
  transform: scale(1.2);
  border-color: var(--green-color);
  background-color: var(--green-color);
  box-shadow:  0 0 20px var(--green-color);
  
}

.cards p {
  margin: 5px 3px 13px 2px;
  font-size: 70%;
}