-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
110 lines (96 loc) · 8.53 KB
/
style.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
#body {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='775' preserveAspectRatio='none' viewBox='0 0 1440 775'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2497%26quot%3b)' fill='none'%3e%3crect width='1440' height='775' x='0' y='0' fill='url(%23SvgjsLinearGradient2498)'%3e%3c/rect%3e%3cpath d='M117.848%2c281.013C172.554%2c281.06%2c211.99%2c235.368%2c239.586%2c188.133C267.506%2c140.343%2c289.143%2c82.86%2c261.695%2c34.797C234.092%2c-13.537%2c173.499%2c-26.103%2c117.848%2c-25.038C64.425%2c-24.016%2c9.686%2c-6.298%2c-16.772%2c40.125C-43.023%2c86.184%2c-29.39%2c141.644%2c-3.527%2c187.923C23.132%2c235.627%2c63.2%2c280.966%2c117.848%2c281.013' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M185.552%2c367.33C252.942%2c366.561%2c318.709%2c340.21%2c354.274%2c282.964C391.833%2c222.508%2c393.854%2c147.354%2c361.648%2c83.884C325.931%2c13.494%2c264.481%2c-50.312%2c185.552%2c-49.546C107.524%2c-48.789%2c51.369%2c18.06%2c15.276%2c87.243C-17.728%2c150.503%2c-27.037%2c225.922%2c10.029%2c286.891C45.863%2c345.833%2c116.576%2c368.117%2c185.552%2c367.33' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M60.508%2c151.127C92.194%2c149.165%2c119.43%2c131.177%2c135.846%2c104.004C152.925%2c75.734%2c159.53%2c41.42%2c144.578%2c11.97C128.209%2c-20.272%2c96.615%2c-46.326%2c60.508%2c-44.384C26.588%2c-42.559%2c7.992%2c-9.035%2c-9.232%2c20.244C-26.831%2c50.159%2c-49.255%2c83.826%2c-32.934%2c114.457C-16.07%2c146.106%2c24.715%2c153.344%2c60.508%2c151.127' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1338.226%2c142.611C1368.189%2c141.673%2c1390.481%2c118.005%2c1404.975%2c91.764C1418.896%2c66.56%2c1424.997%2c36.377%2c1410.716%2c11.375C1396.337%2c-13.798%2c1367.186%2c-23.762%2c1338.226%2c-25.088C1306.152%2c-26.556%2c1270.042%2c-23.202%2c1253.251%2c4.166C1235.946%2c32.372%2c1246.513%2c67.981%2c1263.823%2c96.183C1280.214%2c122.887%2c1306.908%2c143.592%2c1338.226%2c142.611' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1332.342%2c138.522C1363.328%2c137.316%2c1388.512%2c115.554%2c1403.03%2c88.154C1416.579%2c62.582%2c1417.265%2c31.709%2c1401.947%2c7.156C1387.436%2c-16.104%2c1359.753%2c-24.693%2c1332.342%2c-25.149C1303.917%2c-25.622%2c1274.573%2c-18.751%2c1258.608%2c4.772C1240.638%2c31.249%2c1235.99%2c66.029%2c1251.439%2c94.052C1267.363%2c122.937%2c1299.384%2c139.804%2c1332.342%2c138.522' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1441.634%2c322.904C1506.445%2c326.584%2c1576.605%2c309.514%2c1609.602%2c253.611C1643.002%2c197.024%2c1624.093%2c127.16%2c1590.508%2c70.682C1557.807%2c15.69%2c1505.596%2c-27.323%2c1441.634%2c-28.854C1375.153%2c-30.446%2c1310.567%2c4.249%2c1279.88%2c63.245C1251.089%2c118.597%2c1270.755%2c183.288%2c1303.745%2c236.245C1334.51%2c285.63%2c1383.544%2c319.606%2c1441.634%2c322.904' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M15.92%2c691.883C37.742%2c692.928%2c61.798%2c687.632%2c72.446%2c668.556C82.921%2c649.79%2c73.916%2c627.203%2c62.01%2c609.31C51.566%2c593.615%2c34.764%2c584.18%2c15.92%2c583.611C-4.081%2c583.007%2c-24.975%2c589.207%2c-35.254%2c606.375C-45.766%2c623.931%2c-42.456%2c645.998%2c-31.948%2c663.557C-21.743%2c680.609%2c-3.929%2c690.933%2c15.92%2c691.883' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M144.393%2c957.106C210.53%2c957.734%2c267.478%2c911.703%2c297.224%2c852.63C324.217%2c799.025%2c312.659%2c736.521%2c281.209%2c685.403C251.426%2c636.995%2c201.222%2c603.322%2c144.393%2c604.222C88.977%2c605.1%2c43.477%2c642.144%2c14.883%2c689.621C-14.831%2c738.958%2c-28.593%2c797.938%2c-3.494%2c849.776C24.955%2c908.534%2c79.113%2c956.486%2c144.393%2c957.106' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M111.709%2c878.824C161.324%2c879.588%2c199.576%2c839.718%2c223.307%2c796.14C245.861%2c754.723%2c251.859%2c705.246%2c228.563%2c664.242C205.005%2c622.776%2c159.399%2c599.449%2c111.709%2c599.711C64.482%2c599.971%2c19.752%2c624.097%2c-2.943%2c665.515C-24.846%2c705.488%2c-15.668%2c752.642%2c5.912%2c792.791C28.977%2c835.703%2c62.997%2c878.073%2c111.709%2c878.824' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1477.829%2c1002.659C1549.433%2c1003.658%2c1622.171%2c978.835%2c1659.34%2c917.625C1697.783%2c854.317%2c1690.611%2c775.473%2c1655.331%2c710.349C1618.112%2c641.645%2c1555.961%2c581.591%2c1477.829%2c582.57C1400.923%2c583.534%2c1343.562%2c646.575%2c1307.869%2c714.703C1275.042%2c777.363%2c1268.929%2c851.761%2c1304.885%2c912.679C1340.288%2c972.66%2c1408.186%2c1001.687%2c1477.829%2c1002.659' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1490.262%2c1054.13C1573.791%2c1052.529%2c1654.1%2c1016.313%2c1696.825%2c944.521C1740.504%2c871.126%2c1741.41%2c778.875%2c1697.763%2c705.461C1655.022%2c633.571%2c1573.898%2c597.267%2c1490.262%2c597.081C1406.268%2c596.894%2c1325.451%2c633.17%2c1281.153%2c704.533C1234.34%2c779.949%2c1223.944%2c876.537%2c1269.509%2c952.714C1314.061%2c1027.198%2c1403.486%2c1055.794%2c1490.262%2c1054.13' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1475.087%2c1049.239C1558.069%2c1048.341%2c1632.569%2c996.665%2c1669.72%2c922.458C1703.504%2c854.976%2c1685.157%2c775.781%2c1643.493%2c712.858C1606.343%2c656.753%2c1542.351%2c626.65%2c1475.087%2c628.516C1411.107%2c630.291%2c1358.024%2c668.785%2c1322.122%2c721.773C1279.882%2c784.115%2c1241.147%2c858.526%2c1273.017%2c926.753C1308.745%2c1003.24%2c1390.672%2c1050.153%2c1475.087%2c1049.239' fill='rgba(255%2c 255%2c 255%2c 0.17)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2497'%3e%3crect width='1440' height='775' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='100%25' x2='50%25' y2='0%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2498'%3e%3cstop stop-color='rgba(0%2c 137%2c 229%2c 1)' offset='0.01'%3e%3c/stop%3e%3cstop stop-color='rgba(94%2c 191%2c 255%2c 1)' offset='0.65'%3e%3c/stop%3e%3cstop stop-color='rgba(94%2c 191%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
font-family: Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#hero {
background-color: aliceblue;
height: 200px;
width: 320px;
border-radius: 15px;
border: none;
margin: 10rem auto;
padding-bottom: 1%;
box-shadow: 0px 0px 40px 20px #0ff;
}
.container {
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: column;
text-align: center;
border-radius: 15px;
}
.slider {
-webkit-appearance: none;
width: 70%;
height: 15px;
background: #0ff;
border-radius: 15px;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
margin-bottom: 10px;
}
.action-btn {
width: 50%;
height: 30px;
align-self: center;
margin: 10px;
border: none;
border-radius: 15px;
transition: 0.2s ease;
}
.action-btn:hover {
width: 52%;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
background-color: #0ff;
}
.output {
display: flex;
padding: 10px;
justify-content: center;
gap: 4px;
}
.clipboard {
cursor: pointer;
border: 0;
background-color: white;
color: black;
border-radius: 15px;
font-size: 23px;
opacity: 1;
transition: opacity 0.2s;
}
.clipboard:hover {
opacity: 0.5;
}
#pwd_txt {
min-width: 8rem;
min-height: 1rem;
width: fit-content;
background: #fffbfbf0;
padding: 10px;
border-radius: 4px;
border: 1px dashed black;
}
label {
display: inline;
}
input[type="checkbox"] {
accent-color: #0ff;
}
#copy_text {
color: rgb(55, 55, 55);
}
@media (max-width: 800px) and (min-width: 500px) {
#hero {
width: 65%;
}
}
@media (max-width: 499px) {
#hero {
width: 98%;
}
}