.profile-container {
  background-image: url('/img/Rough-Rock_2.jpg');
  background-size: cover;
  background-blend-mode: darken;
  color: #ff4dd5;
  background-color: var(--container);
  width: 90%;
  max-width: 800px;
  min-height: 30vh;
  padding: 20px;
  position: relative;
  flex: 1;
  max-width: 800px;
  margin-top: 50px;
  margin-bottom: 20px;
box-shadow:
  inset 5px 5px 0px rgba(0, 0, 0, 0.6),
  inset -5px -5px 0px rgba(255, 255, 255, 0.1),
  inset 0px 5px 0px rgba(0, 0, 0, 0.5),
  inset 0px -5px 0px rgba(255, 100, 255, 0.2);

  border: 20px solid transparent;
  border-image-source: url('/img/clouds/cloud-border.png');
  border-image-slice: 80; 
  border-image-outset:1;
  border-image-width: 20px;
  border-image-repeat: round;
  z-index:2;
}


.profile-inner-container {
  height:400px;
  overflow-y:scroll;
  background-image:url('/img/Rough-Rock_2.jpg');
  background-size:contain;
  background-blend-mode:overlay;
  margin:10px;
  padding:30px;
  background-color: #391aa1;
box-shadow:
  inset 5px 5px 0px rgba(0, 0, 0, 0.6),
  inset -5px -5px 0px rgba(255, 255, 255, 0.1),
  inset 0px 5px 0px rgba(0, 0, 0, 0.5),
  inset 0px -5px 0px rgba(255, 100, 255, 0.2);
  margin-left: 0; 
  text-align: left;
}
.profile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

.profile ul {
  margin-left:-20px;
}

.profile li {
  border: 2px solid #ff4dd5;
    box-shadow:
  -4px 0px 16px rgba(255, 0, 255, 0.5),
  -4px 0px 16px rgba(140, 0, 255, 0.4);
  background-image:url('/img/buttons/decorative/trippy.png');
  background-blend-mode:saturation;
  background-color:var(--bg);
  color:var(--container);
  margin:5px;
  list-style-type:none;
  padding:10px;
  word-wrap:break-word;
}

.profile-image-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.title-wrapper {
    width:20px;
    word-wrap:break-word;
}

 p.title {
  background-image:url('/img/buttons/decorative/trippy.png') !important;
  background-blend-mode:saturation;
  background:var(--bg);
  color:var(--container);
  padding:10px;
  box-sizing:border-box;
  margin:0;
  width:100%;
  animation-play-state:paused;
}

.profile-pic-wrapper {
  display: inline-block;
  background: #2dceeb;
  isolation: isolate;
  border: 2px solid #ff4dd5;
}

.profile-pic {
  display: block;
  mix-blend-mode: multiply;
  width: 200px;
  height: auto;
  box-shadow:
  -4px 0px 16px rgba(255, 0, 255, 0.5),
  -4px 0px 16px rgba(140, 0, 255, 0.4);
  border: 3px solid #ff4dd5;
}

.blink-flex {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

.blinkie {
  width:150px;
}

@media screen and (max-width: 780px) {
  .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  gap: 10px;
}
.profile-image-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile li {
  text-align:center;
}
}