68 lines
1.3 KiB
CSS
68 lines
1.3 KiB
CSS
|
:root {
|
||
|
|
--default-padding: 4rem;
|
||
|
|
--roundness-sm: 8px;
|
||
|
|
--roundness-lg: 12px;
|
||
|
|
--roundness-xl: 24px;
|
||
|
|
--roundness-full: 250px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.profile-container {
|
||
|
|
width: 17.5rem;
|
||
|
|
height: 17.5rem;
|
||
|
|
|
||
|
|
margin: 0 0 2.5rem 0;
|
||
|
|
|
||
|
|
border-radius: var(--roundness-xl);
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 17.5rem;
|
||
|
|
height: 17.5rem;
|
||
|
|
object-fit: cover;
|
||
|
|
|
||
|
|
border-radius: var(--roundness-full);
|
||
|
|
border: 2px solid var(--color-background);
|
||
|
|
box-shadow: 0 0 20rem 15rem var(--color-background) inset;
|
||
|
|
|
||
|
|
transition: ease-in-out 1s;
|
||
|
|
|
||
|
|
animation-name: fade-in-profile;
|
||
|
|
animation-duration: 1.75s;
|
||
|
|
animation-fill-mode: both
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-container {
|
||
|
|
width: 30rem;
|
||
|
|
height: 10rem;
|
||
|
|
|
||
|
|
padding: .5rem;
|
||
|
|
|
||
|
|
border-radius: var(--roundness-xl);
|
||
|
|
background-color: var(--color-background);
|
||
|
|
|
||
|
|
transition: ease-in-out 1s;
|
||
|
|
|
||
|
|
animation-name: fade-in-container;
|
||
|
|
animation-duration: 1s;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
bottom: 1rem;
|
||
|
|
|
||
|
|
width: 50rem;
|
||
|
|
height: 3rem;
|
||
|
|
|
||
|
|
border-radius: var(--roundness-xl);
|
||
|
|
background-color: var(--color-background);
|
||
|
|
|
||
|
|
transition: ease-in-out 1s;
|
||
|
|
|
||
|
|
animation-name: fade-in-footer;
|
||
|
|
animation-duration: 2s;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
|
||
|
|
gap: 1rem;
|
||
|
|
}
|