.frame-child,
.introduction-child {
  position: relative;
  object-fit: cover;
}
.introduction-child {
  width: 1920px;
  height: 907px;
  display: none;
  max-width: 100%;
}
.frame-child {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  z-index: 1;
}
.introduction-inner {
  width: 1062px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
}
.introduction,
.pikachubolk {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.pikachubolk {
  margin: 0;
  width: 1062px;
  position: relative;
  font-size: inherit;
  font-weight: 900;
  font-family: inherit;
  justify-content: center;
  text-shadow: -10px 10px 0#3f3f3f;
  z-index: 1;
}
.introduction {
  align-self: stretch;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  padding: 197px var(--padding-xl) 255px;
  box-sizing: border-box;
  background-image: url(./public/rectangle-1@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: center;
  font-size: 128px;
  color: var(--color-gray);
  font-family: var(--font-inter);
}
.about-me,
.aboutmebg {
  position: relative;
  max-width: 100%;
}
.aboutmebg {
  width: 1831px;
  height: 383px;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  display: none;
}
.about-me {
  flex: 1;
  font-weight: 900;
  display: inline-block;
  z-index: 1;
}
.about-me-wrapper {
  width: 707px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 1px;
  box-sizing: border-box;
  max-width: 100%;
}
.hello-my-name {
  margin: 0;
  width: 1763px;
  position: relative;
  font-size: var(--font-size-17xl);
  display: inline-block;
  max-width: 100%;
  z-index: 1;
}
.aboutmebg-parent {
  align-self: stretch;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 29px var(--padding-xl) 94px 34px;
  box-sizing: border-box;
  gap: 28px;
  max-width: 100%;
}
.aboutmebg1,
.song-history {
  position: relative;
  max-width: 100%;
}
.aboutmebg1 {
  width: 1831px;
  height: 624px;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  display: none;
}
.song-history {
  width: 705px;
  font-weight: 900;
  display: flex;
  align-items: center;
  z-index: 1;
}
.frame-item {
  width: 200px;
  height: 200px;
  border-radius: var(--br-xl);
  background-color: var(--color-gainsboro);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px; /* Center and add some space at the bottom */
}
.album-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--br-xl);
}
.historywidget-inner {
  align-self: stretch;
  height: 261px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-mid);
  box-sizing: border-box;
}
.song-artist,
.song-name {
  align-self: stretch;
  position: relative;
  font-weight: 900;
}
.song-artist {
  font-size: var(--font-size-5xl);
}
.historywidget,
.song-name-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.song-name-parent {
  align-self: stretch;
  gap: var(--gap-8xl);
}
.historywidget {
  flex: 1;
  box-shadow: -20px 20px 4px rgba(0, 0, 0, 0.25);
  background-color: var(--color-darkslategray);
  overflow: hidden;
  padding: var(--padding-8xl) var(--padding-32xl) var(--padding-28xl)
    var(--padding-33xl);
  box-sizing: border-box;
  gap: var(--gap-mini);
  min-width: 315px;
  max-width: 100%;
  z-index: 1;
}
.frame-inner {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-xl);
  background-color: var(--color-gainsboro);
}
.historywidget-child {
  align-self: stretch;
  height: 261px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-mid);
  box-sizing: border-box;
}
.song-artist1,
.song-name1 {
  align-self: stretch;
  position: relative;
  font-weight: 900;
}
.song-artist1 {
  font-size: var(--font-size-5xl);
}
.historywidget1,
.song-name-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.song-name-group {
  align-self: stretch;
  gap: var(--gap-8xl);
}
.historywidget1 {
  flex: 1;
  box-shadow: -20px 20px 4px rgba(0, 0, 0, 0.25);
  background-color: var(--color-darkslategray);
  overflow: hidden;
  padding: var(--padding-8xl) var(--padding-32xl) var(--padding-28xl)
    var(--padding-33xl);
  box-sizing: border-box;
  gap: var(--gap-mini);
  min-width: 315px;
  max-width: 100%;
  z-index: 1;
}
.rectangle-icon {
  height: 261px;
  width: 261px;
  position: relative;
  border-radius: var(--br-xl);
}
.frame-div {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-mid);
}
.song-artist2,
.song-name2 {
  align-self: stretch;
  position: relative;
  font-weight: 900;
}
.song-artist2 {
  font-size: var(--font-size-5xl);
}
.historywidget2,
.song-name-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.song-name-container {
  align-self: stretch;
  gap: var(--gap-8xl);
}
.historywidget2 {
  flex: 1;
  box-shadow: -20px 20px 4px rgba(0, 0, 0, 0.25);
  background-color: var(--color-darkslategray);
  overflow: hidden;
  padding: var(--padding-8xl) var(--padding-32xl) var(--padding-28xl)
    var(--padding-33xl);
  box-sizing: border-box;
  gap: var(--gap-mini);
  min-width: 315px;
  max-width: 100%;
  z-index: 1;
}
.rectangle-div {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-xl);
  background-color: var(--color-gainsboro);
}
.historywidget-inner1 {
  align-self: stretch;
  height: 261px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-mid);
  box-sizing: border-box;
}
.song-artist3,
.song-name3 {
  align-self: stretch;
  position: relative;
  font-weight: 900;
}
.song-artist3 {
  font-size: var(--font-size-5xl);
}
.song-name-parent1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xl);
}
.historywidget-parent,
.historywidget3 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.historywidget3 {
  flex: 1;
  box-shadow: -20px 20px 4px rgba(0, 0, 0, 0.25);
  background-color: var(--color-darkslategray);
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-8xl) var(--padding-32xl) var(--padding-28xl)
    var(--padding-33xl);
  box-sizing: border-box;
  gap: var(--gap-mini);
  min-width: 315px;
  z-index: 1;
}
.historywidget-parent {
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-31xl);
  text-align: center;
  font-size: var(--font-size-13xl);
}
.aboutmebg-group,
.sidea {
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  max-width: 100%;
}
.aboutmebg-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xl) var(--padding-25xl) var(--padding-29xl);
  box-sizing: border-box;
  gap: 44px;
}
.sidea {
  width: 874px;
  height: 937px;
  position: relative;
  display: none;
}
.im-currently,
.online {
  margin: 0;
}
.online {
  color: #00ff29;
}
.status-online {
  color: green;
}

