-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
96 lines (87 loc) · 1.76 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@font-face {
font-family: "unispace";
font-style: normal;
font-weight: normal;
src: local("unispace"), url('unispace/unispace_bd.ttf') format('truetype');
}
body {
background-color: #eee;
margin: 0;
color: rgb(58, 58, 58);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "unispace";
}
.container {
background-color: #eee;
padding: 5rem;
border-radius: 1rem;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow:
1.1px 2.7px 1.9px rgba(0, 0, 0, 0.044),
2.5px 6.3px 4.3px rgba(0, 0, 0, 0.083),
4.5px 11.3px 7.7px rgba(0, 0, 0, 0.112),
7.4px 18.8px 12.8px rgba(0, 0, 0, 0.132),
12.2px 31px 21.2px rgba(0, 0, 0, 0.136),
21.3px 54.1px 37px rgba(0, 0, 0, 0.117),
46px 117px 80px rgba(0, 0, 0, 0.21)
;
}
.form {
display: grid;
grid-template-columns: auto auto;
row-gap: 1.2rem;
column-gap: 5rem;
justify-content: center;
align-items: center;
width: 500px;
}
.title {
margin: 0;
text-align: center;
font-family:"unispace";
}
label {
font-weight: bold;
}
.character-amount-container {
display: flex;
align-items: center;
}
.number-input {
width: 5rem;
height: 2rem;
}
.password-display {
background-color: white;
color: rgb(50, 182, 94);
padding: 1rem;
border: 1px solid #333;
height: 2rem;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
word-break: break-all;
border-radius: .5rem;
}
.btn {
grid-column: span 2;
background-color: transparent;
border: 2px solid rgb(0, 0, 0);
color: rgb(0, 0, 0);
padding: 1rem 1rem;
font-weight: bold;
cursor: pointer;
border-radius: 1rem;
}
.btn:hover {
background-color: #000000;
color: #eee;
}