/* 
Main CSS Styles

Make your customizations in style.css which 
is loaded after both this and the reset stylesheet
*/
@import url("https://use.typekit.net/ucu3mtm.css");

html {
    font-size: 16px;
}

body {
	font-family: "degular", sans-serif;
    font-weight: 600;
    font-style: normal;
	line-height: 145%;
    font-size: 16px;
	font-size: 1rem;
}

h1, 
h2, 
h3 {
	color: var(--dark-soil);
	font-weight: bold;
	padding-bottom: 20px;
}

h1 {
	font-size: 2.3rem;
	line-height: 2.3rem;
	padding-bottom: 20px;
}

h2 {
	font-size: 2rem;
	line-height: 2rem;
}

h3 {
	font-size: 1.4rem;
	line-height: 1.4rem;
}

input, 
select, 
textarea,
button {
    font-family: inherit;
    font-size: 1rem;
    border-radius: 999rem;
    padding: 1;
}

textarea {
    border-radius: 1rem;
}

textarea {
    padding: 10px;
}

input[type=checkbox],
input[type=radio],
input[type=range],
progress {
    accent-color: var(--main-hex);
}

input[type="submit"] {
    background-color: var(--main-hex);
    border: 0px;
    padding: 10px 20px;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
}

a, 
input[type="submit"], 
button {
    cursor: pointer;
}
 
.link_as_button, 
input[type="submit"], 
button {
    border: 1px solid var(--main-hex);
    transition: var(--transition-time);
}

.link_as_button:hover, 
input[type="submit"]:hover, 
button:hover,
#login_form input[type="submit"]:hover, 
#login_form button:hover, 
#form input[type="submit"]:hover, 
#form button:hover {
    /* background-color:transparent;
    color: var(--main-hex);
    text-decoration: none;
    text-decoration: underline; */
    
    color: var(--accent-hex);
}

a {
	color: var(--main-hex);
	font-size: inherit;
	text-decoration: none;
}

/* a:hover {
	text-decoration: underline;	
} */

header {
	padding: 0px 20px;
	background-color: var(--main-hex);
	border-bottom: 1px solid var(--main-hex); /*var(--border-hex);*/
	z-index: 50000;
	display:flex;
	justify-content: space-between;
	align-items: center;
}

#search_box {
	display:flex;
	background-color: #FFFFFF;
	justify-content: space-between;
	align-items: center;
}

#search_box input[type="search"] {
	background-color: #FFFFFF;
	border: 0px;
	padding: 15px;
    padding-left: 20px;
}

#search_box button {
	background-color: transparent;
    color: var(--main-hex);
	border: 0px;
    font-size:1.2rem;
}  

header .left {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}

header .logo {
	color: #FFFFFF;
	margin-right: 20px;
	font-size: 2.3rem;	
	font-weight: bold;
	text-decoration: none;
}

header .logo:hover {
	color: var(--accent-hex);
}

header .left nav {
    margin-left: 20px;
}

header .left nav a {
	color: #FFFFFF;
	text-decoration: none;
    margin-right: 20px;
}

header .left nav a:hover {
    text-decoration: underline;
}

footer {
	background-color: transparent;
    position: fixed;
    bottom: 0;
	color: var(--dark-soil);
	width: 100%;
	padding: 5px 100px;
	margin-top: 40px;
    display: flex;
    gap: 60px;

    a {
        color: var(--dark-soil);
    }
}

main {
	width: 80%;
	margin: 0px auto;
	margin-top: 20px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
    align-self: center;
    justify-self: center;
}

aside {
    border-radius: var(--border-radius-panel);
	align-self: flex-start;

    &.padded {
        padding: 20px;
    }
}

main#profile aside {
    margin-right: 20px;
    padding:20px;
}

main#profile aside h2, 
main#profile aside h3 {
    width: 100%;
    line-height: inherit;
    text-align: center;
}

main#profile {
	flex-wrap:wrap;
	margin-top:0px;
}

