/* ---- reset ---- */
body {
margin: 0;
font: normal 16px Arial, Helvetica, sans-serif;
color: #333;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
h1 {
text-align: center;
color: #fff;
}
#login {
background: rgba(255, 255, 255, 0.3);
padding: 2em;
border-radius: 10px;
border: #cccccc solid 2px;
position: absolute;
width: 220px;
top: 10%;
left: 50%;
margin-left: -110px;
}
#login input[type="text"],
#login input[type="password"] {
padding: 7px;
margin-bottom: 20px;
border: 1px #ccc solid;
border-radius: 5px;
width: calc(100% - 14px);
display: block;
}
#login button {
width: 100%;
padding: 1em;
border-radius: 5px;
border: 1px solid #000066;
background: #fe2323;
color: #fff;
font-weight: bold;
}
.github {
bottom: 10px;
right: 10px;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 0 12px 6px 12px;
border: 1px solid #000;
}
.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
color: #000;
text-decoration: none;
}
.github img {
height: 30px;
}
.github #gh-project {
font-size: 20px;
padding-left: 5px;
font-weight: bold;
vertical-align: bottom;
}
tsParticles.load("tsparticles", {
fps_limit: 60,
background: {
color: "#333"
},
interactivity: {
detect_on: "canvas",
events: {
ondiv: {
enable: true,
elementId: "login",
mode: "bubble",
type: "rectangle"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 5,
speed: 3,
color: ["#ff0000", "#ff7700"]
}
}
},
particles: {
color: {
value: ["#ffffff", "#1254ef"]
},
links: {
color: "random",
distance: 150,
enable: true,
opacity: 0.4,
width: 1
},
move: {
collisions: true,
direction: "none",
enable: true,
out_mode: "bounce",
random: false,
speed: 5,
straight: false
},
number: { density: { enable: true, value_area: 800 }, value: 80 },
opacity: {
animation: { enable: true, minimumValue: 0.1, speed: 1, sync: false },
random: true,
value: 0.5
},
shape: {
type: "square"
},
size: {
animation: {
enable: true,
minimumValue: 2,
speed: 1,
sync: false
},
random: {
enable: true,
minimumValue: 2
},
value: 4
}
},
retina_detect: true
});