/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: absolute;
width: 100%;
height: 100%;
background-color: #323031;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.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", {
detectRetina: false,
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onHover: {
enable: true,
mode: "bubble"
},
resize: true
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3
}
}
},
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true
}
},
lineLinked: {
blink: false,
color: "random",
consent: false,
distance: 30,
enable: true,
opacity: 0.3,
width: 0.5
},
move: {
attract: {
enable: false,
rotate: {
x: 600,
y: 1200
}
},
bounce: false,
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 1,
straight: false
},
number: {
density: {
enable: false,
area: 2000
},
limit: 0,
value: 200
},
opacity: {
animation: {
enable: true,
minimumValue: 0.05,
speed: 2,
sync: false
},
random: false,
value: 1
},
shape: {
type: "circle"
},
size: {
animation: {
enable: false,
minimumValue: 0.1,
speed: 40,
sync: false
},
random: true,
value: 1
}
},
polygon: {
draw: {
enable: true,
lineColor: "rgba(255,255,255,0.2)",
lineWidth: 0.3
},
move: {
radius: 10
},
inlineArrangement: "equidistant",
scale: 0.5,
type: "inline",
url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg"
}
});