main#profile .cover_photo {
	width:100%;
	padding-bottom:35%;
	min-height:320px;
	background-color: var(--panel-hex);
	position:relative;
	background-position: center;
	background-repeat:no-repeat;
	background-size: cover;
    border-bottom-left-radius: var(--border-radius-panel);
    border-bottom-right-radius: var(--border-radius-panel);
}

main#profile .cover_photo .avatar{
    width: 200px;
    height: 200px;
    margin: 0px auto;
    bottom: 20px;
	left:20px;
	position:absolute;
	overflow:hidden;
	border:5px solid white;
}

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

main#profile section {
	width:100%;
	display: flex;
	margin-top:20px;
} 

main#index .page_pane {
    width:61.8%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
	flex-direction:column;
}

main#index .page_pane h1, 
main#index .page_pane h2, 
main#index .page_pane p {
    width: 100%;
}

main#index p{
    font-size: 1.4rem;
    line-height: 140%;
}

#container {
	width: 100%;
    padding-bottom: 5rem;
}
 
#news_feed {
    width: 100%;
}

#form {
	width: 61.8%;
	padding-right: 20px;
    padding-bottom: 5rem;
}

#search_results {
	width: 61.8%;
	padding-right: 20px;
}

#login_form {
	padding: 20px;
}

#register_form {
	padding: 20px;
    width: 55%;
}

#register_form label,
#form label {
    margin-top: 20px;
    color: var(--dark-soil);
    width: 100%;
    display: block;
    clear: both;
    font-weight: bold;
}

#register_form input:not([type='checkbox']), 
#register_form input:not([type='radio']), 
#register_form select,
#register_form textarea {
	width: 100%;
	background-color: transparent;
	padding: 15px 25px;
	color: var(--dark-soil);
	font-size: 1rem;
    margin-top: 5px;
    border: solid 2px var(--dark-soil);
    border-radius: 5rem;
}

#form input:not([type='checkbox']),
#form input:not([type='radio']),
#form select,
#form textarea {
	width: 100%;
	background-color: #FFFFFF;
	padding: 10px;
	color: var(--main-hex);
	font-size: 1rem;
    margin-top: 5px;
}

#register_form a {
	color: var(--dark-soil);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
    text-align: right;
    margin-top: 10px;

    &:hover {
        color: var(--main-hex);
        transition: var(--transition-time);
      }
}

#register_form input[type="submit"],
#register_form button, 
#form input[type="submit"],
#form button {
	width: 100%;
	border: 0px;
	color: white;
	padding: 20px 20px;
    border-radius: 50px;
	margin-top: 30px;
	background-color: var(--accent-hex);
	font-weight: bold;
	font-size: 1.5rem;
    transition: var(--transition-time);

    &:hover {
        background-color: var(--accent-hex-hover);
        color: white;
        cursor: pointer;
        transform: scale(1.05);
    }
}

#login_form label, 
#form label {
    margin-top: 20px;
    color: var(--main-hex);
    width: 100%;
    display: block;
    clear: both;
    font-weight: bold;
}

#login_form input:not([type='checkbox']), 
#login_form input:not([type='radio']), 
#form input:not([type='checkbox']),
#form input:not([type='radio']),
#form select,
#form textarea {
	width: 100%;
	background-color: #FFFFFF;
	padding: 1rem;
	color: var(--main-hex);
	font-size: 1rem;
    margin-top: 5px;
}

#login_form input:not([type='checkbox']), 
#login_form input:not([type='radio']) {
    border:0;
}

#form input,
#form select,
#form textarea {
	border: 1px solid var(--main-hex);
}

#form textarea {
    resize: vertical;
}

#login_form input[type="submit"],
#login_form button, 
#form input[type="submit"],
#form button {
	width: 120px;
	/*border: 0px;*/
	color: #FFFFFF;
	padding: 10px 20px;
	margin-top: 20px;
	margin-bottom: 40px;
	background-color: var(--main-hex);
	font-weight: bold;
	font-size: 1rem;
}

#form input[type="submit"].save_button,
#form button.save_button {
	margin-top:40px;
}

