@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:wght@100..900&display=swap');


* {
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #1e1e2e;
  color: #cdd6f4;
  padding: 0;
  padding-bottom: 5em;
  margin: 0;
  border-width: 0;
}

a {
  text-decoration: none;
  color: #cdd6f4;
}

a:hover {
  color: #cba6f7;
  transition: color 0.31s;
}

:root {
  --img_size: 29em;
  --img_padding: 2em;
  --img_bottom_margin: 2em;
  --img_border_size: 1em;
  --stripe_height: calc(var(--img_size) * 2 / 3);
}

@media (max-width: 912px) and (orientation: portrait) {
  :root {
    --img_size: 90vw;
    --img_padding: 2em;
    --img_bottom_margin: 2em;
    --img_border_size: 1em;
    --stripe_height: calc(var(--img_size) * 2 / 3);
  }
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #11111b, #11111b, #11111b00);
  width: calc(100% - 31px * 2);
  height: auto;
  padding: 23px 31px 50px 31px;
}


.topbar div {
  width: max(16.5em, 40vw);
}

.topbar span {
  width: 10em;
  text-align: center;
}

.topbar a {
  font-size: 2em;
  color: #cdd6f4;
  text-decoration: none;
  margin: 0 0.5em;
}

.topbar a:hover {
  color: #cba6f7;
  transition: color 0.31s;
}

@media (max-width: 912px) and (orientation: portrait) {
  .topbar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.photo {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;

}

.photo div {
  flex-grow: 9999;
}

.photo #photo {
  width: max(var(--img_size), 30%);
  height: var(--img_size);
  /* background-color: #6c7086; */
}


.photo img {
  height: calc(var(--img_size) - 2*var(--img_border_size));
  border-radius: 50%;
  border: var(--img_border_size) solid #11111b;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); */
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  position: relative;
  left: calc(100%/2 - max(var(--img_size), 30%)/2);
  bottom: calc(var(--img_size) * 2/3);

  z-index: 2;
}

.photo #img_stripe {
  background-color: #11111b;
  width: 100%; 
  height: calc(var(--img_size) * 2/3);
  position: relative;
  top: calc(var(--img_size) * 1/6);
  z-index: 1;
}


.name_stripe {
  width: 62%;
  height: calc(var(--img_size) * 2/3);
  background-color: #11111b;
  align-content: center;
  justify-content: left;
  padding-left: 20px;
  box-sizing: border-box;
}


.name_stripe span {
  font-size: 1.3em;
}

.name_stripe b {
  font-size: 2em;
}


/*
#name_on_stripe {
  padding-left: calc(var(--img_size) / 2 + 2em);
}
*/

#name_on_stripe span {
  transition: color 0.31s;
}
#name_on_stripe span:hover {
  color: #cba6f7;
}

.abilities img {
  height: 3cm;
}

.abilities {
  /* width: 100%; */
  justify-items: center;
  text-align: center;
}

.ability_list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.ability_icon {
  margin: 2em 2em;

}

.ability_icon img:hover {
  /*
  * HSL from old is 226.15deg 63.93% 88.04%
  * HSL from new is 267.41deg 83.51% 80.98%
  */
  transition-duration: 0.31s;
  filter: brightness(91.98%) saturate(127.50%) hue-rotate(41.26deg)  drop-shadow( 0 0 17px #cba6f7);
}

.ability_icon b {
  font-size: 1.5em;
}

#software {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  justify-items: center;
  align-items: center;
  justify-content: center;
}