.status-idle {
  color: yellow;
}

.status-dnd {
  color: red;
}

.status-offline {
  color: gray;
}
.im-currently-online-txt-container {
  width: 100%;
}
.im-currently-online {
  width: 769px;
  position: relative;
  font-weight: 900;
  display: flex;
  align-items: center;
  max-width: 100%;
  z-index: 1;
}
.currentsong,
.im-listening-to {
  margin: 0;
}
.im-listening-to-currentson-container1 {
  width: 100%;
}
.im-listening-to-currentson-container {
  width: 769px;
  position: relative;
  font-weight: 900;
  display: flex;
  align-items: center;
  max-width: 100%;
  z-index: 1;
}
.footer {
  flex: 1;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 49px var(--padding-xl) 615px 53px;
  box-sizing: border-box;
  gap: 99px;
  min-width: 568px;
  min-height: 937px;
  max-width: 100%;
}
.my-life,
.sideb {
  position: relative;
  max-width: 100%;
}
.sideb {
  width: 874px;
  height: 937px;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  display: none;
}
.my-life {
  flex: 1;
  font-weight: 900;
  display: inline-block;
  z-index: 1;
}
.my-life-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 23px;
  box-sizing: border-box;
  max-width: 100%;
}
.age-currentage,
.county-currentcountry,
.fav-song-currentfavsong,
.relationship-status-current {
  align-self: stretch;
  position: relative;
  font-weight: 900;
  z-index: 1;
}
.age-currentage-parent,
.footer-parent,
.sideb-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.age-currentage-parent {
  align-self: stretch;
  flex-direction: column;
  gap: 35px;
  font-size: var(--font-size-17xl);
}
.footer-parent,
.sideb-parent {
  max-width: 100%;
}
.sideb-parent {
  flex: 0.9888;
  box-shadow: -20px 20px 4px #3f3f3f;
  background-color: var(--color-gray);
  flex-direction: column;
  padding: var(--padding-29xl) 41px 500px;
  box-sizing: border-box;
  gap: var(--gap-31xl);
  min-width: 568px;
  font-size: var(--font-size-29xl);
}
.footer-parent {
  flex: 1;
  flex-direction: row;
  gap: 67px;
}
.frame-group,
.frame-wrapper {
  align-self: stretch;
  display: flex;
  max-width: 100%;
}
.frame-wrapper {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 7px 0 9px;
  box-sizing: border-box;
  font-size: var(--font-size-17xl);
}
.frame-group {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 79px;
}
.frame-parent,
.slide-169-1,
.slide-169-1-inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent {
  flex: 1;
  flex-direction: column;
  gap: 85px;
  max-width: 100%;
}
.slide-169-1,
.slide-169-1-inner {
  box-sizing: border-box;
}
.slide-169-1-inner {
  align-self: stretch;
  flex-direction: row;
  padding: 0 45px 0 var(--padding-25xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.slide-169-1 {
  width: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 796px;
  gap: var(--gap-23xl);
  line-height: normal;
  letter-spacing: normal;
}
@media screen and (max-width: 1575px) {
  .footer,
  .sideb-parent {
    flex: 1;
  }
  .footer-parent {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1250px) {
  .introduction {
    padding-top: 128px;
    padding-bottom: 166px;
    box-sizing: border-box;
  }
  .aboutmebg-group {
    padding-left: var(--padding-3xl);
    padding-right: var(--padding-3xl);
    box-sizing: border-box;
  }
  .footer {
    padding-top: 32px;
    padding-bottom: 400px;
    box-sizing: border-box;
  }
  .sideb-parent {
    padding-top: var(--padding-12xl);
    padding-bottom: 325px;
    box-sizing: border-box;
  }
  .slide-169-1-inner {
    padding-left: var(--padding-3xl);
    padding-right: var(--padding-3xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 825px) {
  .pikachubolk {
    font-size: 51px;
  }
  .about-me {
    font-size: var(--font-size-19xl);
  }
  .hello-my-name {
    font-size: var(--font-size-10xl);
  }
  .song-history {
    font-size: var(--font-size-19xl);
  }
  .song-name,
  .song-name1,
  .song-name2,
  .song-name3 {
    font-size: var(--font-size-7xl);
  }
  .historywidget-parent {
    gap: var(--gap-6xl);
  }
  .aboutmebg-group {
    gap: 22px;
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-12xl);
    box-sizing: border-box;
  }
  .im-currently-online,
  .im-listening-to-currentson-container {
    font-size: var(--font-size-10xl);
  }
  .footer {
    gap: 49px;
    padding-left: 26px;
    padding-top: 21px;
    padding-bottom: 260px;
    box-sizing: border-box;
    min-width: 100%;
  }
  .my-life {
    font-size: var(--font-size-19xl);
  }
  .age-currentage,
  .county-currentcountry,
  .fav-song-currentfavsong,
  .relationship-status-current {
    font-size: var(--font-size-10xl);
  }
  .sideb-parent {
    padding-top: var(--padding-xl);
    padding-bottom: 211px;
    box-sizing: border-box;
    min-width: 100%;
  }
  .footer-parent {
    gap: 33px;
  }
  .frame-group {
    gap: 39px;
  }
  .frame-parent {
    gap: var(--gap-23xl);
  }
  .slide-169-1 {
    gap: var(--gap-2xl);
  }
  
}
@media screen and (max-width: 450px) {
  .pikachubolk {
    font-size: var(--font-size-13xl);
  }
  .introduction {
    padding-top: 83px;
    padding-bottom: 108px;
    box-sizing: border-box;
  }
  .about-me {
    font-size: var(--font-size-10xl);
  }
  .hello-my-name {
    font-size: var(--font-size-3xl);
  }
  .aboutmebg-parent {
    padding-top: var(--padding-xl);
    padding-bottom: 61px;
    box-sizing: border-box;
  }
  .song-history {
    font-size: var(--font-size-10xl);
  }
  .song-artist,
  .song-name {
    font-size: var(--font-size-lgi);
  }
  .historywidget {
    padding: var(--padding-xl) var(--padding-xl) var(--padding-12xl);
    box-sizing: border-box;
  }
  .song-artist1,
  .song-name1 {
    font-size: var(--font-size-lgi);
  }
  .historywidget1 {
    padding: var(--padding-xl) var(--padding-xl) var(--padding-12xl);
    box-sizing: border-box;
  }
  .song-artist2,
  .song-name2 {
    font-size: var(--font-size-lgi);
  }
  .historywidget2 {
    padding: var(--padding-xl) var(--padding-xl) var(--padding-12xl);
    box-sizing: border-box;
  }
  .song-artist3,
  .song-name3 {
    font-size: var(--font-size-lgi);
  }
  .historywidget3 {
    padding: var(--padding-xl) var(--padding-xl) var(--padding-12xl);
    box-sizing: border-box;
  }
  .im-currently-online,
  .im-listening-to-currentson-container {
    font-size: var(--font-size-3xl);
  }
  .footer {
    gap: var(--gap-6xl);
  }
  .my-life {
    font-size: var(--font-size-10xl);
  }
  .age-currentage,
  .county-currentcountry,
  .fav-song-currentfavsong,
  .relationship-status-current {
    font-size: var(--font-size-3xl);
  }
  .age-currentage-parent {
    gap: var(--gap-mid);
  }
  .sideb-parent {
    gap: var(--gap-6xl);
  }
  .footer-parent {
    gap: var(--gap-mid);
  }
  .frame-group {
    gap: 20px;
  }
  .frame-parent {
    gap: var(--gap-2xl);
  }
}