style.css

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

body {
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'DM Mono', monospace;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 2.5px, transparent 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 2.5px, transparent 3px),
    radial-gradient(circle at 48.7% 44.3%, rgb(30, 144, 231) -1.5%, rgb(56, 113, 209) 50%, rgb(38, 76, 140) 101.5%);
  background-size: 
    40px 40px,
    40px 40px,
    cover;
}

.card-list {
  display: flex;
  padding: 3rem;
  flex-direction: column;
  overflow-y: scroll;
  overflow: hidden;
  align-items: center;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(18, 37, 67);
  border-radius: 10px;
  box-shadow: inset 2px 2px 2px hsla(0, 0%, 90%, 0.2), inset -2px -2px 2px rgba(0,0,0,.20);
}
::-webkit-scrollbar-track {
  background: linear-gradient(90deg,rgb(18, 37, 67),rgb(18, 37, 67) 1px,rgb(11, 25, 46) 0,rgb(11, 25, 46));
}

.card {
  display: flex;
  position: relative;
  flex-direction: column;
  max-width: 80vw;
  width: 30em;
  height: 30em;
  min-width: 275px;
  padding: 1.5rem;

  border-radius: 16px;
  background: rgb(18, 37, 67);
  box-shadow: 0 0 2rem rgb(0, 0, 0, 0.6);

  transition: .3s;
  transition-timing-function: cubic-bezier(.25,1.38,.62,.94);
}

.card:hover { 
  scale: 1.07;
  filter: brightness(1);
  box-shadow: 0 0 3rem rgb(0, 0, 0, 0.3);
}
.card:hover~.card { transform: translateY(390px); }
.card-list:has(.card:hover) .card:not(.card:hover) {
  filter: brightness(0.75);
}

.card:not(:first-child) { margin-top: -390px; }

.flextwo { flex: 2; }
.flexfour { flex: 4; }
.flexone { flex: 1; }

.truthlie-container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin: 8px;
}

.truthlie-container button {
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 10px;
  color: #fff;
  line-height: 1.5;
  font-family: 'DM Mono';

  transition: .2s;
  transition-timing-function: ease;
}

.truthlie-container button:hover {
  background-color: rgb(255, 255, 255, 0.05);
}

.socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-content: center;
}

.socials a {
  height: 0.8rem;
  font-style: normal;
  font-weight: 500;
  font-size: .5rem;
  color: #ffffff;
  text-transform: uppercase;
  font-size: .66rem;
  border: 2px solid #ffffff;
  border-radius: 8px;
  padding: .2rem .85rem .25rem;
  position: relative;
  transition: .2s;
  transition-timing-function: ease;
}

.socials a:hover {
  background: linear-gradient(315deg,rgb(30, 144, 231),rgb(103, 184, 246));
  text-shadow: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-clip: text;
  border-color: rgb(71, 160, 228);
}
.hidden {
  display: none;
}