/*** PROFILE TEAR EFFECT ***/
.stats-upperTear {
	display: block;
    background: url(https://i.imgur.com/IHWiBko.png);
	background-color: var(--mainboard-bg);
    background-size: cover;
    background-position: center center;
    height: 15px;
	width: -webkit-fill-available;
}

.stats-lowerTear {
	display: block;
    background: url(https://i.imgur.com/W6skDwL.png);
    background-size: cover;
    background-position: center center;
    height: 15px;
	width: -webkit-fill-available;
	margin-bottom: 1rem;
}

.prof-lowerTear {
	display: block;
    background: url(https://i.imgur.com/k4NdfNG.png);
    background-size: cover;
    background-position: center center;
    height: 15px;
	width: -webkit-fill-available;
}

.threadlist-lowerTear-dark {
	display: block;
    background: url(https://i.imgur.com/k4NdfNG.png);
    background-size: cover;
    background-position: center center;
    height: 15px;
	width: -webkit-fill-available;
}

/*** Profile-specific Font Styling ***/
.mainprof-usertitle {
    font-family: var(--sc-font);
	font-size: 25px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

.mainprof-afflictions {
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}

.mainprof-username {
    font-family: var(--sc-font);
	font-size: 36px;
	letter-spacing: 1px;
}

.mainprof-category-title {
    font-family: var(--header-font);
	font-size: 26px;
	letter-spacing: 1px;
	text-transform: lowercase;
	color: var(--mediumgreen);
	border-bottom: 1px solid var(--mediumgreen);
}

.mainprof-side-table {
    font-family: var(--sc-font);
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: none;
	font-weight: bold;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.mainprof-quote {
	letter-spacing: 0.15rem;
    text-shadow: 0 0 2px #111;
    font-family: var(--accent-font);
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
}

/*** Profile Formatting ***/
.main-profile-toplinks {
	display: flex;
	background-color: var(--mainboard-bg);
	padding: 20px;
	border-top: 4px solid var(--mediumgreen);
    flex-flow: row wrap;
    justify-content: space-between;
}

.main-profile-header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--mainboard-bg);
  padding: 20px;
  text-align: center;
}

.mainprof-header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.main-profile-basic-info {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "basics avatar";
	grid-template-columns: 3fr 1fr;
	column-gap: 2rem;
}

.main-profile-stats-container {
	display: flex;
	background-color: var(--mainboard-bg);
	padding: 10px 20px;
	background: #0e0e0e;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: center;
}

.main-profile-banner {
	display: flex;
	width: 100%;
    height: 300px;
    background: url(https://placehold.co/1370x300) center no-repeat;
    background-size: cover;
    background-position: center center;
}

.main-profile-banner img {
  width: 100%;
}

.main-profile-smaller-banner {
	border-top: 4px solid var(--mediumgreen);
	display: flex;
	width: 100%;
    height: 100px;
    background: url(https://placehold.co/1370x100) center no-repeat;
    background-size: cover;
}

.main-profile-smaller-banner img {
  width: 100%;
}

.main-profile-smaller-banner2 {
	border-bottom: 4px solid var(--mediumgreen);
	display: flex;
	width: 100%;
    height: 100px;
    background: url(https://placehold.co/1370x100) center no-repeat;
    background-size: cover;
}

.main-profile-smaller-banner2 img {
  width: 100%;
}

.main-profile-smallest-banner {
	display: flex;
	width: 100%;
    height: 40px;
    background: url(https://placehold.co/1370x40) center no-repeat;
    background-size: cover;
}

.main-profile-smallest-banner img {
  width: 100%;
}

.main-profile-avatar {
	background: url(https://placehold.co/350x450) center no-repeat;
	grid-area: avatar;
	align-self: center;
}

.main-profile-avatar img {
	width: 100%;
}

.main-profile-basics {
	grid-area: basics;
	font-size: 13.5px;
}

.main-profile-mgroup-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "mgroupDesc mgroupDeets";
	grid-template-columns: auto 25%;
	grid-gap: 2rem;
	font-size: 13.5px;
}

.main-profile-mgroup-details {
	grid-area: mgroupDeets;
	font-size: 13.5px;
}

.main-profile-mgroup-description {
	grid-area: mgroupDesc;
	white-space: pre-line;
}

.main-profile-appearance-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "physicalDeets appearanceDesc";
	grid-template-columns: 25% auto;
	grid-gap: 2rem;
}

.main-profile-appearance-details {
	grid-area: physicalDeets;
	font-size: 13.5px;
}

.main-profile-appearance-description {
	grid-area: appearanceDesc;
	white-space: pre-line;
}

.main-profile-personality-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "personalityDesc personalityDeets";
	grid-template-columns: auto 25%;
	grid-gap: 2rem;
}

.main-profile-personality-details {
	grid-area: personalityDeets;
	font-size: 13.5px;
}

.main-profile-personality-description {
	grid-area: personalityDesc;
	white-space: pre-line;
}

.main-profile-relationships-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "relationshipsFamily relationshipsExtend relationshipsAes";
    grid-template-columns: 25% auto 100px;
	grid-gap: 2rem;
}

.main-profile-relationships-family {
	grid-area: relationshipsFamily;
	font-size: 13.5px;
}

.main-profile-relationships-extend {
  grid-area: relationshipsExtend;
}

.main-profile-relationships-aes {
	grid-area: relationshipsAes;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	gap: 20px;
}

.main-profile-relationships-aes img {
  width: 100%;
}

.main-profile-magic-container {
	display: block;
	background-color: var(--mainboard-bg);
	padding: 20px;
	white-space: pre-line;
}

.main-profile-history-container {
	display: block;
	background-color: var(--mainboard-bg);
	padding: 20px;
	white-space: pre-line;
}

.main-profile-InventoryOther-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "InventoryOtherLeft InventoryOtherRight";
	grid-template-columns: 48.75% auto;
	grid-gap: 2rem;
}

.main-profile-InventoryOther-left {
	grid-area: InventoryOtherLeft;
}

.main-profile-InventoryOther-right {
	grid-area: InventoryOtherRight;
}

.main-profile-imgCredits-container {
	display: block;
	background-color: var(--mainboard-bg);
	padding: 20px;
	white-space: pre-line;
	
	font-size: 12px;
}

.deets-row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: stretch;
	gap: 0.5rem;
	padding: 4px 12px;
	margin-bottom: 6px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	text-shadow: 0 0 2px #111;
	white-space: pre-line;
	
	font-size: 13px;
}

.deets-left {
	flex: initial;
	letter-spacing: 0.06rem;
	
	font-family: var(--mono-font);
	font-weight: bold;
}

.deets-right {
	flex-grow: 1 !important;
	text-align: right;
}

.deets-box {
	padding: 4px 12px;
	margin-bottom: 6px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	text-shadow: 0 0 2px #111;
    white-space: pre-line;
	font-size: 13.5px;
}

.basicdeets-grid {
	display: grid;
	grid-template-columns: 50% auto;
	grid-template-areas: 'basicGender basicEthnicity'
	'basicOrientation basicNationality'
	'basicAge basicBlood';
	column-gap: 6px;
	margin: 1.5rem 0;
}

.stats-deet {
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	text-align: center;
	padding: 4px 8px;
	font-size: 13px;
	font-family: var(--mono-font);
}

.stats-deet b {
	display: block;
	letter-spacing: 0.06rem;
}

.member_profile p {
  white-space: pre-line;
  font-size: 14px;
  text-align: justify;
}

.member_profile blockquote {
	color: #eee;
	display: block;
	padding: 10px;
	margin: 1em 1.5em;
	letter-spacing: 2px;
	text-shadow: 0 0 2px #111;
	border: 0;
	
	font-family: var(--sc-font);
	font-size: 15.2px;
	font-style: italic;
}

.member_profile fieldset {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.35em 0.75em 0.625em;
	white-space: pre-line;
	font-size: 13.5px;
}

.member_profile fieldset > legend {
	text-transform: none;
	padding: 0.35em 0.75em 0.05em;
	letter-spacing: 1px;
	font-family: var(--accent-font);
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	white-space: pre-line;
	width: fit-content;
}

/* Hide all radio buttons */
.prof-tabs input[type="radio"] {
	display: none;
}

.prof-tabs {
	margin-top: 10px;
}

/* Label styling for tabs */
.member_profile label {
  margin-bottom: 0;
}

.prof-tab-label {
	color: var(--mainboard-bg);
	padding: 0.5rem 1rem;
	background-color: var(--mediumgreen);
	cursor: pointer;
	letter-spacing: .06em;
	margin-right: 1rem;
	border-radius: 4px 4px 0 0;
	transition: box-shadow 0.3s ease;
	
	font-family: var(--sc-font);
	font-size: 17px;
	font-style: italic;
	font-weight: bold;
}

/* Active tab styling */
input[type="radio"]:checked + .prof-tab-label {
	opacity: 0.75;
	background-color: var(--lightergreen);
	color: var(--lighterwhite);
}

/* Tab content styling */
.prof-tab-content {
	display: none;
}

/* Show the content of the checked tab */
#prof-tab1:checked ~ #content1,
#prof-tab2:checked ~ #content2,
#prof-tab3:checked ~ #content3 {
	display: block;
}

/****************** Mobile Styling ******************/

@media screen and (max-width: 767px) {
	
  .main-profile-banner {
	  height: 0;
}

.main-profile-smaller-banner {
	  display: none;
}

.main-profile-smaller-banner {
	border-top: 4px solid var(--mediumgreen);
	display: flex;
	width: 100%;
    height: 0px;
    background: none;
    background-size: cover;
}

.stats-deet,
  .stats-deet b {
    font-size: 12px;
	margin: 5px;
	flex-direction: row;
    gap: 1rem;
    text-align: center;
	align-items: center;
}

.main-profile-basic-info,
  .main-profile-mgroup-container,
  .main-profile-appearance-container,
  .main-profile-personality-container,
  .main-profile-relationships-container,
  .main-profile-InventoryOther-container {
    display: block;
    padding: 1rem;
}

.main-profile-avatar,
  .main-profile-basics,
  .main-profile-mgroup-details,
  .main-profile-mgroup-description,
  .main-profile-appearance-details,
  .main-profile-appearance-description,
  .main-profile-personality-details,
  .main-profile-personality-description,
  .main-profile-relationships-family,
  .main-profile-relationships-extend,
  .main-profile-relationships-aes,
  .main-profile-InventoryOther-left,
  .main-profile-InventoryOther-right {
    width: 100%;
    display: block;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.main-profile-relationships-aes {
    display: none
}

.deets-row {
    flex-direction: column;
    text-align: left;
	gap: 4px;
}

.deets-right {
  text-align: left;
}

.basicdeets-grid {
    grid-template-columns: 100%;
    grid-template-areas: 
      'basicGender' 
	  'basicOrientation' 
	  'basicAge' 
      'basicEthnicity'
      'basicNationality'
      'basicBlood';
}


}

@media screen and (max-width: 767px) {
  .main-profile-basic-info {
    display: flex;
    flex-direction: column;
}

.main-profile-avatar {
    order: -1; /* Move avatar before basics */
}

.main-profile-basics {
    order: 0;
}


}

.main-profile-mgroup-container br,
.main-profile-basic-info br,
.main-profile-appearance-container br,
.main-profile-personality-container br,
.main-profile-relationships-container br,
.main-profile-history-container  br,
.main-profile-InventoryOther-container br,
.main-profile-imgCredits-container br,
.main-profile-magic-container br {
	display: none;
}