@import
url
(
);
body {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
height
:
100
vh;
width
:
100%
;
display
: flex;
flex-
direction
: column;
justify-
content
:
center
;
align-items:
center
;
background-color
:
#c8f8fa
;
font-family
:
"Gloock"
,
serif
;
}
.container {
background-color
:
#fff
;
width
:
400px
;
padding
:
20px
;
margin
:
20px
;
border-radius:
10px
;
border
:
2px
solid
#000
;
box-shadow:
0
0
10px
rgba(
0
,
0
,
0
,
0.2
);
text-align
:
center
;
position
:
relative
;
overflow
:
hidden
;
transition: background-color
0.3
s;
}
.container:hover {
background-color
:
#f8f8f8
;
}
.modal {
display
:
none
;
position
:
fixed
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
width
:
300px
;
background-color
: rgba(
0
,
0
,
0
,
0.7
);
z-index
:
1
;
align-items:
center
;
justify-
content
:
center
;
border-radius:
10px
;
}
.modal-content {
background-color
:
#fff
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0
0
10px
rgba(
0
,
0
,
0
,
0.2
);
text-align
:
center
;
}
.close {
position
:
absolute
;
top
:
10px
;
right
:
10px
;
font-size
:
24px
;
cursor
:
pointer
;
}
h
2
{
color
:
#333
;
font-size
:
24px
;
}
label {
font-size
:
18px
;
margin-right
:
10px
;
}
input[type=
"number"
] {
width
:
50px
;
padding
:
5px
;
font-size
:
18px
;
border
:
2px
solid
#000
;
border-radius:
5px
;
}
.apply-limit-button {
background-color
:
#008000
;
color
:
#fff
;
padding
:
10px
20px
;
font-size
:
18px
;
border
:
none
;
border-radius:
5px
;
cursor
:
pointer
;
margin-top
:
10px
;
}
.apply-limit-button:hover {
background-color
:
#006400
;
}
h
1
{
color
:
#008000
;
font-size
:
36px
;
margin
:
0
;
transition: color
0.3
s;
}
h
1:
hover {
color
:
#ff0000
;
}
h
3
{
color
:
#333
;
font-size
:
18px
;
margin-top
:
5px
;
}
textarea {
resize:
none
;
width
:
100%
;
height
:
100px
;
padding
:
10px
;
border
:
2px
solid
#000
;
font-family
:
serif
;
font-size
:
18px
;
box-sizing: border-box;
background-color
:
#f1f1f2
;
margin-top
:
10px
;
transition: border-color
0.3
s,
background-color
0.3
s;
}
textarea:focus {
border-color
:
#1726fa
;
background-color
:
#f8f8f8
;
}
.counter-container {
display
: flex;
justify-
content
: space-between;
margin-top
:
10px
;
font-size
:
18px
;
color
:
#333
;
transition: color
0.3
s;
}
.counter-container:hover {
color
:
#006400
;
}
.total-container {
color
:
#008000
;
transition: color
0.3
s;
}
.total-container:hover {
color
:
#006400
;
}
.remaining-container {
color
:
#ff0000
;
transition: color
0.3
s;
}
.remaining-container.limit-exceeded {
color
:
#f00
;
animation: shake
0.5
s;
}
@keyframes shake {
0%
,
100%
{
transform: translateX(
0
);
}
10%
,
30%
,
50%
,
70%
,
90%
{
transform: translateX(
-5px
);
}
20%
,
40%
,
60%
,
80%
{
transform: translateX(
5px
);
}
}
.configure-button {
background-color
:
#fd5a5a
;
color
:
#fff
;
padding
:
10px
20px
;
font-size
:
18px
;
border
:
none
;
border-radius:
5px
;
cursor
:
pointer
;
transition: background-color
0.3
s;
}
.configure-button:hover {
background-color
:
#006400
;
}
.error-container {
color
:
#f00
;
font-size
:
16px
;
margin-top
:
10px
;
display
:
none
;
animation: fade
0.5
s;
}
@keyframes fade {
from {
opacity:
0
;
transform: translateY(
-10px
);
}
to {
opacity:
1
;
transform: translateY(
0
);
}
}
color
:
#ff0000
;
}
h
3
{
color
:
#333
;
font-size
:
18px
;
margin-top
:
5px
;
}
textarea {
resize:
none
;
width
:
100%
;
height
:
100px
;
padding
:
10px
;
border
:
2px
solid
#000
;
font-family
:
serif
;
font-size
:
18px
;
box-sizing: border-box;
background-color
:
#f1f1f2
;
margin-top
:
10px
;
transition: border-color
0.3
s,
background-color
0.3
s;
}
textarea:focus {
border-color
:
#1726fa
;
background-color
:
#f8f8f8
;
}
.counter-container {
display
: flex;
justify-
content
: space-between;
margin-top
:
10px
;
font-size
:
18px
;
color
:
#333
;
transition: color
0.3
s;
}
.counter-container:hover {
color
:
#006400
;
}
.total-container {
color
:
#008000
;
transition: color
0.3
s;
}
.total-container:hover {
color
:
#006400
;
}
.remaining-container {
color
:
#ff0000
;
transition: color
0.3
s;
}
.remaining-container.limit-exceeded {
color
:
#f00
;
animation: shake
0.5
s;
}
@keyframes shake {
0%
,
100%
{
transform: translateX(
0
);
}
10%
,
30%
,
50%
,
70%
,
90%
{
transform: translateX(
-5px
);
}
20%
,
40%
,
60%
,
80%
{
transform: translateX(
5px
);
}
}
.configure-button {
background-color
:
#fd5a5a
;
color
:
#fff
;
padding
:
10px
20px
;
font-size
:
18px
;
border
:
none
;
border-radius:
5px
;
cursor
:
pointer
;
transition: background-color
0.3
s;
}
.configure-button:hover {
background-color
:
#006400
;
}
.error-container {
color
:
#f00
;
font-size
:
16px
;
margin-top
:
10px
;
display
:
none
;
animation: fade
0.5
s;
}
@keyframes fade {
from {
opacity:
0
;
transform: translateY(
-10px
);
}
to {
opacity:
1
;
transform: translateY(
0
);
}
}