:host {
  --themeColor06: rgb(86, 175, 52); /* Contrast: rgb(65, 96, 41) */
}

[class^="profileHeader"] {
  font-family: 'wolfgang-rough-vintage', 'sans-serif';
}

.profileHeaderLogo {
  position: absolute;
  top: 0;
  right: 0;
  grid-area: profileHeaderLogo;
  width: calc(0.21 * var(--artistProfileWidth));
  height: calc(0.21 * var(--artistProfileWidth));
  background-image: url('/images/illumination/illumination.avif');
  background-size: calc(0.555 * var(--artistProfileWidth)) calc(0.21 * var(--artistProfileWidth));
  background-position: calc(0.132 * var(--artistProfileWidth) * -1) 0;
  background-repeat: no-repeat;
}

.profileHeaderText1 {
  position: relative;
  grid-area: profileHeaderText1;
  line-height: 1;
}

.profileHeaderText2 {
  position: relative;
  grid-area: profileHeaderText2;
  line-height: 1;
}

.word-1 {
  position: absolute;
  bottom: 0;
  left: calc(0.018 * var(--artistProfileWidth));
  color: var(--themeColor06);
  font-size: calc(0.147 * var(--artistProfileWidth));
}

.word-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  color: rgb(96, 36, 129);
  font-size: calc(0.147 * var(--artistProfileWidth));
}

.word-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: rgb(220, 18, 49);
  font-size: calc(0.235 * var(--artistProfileWidth));
  transform: translateY(calc(0.024 * var(--artistProfileWidth)));
}

.year {
  position: absolute;
  bottom: calc(0.044 * var(--artistProfileWidth));
  right: 0;
  display: block;
  color: var(--themeColor06);
  font-size: calc(0.0919 * var(--artistProfileWidth));
  font-weight: 700;
  transform-origin: center;
  transform: rotate(270deg) translate(calc(0.029 * var(--artistProfileWidth)), calc(0.055 * var(--artistProfileWidth))); 
}

.profileHeaderArrow {
  position: absolute;
  bottom: 0;
  left: 0;
  grid-area: profileHeaderArrow;
  width: calc(0.213 * var(--artistProfileWidth));
  height: calc(0.151 * var(--artistProfileWidth));
  background-image: url('/images/illumination/illumination.avif');
  background-size: calc(0.555 * var(--artistProfileWidth)) calc(0.21 * var(--artistProfileWidth));
  background-position: calc(0.342 * var(--artistProfileWidth) * -1) 0;
  background-repeat: no-repeat;
}

.space {
  display: inline-block;
}

.profileFooter .socialLinksList {
  margin: 0;
  padding: calc(0.022 * var(--artistProfileWidth)) 0 calc(0.022 * var(--artistProfileWidth)) calc(0.011 * var(--artistProfileWidth));
  list-style-type: none;  
}

.profileFooter {
  position: relative;
  padding-right: calc(0.011 * var(--artistProfileWidth));
  grid-area: profileFooter;
}

.profileFooter .socialLinksList li {
  display: inline-block;
  min-width: calc(0.243 * var(--artistProfileWidth));
  font-family: 'wolfgang-rough-vintage', 'sans-serif';
  font-size: calc(0.0294 * var(--artistProfileWidth));
  color: rgb(96, 36, 129);
}

.profileFooter .socialLinksList svg {
  display: inline-block;
  width: calc(0.052 * var(--artistProfileWidth));
  height: calc(0.052 * var(--artistProfileWidth));
  margin-right: calc(0.011 * var(--artistProfileWidth));
  background-color: rgb(96, 36, 129);
  border-radius: 50%;
  vertical-align: middle;
}

.profileFooter .socialLinksList li.email {
  margin-left:  calc(0.05 * var(--artistProfileWidth));
}

.profileFooter .socialLinksList li.email::before {
  content: '＠';
  display: inline-block;
  width: calc(0.052 * var(--artistProfileWidth));
  height: calc(0.052 * var(--artistProfileWidth));
  margin-right: calc(0.011 * var(--artistProfileWidth));
  line-height: calc(0.061 * var(--artistProfileWidth) * 1.04);
  color: rgb(255, 255, 255);
  background-color: rgb(96, 36, 129);
  font-size: calc(0.039 * var(--artistProfileWidth));
  text-align: center;
  border-radius: 50%;
  vertical-align: middle;
}

.profileFooter .socialLinksList li a {
  color: rgb(96, 36, 129);
}

.profileFooter .socialLinksList li .space {
  width:calc(0.006 * var(--artistProfileWidth));
}

.profileFooterParagraph {
  width: max(calc(100% - 36px), 92%);
  margin: 0;
  padding: 0 0 0 calc(0.022 * var(--artistProfileWidth));
  font-family: 'wolfgang-rough-vintage', 'sans-serif';
  font-size: calc(0.066 * var(--artistProfileWidth));
  color: rgb(255, 255, 255);
  background-color: rgb(96, 36, 129);
}

.profileFooterParagraph .space {
  width: calc(0.011 * var(--artistProfileWidth));
}

.profileFooterCredit {
  position: absolute;
  bottom: 0;
  left: 100%;
  display: none; /* inline-block; */
  margin: 0;
  padding: 9px 0 3px 0;
  color: rgb(31, 31, 31);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  transform-origin: bottom left;
  transform: rotate(-90deg);
}

.profileFooterCredit:hover {
  text-decoration: underline;
}

@media only screen and (width <= 640px) {
  .profileFooterParagraph .space {width: 6px;}
}