45 lines
713 B
CSS
45 lines
713 B
CSS
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: grid;
|
||
|
|
align-items: center;
|
||
|
|
padding: 4rem;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: linear-gradient(#eff0f3, #efe0ef);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: grid;
|
||
|
|
justify-items: start;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-typewriter] {
|
||
|
|
font-family: system-UI;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 4.5rem;
|
||
|
|
color: #d9376e;
|
||
|
|
height: 6rem;
|
||
|
|
border-right: 0.8rem solid transparent;
|
||
|
|
padding: 0.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-typewriter]:not(.typing) {
|
||
|
|
animation: blink-cursor 1.1s step-end infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes blink-cursor {
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
border-color: #ff8e3c;
|
||
|
|
}
|
||
|
|
}
|