@font-face {
  font-family: "Ruigslay";
  src: url("../assets/fonts/Ruigslay.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Colors */
  --bg-body: rgb(29, 26, 37);
  --bg-card: rgb(19, 16, 16);
  --bg-lace: black;
  --border-gold: rgb(219, 196, 120);
  --accent-gold: rgb(224, 188, 68);
  --text-color: white;
  --shadow: rgb(79, 78, 83);

  /* Brand colors */
  --kofi-bg: white;
  --kofi-logo: url("../assets/images/kofi.png");

  --github-bg: black;
  --github-logo: url("../assets/images/github.png");

  --youtube-bg: rgb(221, 71, 71);
  --youtube-logo: url("../assets/images/youtube.png");

  --fiverr-bg: rgb(112, 207, 93);
  --fiverr-logo: url("../assets/images/fiverr.png");

  /* Sizes */
  --link-radius: 0.5rem;
  --link-height: 50px;
  --transition-speed: 0.2s;
  --padding-card: 20px;

  /* Font */
  --font-display: "Ruigslay", serif;
  --font-body: sans-serif;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  background: var(--bg-body);
  user-select: none;
}

body.dragging {
  cursor: grabbing !important;
}

body.dragging *:hover {
  pointer-events: none;
}

.card__keychain,
.card__lace {
    position: absolute;
    z-index: 2;
    background-size: cover;
    background-position: center;
}

.card__keychain {
    background-image: url("../assets/images/nene-chibi.png");
    width: 60px;
    height: 60px;
    cursor: grab;
}

.card__lace {
    background-color: var(--bg-lace);
    width: 2px;
    height: 150px;
    transform-origin: top;
}
.card__top-accessory{
  background-color: white;
  padding: 20px;
  z-index: -3;
  top: 0;
}
.card__bottom-accessory{
  background-color: white;
  padding: 20px;
  z-index: -3;
  top: 0;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-card);
    padding-top: 30px;
    background-color: var(--bg-body);
    min-width: 390px;
    max-width: 400px;
    border-radius: 0.875rem;
    box-shadow: 0 0 0 2px var(--shadow);
}

.card__header {
    position: relative;
    display: flex;
    align-self: flex-start;
    width: 100%;
}

.card__hero {
    position: absolute;
    inset: 0 0 30% 1.5%;
    border-radius: 10px;
    background: url("../assets/images/nene-banner.jpg") center / cover no-repeat;
    opacity: 0.9;
    z-index: 0;
}

.card__profile-picture {
    position: relative;
    min-width: 100px;
    min-height: 100px;
    background: url("../assets/images/Nene.png") center / contain no-repeat;
    margin-top: 30px;
    align-self: flex-start;
    border-radius: 0% 50% 0% 0%;
    border: 8px solid var(--bg-body);
}

.card__name {
    font-family: Ruigslay;
    display: flex;
    position: relative;
    margin-block: 5px 0px;
    margin-top: auto;
    color: rgb(255, 255, 255);
    font-size: xx-large;
}

.card__description {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: medium;
  color: var(--text-color);
  margin: 10px 20px 15px 25px;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.card__link {
  min-height: var(--link-height);
  width: 100%;
  margin: 5px 15px;
  border-radius: var(--link-radius);
  border: 2px solid var(--border-gold);
  background-color: var(--bg-card);
  transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.card__link:hover {
  background-color: var(--accent-gold);
  transform: translateX(-25px);
  cursor: pointer;
}

.kofi {
  background: var(--kofi-bg) center / 100px no-repeat var(--kofi-logo);
}

.github {
  background: var(--github-bg) center / 120px no-repeat var(--github-logo);
}

.youtube {
  background: var(--youtube-bg) center / 120px no-repeat var(--youtube-logo);
}

.fiverr {
  background: var(--fiverr-bg) center / 100px no-repeat var(--fiverr-logo);
}