body {
font-family
:
Arial
,
sans-serif
;
background-color
:
#a9fdf2
;
margin
:
0
;
padding
:
0
;
display
: flex;
flex-
direction
: column;
align-items:
center
;
text-align
:
center
;
}
header {
background-color
:
#4CAF50
;
color
:
#fff
;
padding
:
20px
;
width
:
100%
;
box-shadow:
0
2px
5px
rgba(
0
,
0
,
0
,
0.2
);
}
.
sub
{
color
:
black
;
}
.geeks-title {
color
:
green
;
font-size
:
36px
;
margin
:
0
;
text-transform
:
uppercase
;
letter-spacing
:
2px
;
}
.typing-title {
font-size
:
24px
;
margin
:
10px
0
;
color
:
green
;
}
.container {
margin-top
:
20px
;
}
.typing {
display
: inline-
block
;
padding
:
20px
;
font-size
:
90px
;
color
: rgba(
60
,
0
,
255
,
0.897
);
animation: typing
3
s steps(
20
, end),
colorChange
3
s ease-in-out infinite;
}
.cursor {
display
: inline-
block
;
width
:
8px
;
height
:
60px
;
background-color
:
rgb
(
204
,
240
,
0
);
animation:
blink
0.7
s infinite;
}
@keyframes typing {
0%
{
width
:
0
;
}
100%
{
width
:
100%
;
}
}
@keyframes colorChange {
0%
,
100%
{
color
: rgba(
60
,
0
,
255
,
0.897
);
}
50%
{
color
: rgba(
255
,
5
,
5
,
0.897
);
}
}
@keyframes
blink
{
0%
,
100%
{
background-color
:
transparent
;
}
50%
{
background-color
:
rgb
(
0
,
0
,
0
);
}
}
@media (
max-width
:
700px
) {
.geeks-title {
font-size
:
20px
;
}
.typing-title {
font-size
:
16px
;
}
.typing {
font-size
:
50px
;
}
.cursor {
height
:
50px
;
}
}
@media (
max-width
:
400px
) {
.geeks-title {
font-size
:
15px
;
}
.typing-title {
font-size
:
13px
;
}
.typing {
font-size
:
40px
;
}
.cursor {
height
:
40px
;
}
}