#login_form input[type="submit"].wide_butt, 
#login_form button.wide_butt, 
#form input[type="submit"].wide_butt,
#form button.wide_butt {
	width: auto;
}

#login_form a {
	color: var(--main-hex);
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
}

#login_form a:hover {
	text-decoration: underline;	
}

#form .avatar {
    max-width:200px;
    margin-top: 20px;
}

#form .cover_photo_holder {
    width:100%;
	padding-bottom:35%;
	background-color: var(--panel-hex);
	position:relative;
	background-position: center;
	background-repeat:no-repeat;
	background-size: cover;
	margin-bottom: 40px;
	margin-top:20px;
}

#post_creator {
    margin-bottom: 20px;
    position: relative;
}

#post_blackout {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
}

.follow_button {
    background-color: var(--main-hex);
    border: 0px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 10px 20px;
    padding-left: 50px;
    font-size: 1.1em;
    background-size: contain;
    background-position: 5px center;
    background-repeat: no-repeat;
    display: block;
    margin: 10px auto;
}

.post_block .row_full .follow_button {
    margin: 0px;
}

/* .follow_button.follow_user {
    background-image: url("../img/follow-icon.png");
}

.follow_button.following_user {
    background-image: url("../img/following-icon.png");
} */

.like_button {
    background-color: var(--main-hex);
    border: 0px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 10px 20px;
    padding-left: 50px;
    font-size: 1.1em;
    background-size: contain;
    background-position: 5px center;
    background-repeat: no-repeat;
    display: block;
    margin: 10px auto;
    border-radius: var(--border-radius-input);
}

.post_block .row_full .like_button {
    margin: 0px;
}

.like_button.like_post {
    background-image: url("../img/Icons/Heart.svg");
    background-repeat: no-repeat;
    width: 50px;
    
}

.like_button.unlike_post {
    background-image: url("../img/Icons/Heart.png");
    background-repeat: no-repeat;
    width: 50px;
}

.link_as_button {
    background-color: var(--main-hex);
    /*border: 0px;*/
    padding: 10px 20px;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-top: 20px;
    border-radius: var(--border-radius-input);
}

.page_pane {
	width: 70%;
	padding-right: 20px;
}

.post_block {
    width: 100%;
    padding-bottom: 20px;
}

