@import url('https://fonts.googleapis.com/css2?family=Kulim+Park:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&family=Libre+Barcode+128+Text&family=Silkscreen:wght@400;700&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

.dashboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg_mask {
  background-color: rgba(0,0,0,0.65);
  inset: 0;
  height: 100dvh;
}

.lottie_bg {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
}

dotlottie-player {
  z-index: -1;
  opacity: 0.55;
}



.my_portfolio_hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100dvw;
  top: 20dvh;
}
.hero_text {
  font-family: "Libre Barcode 128 Text", serif;
  font-size: clamp(4rem, 8dvw, 10rem);
  color: white;
  margin: 0;
}

.mini_hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;

}

.mini_hero > p > * {
  font-family: "Ubuntu", sans-serif, serif;
  font-size: 1.2rem;
  font-weight: lighter;
  color: #80d780;
}

.mini_hero > p > :last-child {
  color: #ffffff;
}

.grid_tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1rem;

  position: absolute;

  top: 100%;
}

.grid_adj {
  gap: clamp(1rem, 3dvw, 5rem);
  margin: 3rem 3rem;
  padding: 1rem;
}

.tag_content {
  color: white;
  font-family: 'Kulim Park', sans-serif, 'Gill Sans', 'Gill Sans MT';
  font-weight: lighter;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag_buttons_content{
  display: flex;
  flex-direction: column;
  width: clamp(5rem, 3dvw, 3rem);
}

.tag_buttons_content > svg {
  width: clamp(30px, 3dvw, 55px);
}


.tag_buttons_content > p {
  font-family: 'Silkscreen', 'Ubuntu Sans Mono', sans-serif;
  padding: 0.35rem 0.6rem;
  margin: 0;
  font-size: clamp(0.7rem, 1dvw, 1rem);
}

.code_tag > *, .publications_tag > *, .geospatial_tag > * {
  color: white;
  transform: scale(1);
  transition: color 0.3s, transform 0.3s;
}

.code_tag:hover > * {
  transform: scale(1.2);
  color: #028fac
}

.publications_tag:hover > * {
  transform: scale(1.2);
  color: #E8AA42
}

.geospatial_tag:hover > * {
  transform: scale(1.2);
  color: #A530AC
}


.wrap {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 50%;
  font-size: clamp(10px, 1dvw, 1rem);
}


.grid_tags > .tag_content:nth-child(1) > .wrap {
  background-color: #025464;
}
.grid_tags > .tag_content:nth-child(2) > .wrap {
  background-color: #E8AA42;
}
.grid_tags > .tag_content:nth-child(3) > .wrap {
  background-color: #A530AC;
}