/* custom page rules */
.narrow_page{width: 600px;}

@media screen and (max-width: 650px) {
	.narrow_page{width: 100%;}
}

/* text */
.emoji{width: 1rem; height: 1rem; display: inline-block;}

/* font awesome */
.fa, .fa-solid, .fas, .far,
.fa::before, .fa-solid::before, .fas::before, .far::before{height: 0.9rem; width: 0.9rem; font-size: 0.9rem; aspect-ratio: 1 / 1; display: inline; vertical-align: middle; align-self: center;}

a:has(span) .fa,
a:has(span) .fas,
a:has(span) .far,
a:has(span) .fa-solid,
button:has(span) .fa,
button:has(span) .fas,
button:has(span) .far,
button:has(span) .fa-solid{margin-right: 1rem;}

@keyframes copyright_glow {
	0%{color: var(--text_colour);}
	25%{color: var(--text_colour);}
	50%{color: var(--text_colour_dim);}
	75%{color: var(--text_colour);}
	100%{color: var(--text_colour);}
}

.copyright{animation: copyright_glow 5s infinite ease-in-out; margin: auto; width: fit-content; font-size: 0.8rem;}
.copyright:hover{animation: copyright_glow 0.5s infinite ease-in-out; cursor: help;}

/* cookies_banner */
#cookies_banner{position: sticky; bottom: 0; width: 100%; background: var(--table_row_02); box-shadow: 0 -4px 8px rgb(0,0,0,0.5); /* display: grid; */ display: none; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 12px 16px; font-size: 0.8rem; animation: cookies_banner_appear 0.5s forwards ease-in-out;}
#cookies_banner > button{font-size: 0.8rem;}

@keyframes cookies_banner_appear {
	0%{opacity: 0;}
	100%{opacity: 1;}
}

/* profile card */
.profile_card{background: var(--input); color: inherit; outline: 1px solid rgb(127,127,127,0.5); display: flex; gap: 8px; padding: 4px 8px 4px 4px; align-items: center; border-radius: 50px; width: fit-content; box-shadow: var(--box_shadow); font-size: 0.8rem;}
.profile_card > img{width: 1.6rem; height: 1.6rem; display: block; border-radius: 50%;}

.profile_card:hover,
.profile_card:focus{background: var(--input_hover);}

/* render_item */
.project_item{width: 400px; background: var(--background_gradient_01); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: var(--box_shadow); display: grid; grid-template-rows: auto 1fr auto;}
.project_item > a{padding: 32px; background: var(--input); color: inherit; display: block; text-align: center; border-radius: 16px; margin: 8px;}
.project_item > a:hover{background: var(--input_hover);}

.project_item .project_header{height: 200px;}
.project_item .project_header > img{width: 400px; height: 200px; border-radius: 16px;}
.project_item .project_header > div{padding: 0 16px; transform: translateY(-96px); height: 96px; background: linear-gradient(transparent,rgb(0,0,0)); display: flex; align-items: center; gap: 16px; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis;}
.project_item .project_header > div > img{width: 64px; height: 64px; border-radius: 50%; box-shadow: var(--box_shadow); background: var(--input);}
.project_item .project_header > div > h3{font-size: 1.5rem; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis;}

.project_item .project_main{display: grid; gap: 16px; grid-template-rows: auto auto; align-content: space-between;}
.project_item .project_main > span{padding: 24px; border-radius: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;}

.project_item .owner_date{padding: 0 16px; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: baseline;}
.project_item .owner_date > small{color: var(--text_colour_dim);}

/* follow_bar */
#follow_bar{display: none;}

/* notifications */
@keyframes app_notification {
	0%{right: -100vw;}
	10%{right: 32px;}
	20%{right: 0px;}
	80%{right: 0px;}
	90%{right: 32px;}
	100%{right: -100vw;}
}

#app-notifications{position: fixed; bottom: 16px; right: 16px; pointer-events: none; display: flex; flex-direction: column-reverse; gap: 16px; z-index: 1000;}
#app-notifications > section{background: var(--input); border-left: 8px solid rgb(0, 0, 0); border-radius: 2px 8px 8px 2px; padding: 16px; box-shadow: var(--box_shadow); display: flex; gap: 16px; align-items: center; position: relative; right: -100vw; animation: app_notification 8s forwards; pointer-events: all;}
#app-notifications > section > div:nth-child(1){font-size: 1.5rem; font-weight: 900;}
#app-notifications > section > div:nth-child(2){display: grid; gap: 4px; align-items: center;}
#app-notifications > section > div:nth-child(2) > h6{font-size: 1rem; line-height: 1rem; color: var(--text_colour);}
#app-notifications > section > div:nth-child(2) > p{font-size: 0.85rem; line-height: 0.85rem; color: var(--text_colour_dim);}

#app-notifications > section.info > div:nth-child(1),
#app-notifications > section.info{border-left-color: rgb(50, 180, 255); color: rgb(50, 180, 255);}

#app-notifications > section.success > div:nth-child(1),
#app-notifications > section.success{border-left-color: rgb(76, 175, 80); color: rgb(76, 175, 80);}

#app-notifications > section.warn > div:nth-child(1),
#app-notifications > section.warn{border-left-color: rgb(255, 152, 0);  color: rgb(255, 152, 0);}

#app-notifications > section.error > div:nth-child(1),
#app-notifications > section.error{border-left-color: rgb(244, 67, 54); color: rgb(244, 67, 54);}

#app-notifications > section:hover{background: var(--input_hover);}

@media screen and (max-width: 650px) {
	#app-notifications > section{padding: 12px; gap: 8px;}
	#app-notifications > section > div:nth-child(1){font-size: 1.2rem;}
	#app-notifications > section > div:nth-child(2){gap: 2px;}
	#app-notifications > section > div:nth-child(2) > h6{font-size: 0.85rem;}
	#app-notifications > section > div:nth-child(2) > p{font-size: 0.75rem;}

	#cookies_banner{grid-template-columns: auto;}
}