:root {
  --parchment: #f4e6c3;
  --parchment-dark: #e6d3a3;

  --gold: #e6d499;
  --gold-bright: #d4af37;

  --ink: #0f3b0b;
  --bronze: #4a3212;

  --card-bg: rgba(246, 237, 211, 0.25); /*#F7EDD4;*/
  --card-data: rgba(185, 174, 141, 0.35);

  --border: #8b6a2f;

  --link: #2f6f73;
  --link-hover: #3e6b3f;
}

body {
  display: grid;
  background-image: url(parchement.png);
  background-repeat: repeat;
  font-family: 'Arial', sans-serif;
  color: var(--ink);
  margin: 0px;
  margin-bottom: 40px;
  min-height: 100vh;
}

.mainMargin {
  margin: 20px;
}

.name {
  background: linear-gradient(
      60deg,
      #5c3d00 0%,
      #7a5413 12%,
      #926726 24%,
      #b07a24 36%,
      #c98622 48%,
      #ee9105 50%,
      #c98622 52%,
      #b07a24 64%,
      #926726 76%,
      #7a5413 88%,
      #5c3d00 100%
    );
    

  background-size: 200% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  animation: goldShift 5s linear infinite;
}

@keyframes goldShift {
  to {
    background-position: 200% center;
  }
}

.photo {
  width: 25vw;
  grid-area: photo;
}

.LB-logo {
  width: 25vw;
  grid-area: photo;
}

.LB-logo img {
  width: 25vw;
  grid-area: photo;
}

.LB-logo figcaption {
  width: 100%;
  text-align: center;
}

.about {
  margin-left: 10px;
  width: 75%;
}

.certifications {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 75%;
}

.certifications p {
  margin: 0;
}

.head { grid-area: head; }

.menu { 
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  margin: 0px;
  grid-area: menu;
  background-color: rgba(0, 0, 0, 0.05);
}

.pill {
  background-color: var(--gold);
  border-radius: 15px;
  padding: 5px;
  margin: 5px;
}

.main-section { 
  grid-area: main-section;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.intro {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.foot { 
  display: block;
  text-align: center;
  grid-area: foot;
}

.foot-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    'menu head head head head'
    'menu main-section main-section main-section photo'
    'menu foot foot foot foot';
}

.deck {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

@keyframes slideIn {
  from {
    transform: translateX(-60px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }
.card:nth-child(3) { animation-delay: 0.6s; }
.card:nth-child(4) { animation-delay: 0.8s; }
.card:nth-child(5) { animation-delay: 1.0s; }

.card {
  opacity: 0;
  animation: slideIn 0.6s ease-out forwards;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  display: grid;
  grid-template-rows: 50px auto 90px;
  flex-direction: row;
  flex-wrap: wrap;
  width: 200px;
  height: 250px;
  padding: 0px;
}

.card-head {
  background-color: var(--card-bg);
  border-radius: 15px;
  width: 95%;
}

.card-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 95%;
  height: 100%;
  padding: 0px;
  gap: 6px;
}

.card-foot {
  background-color: var(--card-bg);
  border-radius: 15px;
  justify-items: center;
  width: 95%;
  padding: 0px;
}

.card-data {
  background-color: var(--card-data);
  border-radius: 15px;
  height: 20px;
  padding: 0px 6px;
}

.language-bar {
  display: flex;
  width: 95%;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  margin: 5px;
}

.language-bar-label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 95%;
  height: 16px;
  margin-bottom: 20px;
}

.lang {
  height: 100%;
}

.lang-legend {
  height: 100%;
  width: 5%;
}

.react {
  background-color: #3178c6;
}

.react-native {
  background-color: #dea584;
}

.typescript {
  background-color: #f1e05a;
}

.tailwind {
  background-color: #563d7c;
}

.rust {
  background-color: #dea584;
}

.python {
  background-color: #1d8548;
}

.java {
  background-color: #f8981d;
}

.swift {
  background-color: #f05133;
}

.html-css {
  height: 500px;
  margin-left: auto;
}