body > main{background: var(--body_gradient_03); margin: 32px auto; padding: 0; border-radius: 32px; overflow: hidden; box-shadow: 0 0 24px rgb(0,0,0,0.5);}


/* main > header{} */
main > header{display: grid; grid-template-rows: 240px 180px;}
main > header > img{height: 240px; outline: 6px solid transparent;}
main > header > div{justify-items: center; text-align: center; display: grid; gap: 16px;}

main > header > div > div{position: relative; bottom: 120px; display: grid; gap: 16px;}
main > header > div > div:nth-child(1){width: 256px; height: 256px; border-radius: 50%; padding: 16px; place-content: center;}
main > header > div > div:nth-child(1) > img{width: 240px; height: 240px; border-radius: inherit;}

/* tabs */
main > nav{display: grid; gap: 16px; padding: 16px; justify-items: center;}
main > nav > div{display: flex; gap: 16px; border-radius: 16px; box-shadow: var(--body_shadow_full);}
main > nav > div > a{box-shadow: 1px 1px 4px rgb(0,0,0,0.75); padding: 12px 24px; border-radius: 50px;}

#can_view, #about, #socials, #projects{padding: 32px;}

#can_view{background: var(--form_colour); margin: 32px; border-radius: 16px; text-align: center;}

/* about */
#about{padding: 0 32px 32px 32px; display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start;}
#about > section{display: grid; gap: 16px;}
#about > .div_two{display: grid; gap: 16px;}
#about > .div_two > section{display: grid; gap: 16px;}
#about > .div_two > section > p{padding: 16px; border-radius: 16px; line-height: 1.3rem; transition: margin 0.2s, padding 0.2s;}
#about > .div_two > section > p:hover{padding: 24px; margin: -8px;}



/* socials */
.socials{display: grid; gap: 32px;}
.socials > a{color: inherit; text-decoration: none; height: 80px; display: flex; padding: 16px 24px; border-radius: 50px; align-items: center; gap: 16px; box-shadow: 4px 4px 8px rgb(0,0,0,0.5); transition: transform 0.2s, box-shadow 0.2s;}

.socials > a:hover,
.socials > a:focus{transform: translateY(-4px); box-shadow: 8px 8px 16px rgb(0,0,0,0.4);}

#socials > a > img,
.socials > a > img{height: 100%; width: auto; aspect-ratio: 1 / 1; border-radius: 8px;}




/* profile links */
.div_two h2{border-bottom: 1px solid;}

.profile_link_display{display: flex; flex-wrap: wrap; gap: 8px;}

.profile_link{background: var(--body_gradient_01); box-shadow: var(--body_shadow_full); font-size: 0.75rem; text-wrap: nowrap; padding: 8px 12px 8px 8px; border-radius: 50px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit;}

.profile_link:hover,
.profile_link:focus{background: var(--body_gradient_02);}

.profile_link > img{border-radius: 50px; height: 1.5rem; width: 1.5rem;}