.post_viewer {
    width: 100%;
    border-bottom: 1px solid var(--border-hex);
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.post_block .row{
    display: flex;
    width: 100%;
    align-items: stretch;

    img{
        display: block;
        /* border-radius: 50%; */
        background-image: none;
    }
}

.post_block .row_full{
    display:flex;
    /* flex-direction: column; */
    width: 100%;
    justify-content: space-between;
}

.post_block .row.right{
    justify-content: right;
    
}

.post_block img.avatar{
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.post_block img.attachment{
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.post_content {
    width: 100%;
}
.post_content p{
    margin-top: 10px;
    width: 100%;
    clear: both;
    
}

.post_content a{
    color: var(--main-hex);
    text-decoration: none;
}

.post_content a:hover{
    text-decoration: underline;
}

.post_content a.user_name{
    font-weight: bold;
    font-size: 1.4rem;
}

.post_content a.delete{
    color: var(--error-hex);
    font-weight: bold;
    line-height: 1.4rem;
}

.post_content a.delete:hover{
    color: #000000;
    text-decoration: none;
}

.post_composer {
    width: 100%;
    border-bottom: 1px solid var(--border-hex);
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.post_composer .row{
    display:flex;
    width: 100%;
    /*align-items: stretch;*/
}

.post_composer .row.right{
    justify-content: right;
    
}

.post_composer img{
    width: 100px;
    height: 100px;
	display: block;
	margin-left: auto;
}

.post_composer textarea {
    width: 100%;
    resize: vertical;
    min-height: 100px;
    border: 1px solid var(--border-hex);
	align-self: stretch;
	margin-left: 20px;
}

.post_composer .file {
    width: 100%;
    margin-top: 20px;
    margin-right: 20px;
    padding: 10px 20px;
    border: 1px solid var(--panel-hex);
    color: var(--main-hex);
}

.post_composer .post {
    margin-top: 20px;
    flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 0;
}

.profile_right {
    width: 61.8%;
}

.edit_profile {
    text-align: center;
}

.edit_profile a{
    color: var(--main-hex);
    text-decoration: none;
}

.edit_profile a:hover {
    text-decoration: underline;    
}

.followers {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.followers span.top {
    padding: 0px 10px;   
}

.tabs {
    width: 10vw;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 0;
    margin-right: 10%;
}

.tabs a {
    padding: 10px 20px;
    border: 2px solid var(--dark-soil);
    border-radius: 999px;
    text-decoration: none;
    background-color: transparent;
    color: var(--dark-soil);
    transition: var(--transition-time);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.tabs a:hover {
    background-color: var(--indigo);
    color: white;
}

.tabs a.active {
    font-weight: bold;
    background-color: var(--main-hex);
    color: white;
    border-color: var(--main-hex);
}

.search_feed_people {
    display: none;
}

.no_posts {
    width: 100%;
    color: var(--dark-soil);
    font-weight: bold;
    text-align: center;
    font-size: 1.6rem;

    img {
        margin: 0 auto;
        width: 60%;
    }
    
}

.logout_message, .login_error {
	font-weight: bold;
	font-size: 1.6rem;
	padding-bottom: 40px;
}

.logout_message {
	color: var(--success-hex);
}

.login_error {
	color: var(--error-hex);
}

:root {
    --main-hex: #d12282;
	--main-hex-a: #FC0189B3;
    /* Alpha codes here: https://codepen.io/chriscoyier/pen/XjbzrW */
    
	--accent-hex: #5642BB;

    --panel-hex: #E3E3E3;
	--border-hex: #000000;

    --success-hex: #48D61A;
	--error-hex: #EB0C1A;

    --border-radius-input: 3px;
    --border-radius-panel: 3px;

    --transition-time: .1s;

    --green: #00FE00;
    --indigo: #5642BB;
    --pink: #FC0189;
    --yellow: #E2F633;
    --soft-shell: #F7EEE5;
    --dark-soil: #211509;
}

/* -------------------------------------------------------------------------- */
/*                                 404 SECTION                                */
/* -------------------------------------------------------------------------- */

.not-found-section {
    background: url('../img/404%20imgs/404Background.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    height: 100vh;

    div {
        display: flex;
        flex-direction: column;
        width: 40%;
        margin: auto;
        justify-content: center;
        align-items: center;
        padding-top: 8rem;

        img {
            padding-bottom: 4rem;
            width: 95%;
        }

        .text-line {
            font-size: 1.8rem;
            padding-bottom: 2rem;
        }

        a {
            button {
                border-radius: 999rem;
                padding: 1rem 1.5rem;
                background-color: transparent;
                border: solid 3px black;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;

                p {
                    font-size: 1.4rem;
                    font-weight: 700;
                }

                i {
                    color: var(--main-hex);
                    font-size: 2rem;
                }
            }
        }
    }


    

}

/* --------------------------------- Nav Bar -------------------------------- */
nav {
  position: fixed;
  right: .5rem; /* leave room for the pink bar */
  top: 0;
  bottom: 0;
  width: 80px; /* skinnier horizontally */
  display: flex;
  flex-direction: column;
  z-index: 20;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

/* The right bar under the navigation (pink accent) */
nav::after {
  content: '';
  position: fixed;
  right: 4rem;
  top: 0;
  bottom: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 30px; 
  background: var(--accent-bar, var(--pink));
  z-index: 10;
  transition: background 160ms ease;
}

nav:has(li:first-child:hover)::after { background: var(--green); }
nav:has(li:nth-child(2):hover)::after { background: var(--pink); }
nav:has(li:nth-child(3):hover)::after { background: var(--indigo); }
nav:has(li:nth-child(4):hover)::after { background: var(--yellow); }
nav:has(li:nth-child(5):hover)::after { background: var(--dark-soil); }

/* Active tab state (solid color + matching accent bar) */
nav li:first-child:has(> a.active) { background: var(--green); }
nav li:nth-child(2):has(> a.active) { background: var(--pink); }
nav li:nth-child(3):has(> a.active) { background: var(--indigo); }
nav li:nth-child(4):has(> a.active) { background: var(--yellow); }
nav li:nth-child(5):has(> a.active) { background: var(--dark-soil); }

nav:has(li:first-child:has(> a.active))::after { background: var(--green); }
nav:has(li:nth-child(2):has(> a.active))::after { background: var(--pink); }
nav:has(li:nth-child(3):has(> a.active))::after { background: var(--indigo); }
nav:has(li:nth-child(4):has(> a.active))::after { background: var(--yellow); }
nav:has(li:nth-child(5):has(> a.active))::after { background: var(--dark-soil); }

/* Active icons: make the circle/icons white for Home/Plus/Discover/Settings */
nav li:nth-child(2):has(> a.active) a i,
nav li:nth-child(3):has(> a.active) a i,
nav li:nth-child(5):has(> a.active) a i { color: #fff; }

/* Make icons white on hover */
nav li:nth-child(2):hover a i,
nav li:nth-child(3):hover a i,
nav li:nth-child(5):hover a i { color: #fff; }

/* Discover uses an image; invert to white when active */
nav li:nth-child(4):has(> a.active) a img.discover-icon {
  filter: brightness(0) invert(1);
}

nav li:nth-child(4):hover a img.discover-icon {
  filter: brightness(0) invert(1);
}

nav ul {
  list-style-type: none;
  font-family: Helvetica;
  font-size: 140%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

nav li {
  background-color: var(--soft-shell);
  position: relative;
  margin-right: 8px;
  transition: all 0.2s ease;
  height: calc((100% - 60px) / 5 + 28px); /* taller tabs, evenly split with extra vertical space */
  display: flex;
  align-items: center;
  width: 100%;
  clip-path: polygon(
    0 0,             /* Top left */
  100% 20px,       /* Top right - inset to create trapezoid */
  100% calc(100% - 20px), /* Bottom right - inset */
    0 100%           /* Bottom left */
  );
}

/* Remove the individual tab bars since we have the main left bar */
nav li::after {
  display: none;
}

/* Add shadow/depth effect */
nav li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

nav li:hover {
  transform: translateX(8px); 
}

nav li:has(> a.active) {
  transform: translateX(8px);
}

nav li:first-child {
  background: linear-gradient(to left, 
    var(--green) 10px,
    var(--soft-shell) 10px,
    var(--soft-shell) calc(100% - 4px),
    var(--green) calc(100% - 4px)
  );
}

nav li:nth-child(2) {
  background: linear-gradient(to left, 
    var(--pink) 10px,
    var(--soft-shell) 10px,
    var(--soft-shell) calc(100% - 4px),
    var(--pink) calc(100% - 4px)
  );
}
  
nav li:nth-child(3) {
  background: linear-gradient(to left, 
    var(--indigo) 10px,
    var(--soft-shell) 10px,
    var(--soft-shell) calc(100% - 4px),
    var(--indigo) calc(100% - 4px)
  );
}
  
nav li:nth-child(4) {
  background: linear-gradient(to left, 
    var(--yellow) 10px,
    var(--soft-shell) 10px,
    var(--soft-shell) calc(100% - 4px),
    var(--yellow) calc(100% - 4px)
  );
}
  
nav li:nth-child(5) {
  background: linear-gradient(to left, 
    var(--dark-soil) 10px,
    var(--soft-shell) 10px,
    var(--soft-shell) calc(100% - 4px),
    var(--dark-soil) calc(100% - 4px)
  );
}

nav li:first-child:hover {
  background: var(--green);
}

nav li:nth-child(2):hover {
  background: var(--pink);
}

nav li:nth-child(3):hover {
  background: var(--indigo);
}

nav li:nth-child(4):hover {
  background: var(--yellow);
}

nav li:nth-child(5):hover {
  background: var(--dark-soil);
}
  
a {
  display: block;
  color: rgb(108, 162, 196);
}

nav li a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dark-soil);
  width: 100%;
  height: 100%;
  padding: 28px 8px 28px 8px; /* taller vertically, skinnier horizontally */
  font-size: 1.1em;
  position: relative;
  z-index: 2;
}

nav li a { padding-left: 30px; }
nav i { font-size: 35px; line-height: 1; }
nav img.discover-icon { width: 28px; height: 28px; }

/* Profile icon sizing */
.profile-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* -------------------------------------------------------------------------- */
/*                              PROFILE LAYOUT                                */
/* -------------------------------------------------------------------------- */

.profile-page {
  display: flex;
  gap: 6rem;
  padding: 2rem;
  padding-top: 4rem;
  max-width: 1200px;
  margin: 0 7rem;
  box-sizing: border-box;
}

.profile-cover {
    background: var(--soft-shell);
    border-radius: 12px 0 12px 12px;
    padding: 1rem;
    box-shadow:  8px 8px 0 var(--dark-soil);
    position: relative;
    width: 20rem;
}

.profile-card h2 {
  text-align: center;
  margin: 0 0 .5rem;
  font-size: 1.4rem;
}

.profile-card p.bio {
  text-align: center;
  color: #6b5f5b;
  margin: 0 0 1rem;
}

.profile-card {
  display: flex;

}

.profile-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.profile-stats > div { text-align:center; }

.btn { display:inline-block; padding:.5rem .9rem; border-radius:8px; text-decoration:none; cursor:pointer; }
.btn-primary { background: var(--indigo); color:#fff; border: none; }

.posts-grid, .no_posts {
  display: grid;
  grid-template-columns: 1fr, 1fr, 1fr;
  gap: 1rem;
  width: 100%;
}

.profile-posts {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.post-thumb {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

.post-thumb img { width:100%; height:140px; object-fit:cover; display:block; }

.post-thumb:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }

/* small utility */
.text-center { text-align:center; }

/* Profile header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #fff;
}

.profile-header .logo {
    font-size: 1.8rem;
    font-weight: bold;
}

.profile-header h1 {
    margin: 0;
    font-size: 1.4rem;
}

/* Profile card styling */
.profile-card .avatar {
    text-align: center;
    padding: 1rem;
    overflow: hidden;
    height: 220px;
}

.profile-card .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    border: none;
    box-shadow: none;
    display: block;
}

.profile-name {
    text-align: center;
    margin: 0 0 .5rem;
    font-size: 1.3rem;
}

.profile-bio {
    text-align: center;
    color: #6b5f5b;
    margin: 0 0 1rem;
    font-size: .95rem;
}

.profile-stats div strong {
    font-size: 1.2rem;
    display: block;
}

.profile-stats div div {
    font-size: .8rem;
    color: #999;
}

.profile-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    margin-top: 1rem;
}

.btn-edit-profile {
    padding: .7rem 1.4rem;
    border-radius: 8px;
    background: #6b4bd6;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}

.btn-edit-profile:hover {
    background: #5a3cc4;
}

.follow_button {
    padding: .7rem 1.4rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #999;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

.follow_button:hover {
    background: #f5f5f5;
}

.profile-card-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    right: -65px;
    top: 2rem;
    z-index: 15;
    gap: 1rem;
}

.card-link-icon {
    width: 50px;
    height: 50px;
    border-radius: 0 5px 5px 0;
    background: var(--soft-shell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 8px 8px 0 black;
}

.card-link-icon-active {
  width: 50px;
    height: 50px;
    border-radius: 0 5px 5px 0;
    background: #E6CEB6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 8px 8px 0 var(--main-hex);
}

.card-link-icon:hover {
    transform: scale(1.1);

}

.btn-message {
    padding: .7rem 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #999;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-message:hover {
    background: #f5f5f5;
}

/* Posts section */
.posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    background-color: transparent;
    border: none;
}

.posts-header h1 {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-soil);
}

.filter-btn {
    padding: .6rem 1.2rem;
    border-radius: 999px;
    border: 2px solid #999;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    transition: background 0.2s ease;
}

.filter-btn:hover {
    background: #f5f5f5;
}

.profile-posts {
  h3 {
    font-size: 1.5rem;
  }

  .achievements {
    padding: 2rem;

    .stickers {
      display: flex;
      gap: 3rem;
      padding-bottom: 3rem;
      
      img {
        width: 5rem;
        height: 5rem;
      }
    }

    .badges {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 1rem;
    }
  }
}

/* ------------------------------ Home Styling ------------------------------ */
/* --------------- Global Styling --------------- */
/* Centers the content to center VV */
.page_pane {
    padding: 0;
    margin: 0% auto;
    width: 60%;
}

#home {
    width: 100%;
    display: block;
}

.post_content p {
    /* Removes the margin in all p tags VV */
    margin: 0;
}

.post_content a.user_name{
    font-weight: bold;
    font-size: 1.25rem;
}

.post_content .usernameGrp {
    display: flex;
    flex-wrap: wrap;
}

/* ----- Avatar Icon Styling ----- */
.post_block .userProfiles {
    display: flex;
    margin-right: 2%;
    text-wrap: nowrap;
}

.post_content img.avatar {
    /* Styles the profiles on top of each other */
        border-radius: 100%;
        width: 47px;
        height: 47px;
        margin: 0%;
}

/* Positions the second avatar VV*/
.post_content img.avatar:nth-child(2) {
    margin-left: -15%;
    margin-top: -10%;
    z-index: -1;
}

/* ----- Creator name Styling ----- */

.post_block .postBar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ----- Post Styling ----- */
.post_viewer .postGrp {
    /* Flexes the Avatar and Text side by side */
    display: flex;
}

/* Post Text Styling */
.post_viewer .postGrp {
    margin-top: 1.5rem;
    gap: 2%;
}

.post_block img.attachment{
    object-fit: cover;
    width: 100%;
    height: 70vh;
    margin-top: 1.25rem;

    /* Rounds the post's borders VV */
    border-radius: 15px;
}

/* Icons */
.iconBtns {
    display: flex;
    gap: 3%;

    button {
        border: none;
        background: none;
    }
}

.iconBtns > div {
    display: flex;
    align-items: center;
    gap: 3%;
}

.post_viewer {
    border-bottom: none;
}

#scrapbook {
    width:100%;
}

#scrapbook iframe {
    width:80%;
    height:calc(100vh - 100px);
    border:1px solid black;
}

/* -------------------------------------------------------------------------- */
/*                                  MAIN ICON                                 */
/* -------------------------------------------------------------------------- */

.suggestions {
  position: fixed;
}

.sugg-header {
  width: 4rem;

  img {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/*                                 SEARCH PAGE                                */
/* -------------------------------------------------------------------------- */

search {
  justify-self: center;
  outline: 2px solid var(--dark-soil);
  border-radius: 999rem;
  position: absolute;
  bottom: 4rem;

  form {

    button {
      padding-right: 2rem;
    }

    input {
      padding: 10rem;
      border-radius: 9999rem;
  }

  input:focus {
    outline: none;
  }

  }
}

/* --------------------------------- Masonry -------------------------------- */
/*
Source - https://stackoverflow.com/a
Posted by Michael Benjamin, modified by community. See post 'Timeline' for change history
Retrieved 2025-11-23, License - CC BY-SA 4.0
*/

  grid-container {
  padding-top: 6.5%;
  margin: 0 auto;
  width: 70%;
  display: grid;                                             
  grid-auto-rows: 50px;
  grid-gap: 3%;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); 
}

[short] {
  height: 100%;
  grid-row: span 1;
}

[tall] {
  height: 100%;
  grid-row: span 2;
}

[taller] {
  height: 100%;
  grid-row: span 3;
}

[tallest] {
  height: 100%;
  grid-row: span 4;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-item:hover {
 transform: scale(1.05);
 transition: .25s ease-in-out;
}