@charset "UTF-8";

:root {
  --primary-color:#5c6bc0;
/* Primary color for your title */
  --secondary-color:#9fa8da;
/* Secondary color for your subtext */
  --font-family:Pattaya,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
/* Font family for the text */
  --title-size:3rem;
/* Responsive font size for the title */
  --subtext-size:1.5rem;
/* Responsive font size for the subtext */
}

* {
  box-sizing:border-box;
}

#status_value {
/* possibly modify this to incorporate online status in a cool way */
  display:none;
}

/* #region CONTENT CONTAINERS (ABOUT ME, FRIENDS, ...) */
#profile_about_me {
  max-width:1000px;
  width:100%!important;
}

#profile_friends {
  max-width:1000px;
  width:100%!important;
}

#profile_about_me_friends > .profile_section_content {
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* .profile_section_content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: center;
  max-width: 1000px !important;
} */
/* #endregion CONTENT CONTAINERS (ABOUT ME, FRIENDS, ...) */
/* #region PHOTO GALLERY */
#profile_photo_galleries > .profile_section_content {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:1000px;
  width:100%!important;
}

#profile_photo_galleries {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.photo_gallery > .images {
  display:flex;
  align-items:center;
  max-width:1000px;
  width:100%!important;
  gap:10px;
}

.photo_gallery {
  display:flex!important;
  flex-direction:column;
  align-items:center;
}

/* #endregion PHOTO GALLERY */
/* #region COMMENTS */
#profile_comments {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px;
}

#profile_comments > .profile_section_content {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:1000px;
  width:100%!important;
}

#new_comment {
  width:100%;
}

#new_comment_inputs {
  width:100%;
}

#user_comment_comment {
  width:100%;
}

#comments {
  width:100%;
}

.wall_post {
  padding-bottom:30px;
  margin-bottom:10px;
  padding:10px;
  background-color:#ffffff47;
/* border: black; */
  border-radius:10px;
  box-shadow:0 0 3px 2px rgb(0 0 0 / 6%);
}

.wall_post {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 0.7fr 1fr;
  gap:0 0;
  grid-auto-flow:row;
  grid-template-areas:"wall_post_avatar wall_post_info" "wall_post_avatar wall_post_time" "wall_post_body wall_post_body";
}

.wall_post_avatar {
  grid-area:wall_post_avatar;
}

.wall_post_info {
  grid-area:wall_post_info;
}

.wall_post_time {
  grid-area:wall_post_time;
}

.wall_post_body {
  grid-area:wall_post_body;
}

/* #endregion COMMENTS */
/* #region PROFILE HEADER */
/* #region hide stuff - profile header */
#avatar_holder {
  display:none;
}

#profile_header_container > .heading {
  display:none;
}

#blurb_container {
  display:none;
}

#last_login_string_container {
  display:none;
}

#unix_last_updated_container {
  display:none;
}

#status_label {
  display:none;
}

#member_type_value {
  display:none;
}

#member_message_value {
  display:none;
}

#show_message_dialog {
  display:none;
}

#show_message_dialog {
  display:none;
}

#status_value > a:last-of-type {
  display:none;
}

#status_value {
  font-size:0!important;
}

#member_status_value {
  font-size:10px;
}

/* #endregion hide stuff - header */
/* #region profile header positioning*/
#status_container {
  margin:0;
}

#profile_header_container {
  margin:0!important;
  padding:0!important;
}

#profile_header > .profile_section_content {
  margin:0!important;
  padding:0!important;
  width:fit-content;
  height:fit-content;
}

#profile_header_container {
  min-height:0!important;
}

#profile_header {
  width:fit-content;
  display:flex;
}

#profile > .profile_row:first-of-type {
  width:fit-content;
  display:flex;
}

/* #endregion header positioning*/
/* #region profile header styling*/
#profile_header > .profile_section_content > .profile_section_background {
  background-color:transparent!important;
}

/* #endregion profile header styling*/
/* #endregion PROFILE HEADER */
/* #region HOBBIES CLEANUP STYLING */
#profile_interests_content > div > .profile_section_background:first-of-type {
  display:none;
}

#profile_interests_content > div > div:nth-child(-n + 2) {
  display:none;
}

#profile_interests_content > .profile_section_content {
  margin:0;
  padding:0;
}

#hobbies_label {
  display:none!important;
}

#hobbies_container {
  margin:0!important;
  width:100%;
  display:flex;
}

#hobbies_value {
  width:100%!important;
  height:100%!important;
  margin:0!important;
}

/* #endregion HOBBIES STYLING */
/* #region ONLINE STATUS */
#status_value {
  box-sizing:border-box;
  text-decoration-style:none;
}

#member_status_value > a {
  box-sizing:border-box;
  color:black;
  text-decoration:none;
  text-decoration-style:none;
  -webkit-tap-highlight-color:transparent;
}

/*  #endregion ONLINE STATUS */
/* #region GENERAL STYLING  */
/* #region - header footer*/
#header_bar {
  display:none;
}

#footer_bar {
  display:none;
}

/* #endregion - header footer*/
body {
  padding:0!important;
  margin:0!important;
  background:radial-gradient(circle,rgba(181,63,251,0) 28%,rgba(19,13,41,0.05) 52%,rgba(59,23,45,0.12) 78%,rgba(38,7,13,0.2) 100%)!important;
  background-color:white!important;
  min-width:auto!important;
}

#profile_main_photo {
  display:none;
}

/* #endregion GENERAL STYLING  */
/* #region ABOUT ME */
.heading {
  font-size:2rem!important;
  color:var(--primary-color);
  font-family:var(--font-family);
  margin-bottom:20px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
}

#profile_about_me {
  max-width:1000px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
