/* profile */
main{padding: 0; animation: fade_in 1s; display: grid;}

/* header */
main > .header{height: 240px; margin-bottom: 120px; display: grid; grid-template-rows: auto 0; transition: height .5s, margin-bottom .5s;}
main > .header .banner{border-bottom: 8px solid;}
main > .header .banner img{height: 240px;}
main > .header > .navbars{display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: space-between; padding: 8px;}
main > .header > .navbars .avatar{background: var(--colour_02); height: 240px; width: 240px; padding: 8px; transition: height .5s, width .5s, bottom .5s; border-radius: 50%; position: relative; bottom: 120px; justify-self: center;}
main > .header > .navbars .avatar > img{border-radius: 50%;}

main > .header > .navbars > div.items{display: flex; gap: 8px;}
main > .header > .navbars > div:nth-child(3).items{justify-content: end;}
main > .header > .navbars .msg_profile{width: 32px; height: 32px; border-radius: 50%;}
main > .header > .navbars .msg_profile > img{border-radius: inherit;}
main > .header > .navbars .badges img{border-radius: 8px;}

/* name */
main > div:nth-child(2){justify-self: center; text-align: center; display: grid; gap: 8px;}
main > div:nth-child(2) h2{font-size: 1.8rem;}
main > div:nth-child(2) p{font-size: 1.25rem;}

/* main */
main > .socials{padding: 0 32px 32px 32px; display: grid; gap: 32px;}
main > .socials a{padding: 16px; background: white; border-radius: 32px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; box-shadow: 8px 8px 10px 0 rgb(0,0,0,0.5); transform: translate(0, 0px); transition: 0.25s box-shadow, 0.25s transform;}
main > .socials a:hover{box-shadow: 4px 4px 5px 0 rgb(0,0,0,0.5); transform: translate(0, 5px);}
main > .socials a > img{width: 50px; height: 50px; border-radius: 50%;}
main > .socials a > p{font-weight: bold;}

.profile_status{text-align: center; padding: 32px 16px; background: var(--colour_01); border-radius: 16px; font-size: 1.5rem;}

@media (max-width: 850px) {
	main > div:nth-child(1){height: 160px; margin-bottom: 80px;}
	main > div:nth-child(1) .banner img{height: 160px;}
	main > .header > .navbars .avatar{height: 160px; width: 160px; bottom: 80px;}
}