/* Define two columns */
  grid-gap:10px;
/* Space between grid items */
  font-family:var(--font-family);
}

#profile_about_me > :first-child {
  grid-column:1 / -1;
/* Make the first child span across all columns */
}

#profile_about_me > :not(:first-child) {
  grid-column:span 1;
/* Make all other children take up only one column */
  margin:0;
}

.profile_subsection > * {
  min-width:auto;
}

.profile_subsection .container {
  display:flex;
  padding:0 10px;
  margin-left:0;
}

#profile_about_me .container span:nth-child(2) {
  text-align:right;
}

.profile_subsection span {
  width:100%;
  display:inline;
  min-width:auto;
}

@media only screen and (max-width: 360px) {
  .container {
    font-size:3vw;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  body::-webkit-scrollbar {
    display:none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  body {
    -ms-overflow-style:none;
  /* IE and Edge */
    scrollbar-width:none;
  /* Firefox */
  }
}

/* #endregion ABOUT ME */
/* #region PHOTO GALLERY */
#photo_gallery_previews {
  margin:10px;
  text-align:center;
  display:inline-block;
}

#photo_gallery_previews > li {
  width:120px;
}

.photo_gallery .images {
  flex-wrap:wrap;
  justify-content:center;
}

/* #endregion PHOTO GALLERY */
.profile-page-container {
  display:flex;
  width:100%;
  height:100%;
  flex-direction:column;
  box-sizing:border-box;
  align-content:center;
  box-sizing:border-box;
  align-items:center;
  z-index:10;
}

/* #region Welcome container */
.welcome-container {
  max-width:1000px;
  width:100%;
  padding-top:20px;
  padding-bottom:20px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:0 0;
  grid-auto-flow:row;
  grid-template-areas:"profile-picture title-name" "profile-picture profile-introtext";
  font-family:"Raleway",sans-serif;
}

.profile-picture {
  grid-area:profile-picture;
  display:flex;
  margin:auto;
  padding:10px;
}

.profile-picture > img {
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  max-width:500px;
  max-height:500px;
  width:100%;
}

.welcome-grid-box {
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
  display:flex;
  align-items:center;
/* Center the content vertically */
  text-align:center;
/* Center the text */
  padding:20px;
/* Add some padding around the content */
}

.title-name {
  grid-area:title-name;
  align-content:flex-end;
}

.profile-introtext {
  grid-area:profile-introtext;
  align-content:flex-start;
}

.title-name-title {
  display:flex;
  height:fit-content;
}

.profile-introtext-text {
  display:flex;
  height:fit-content;
}

@media only screen and (max-width: 768px) {
  .welcome-container {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"title-name banana" "profile-picture banana" "profile-introtext banana";
  }
}

@media only screen and (max-width: 320px) {
  body {
    width:320px!important;
  }
}

/* #region GPT TEXT STYLING */
:root {
  --primary-color:#5c6bc0;
/* Primary color for your title */
  --secondary-color:#9fa8da;
/* Secondary color for your subtext */
  --font-family:Pattaya,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
/* Font family for the text */
  --title-size:3rem;
/* Responsive font size for the title */
  --subtext-size:1.5rem;
/* Responsive font size for the subtext */
}

.title-name {
  color:var(--primary-color);
/* Use the primary color for the title */
  font-family:var(--font-family);
}

.title-name-title {
  font-size:var(--title-size);
  font-weight:bold;
/* Make the title bold */
  text-transform:uppercase;
/* Uppercase letters for the title */
  letter-spacing:2px;
/* Add some spacing between letters */
  text-shadow:2px 2px 4px rgba(0,0,0,0.2);
/* Subtle text shadow for depth */
}

.profile-introtext {
  color:var(--secondary-color);
/* Use the secondary color for the subtext */
  font-family:var(--font-family);
}

.profile-introtext-text {
  font-size:var(--subtext-size);
  font-weight:normal;
  width:auto;
  max-width:600px;
/* Maximum width of the subtext box */
  opacity:.8;
/* Slightly transparent text for the subtext */
}

/* Responsive font sizes */
@media (max-width: 768px) {
  .title-name-title {
    font-size:2.5em;
  /* Smaller font size for smaller screens */
  }

  .welcome-container {
    padding-top:0;
  }

  .profile-introtext-text {
    font-size:1rem;
  }
}

/* #endregion GPT TEXT STYLING */
/* #endregion Welcome container */
/* #region Tips  */
.tip-container {
  padding-top:20px;
  font-family:var(--font-family);
}

.tip-container > div:first-child {
  font-size:2rem;
  color:var(--primary-color);
  font-family:var(--font-family);
  margin-bottom:20px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
/* Center the title text */
}

/* Tip box container styling */
.tips {
  display:grid;
  grid-template-columns:repeat(3,1fr);
/* Adjust the number of columns as necessary */
  gap:20px;
/* Space between the tip boxes */
  padding:0 20px;
/* Padding on the sides */
}

.tip-box {
  background-color:#fff;
  border:1px solid #eaeaea;
/* Very light grey border */
  border-radius:10px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  padding:15px;
  text-align:center;
/* Center the text inside the box */
  transition:transform .3s ease,box-shadow .3s ease;
  text-decoration:none;
/* Remove the underline from links */
  color:inherit;
/* Use the parent's text color */
  display:block;
/* Make the link fill the grid area */
}

.tip-box:hover {
  transform:translateY(-5px);
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
}

.tip-box span {
  font-weight:bold;
  color:var(--primary-color);
}

@media (max-width: 768px) {
  .tips {
    grid-template-columns:repeat(2,1fr);
  /* 2 items per row on smaller screens */
  }
}

/* #endregion Tips  */