I've looked up the issue on here and GitHub and people have had other overlapping issues and i tried their fix but they just wont work. The particles either dont show at all or it extends the page downwards and makes the particles its own canvas type deal. Any help or knowledge on what direction i need to head in would be greatly appreciated.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/css/Century%20Gothic%20Paneuropean.css">
<link rel="stylesheet" media="screen" href="assets/css/particles.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77">
<div id="particles-js"></div>
<div class="map-clean"></div>
<header class="masthead" style="background-image: url('intro-bg.jpg');">
<div class="intro-body">
<div class="col">
<p class="intro-text" style="font-family: 'Century Gothic Paneuropean';font-size: 70px;"> </p>
</div><img src="assets/img/Icey_Animated-ezgif.com-resize%20(1).gif">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="intro-text" style="font-family: 'Century Gothic Paneuropean';font-size: 70px;">I'M ICEY</p>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center footer"></footer>
</div>
</header>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- scripts -->
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
particles.css
html,body{
width:100%;
height:100%;
background:#111;
position: relative;
z-index: 1;
}
.container {
position: relative;
z-index: 1;
}
/* ---- particles.js container ---- */
#particles-js{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
styles.css
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Bebas+Neue&family=Montserrat:wght@400;700&family=Playfair+Display+SC:wght@700&family=Playfair+Display:wght@700&display=swap'); @font-face{font-family:code_boldregular;src:url(code_bold-webfont.woff2) format('woff2'),url(code_bold-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:code_lightregular;src:url(code_light-webfont.woff2) format('woff2'),url(code_light-webfont.woff) format('woff');font-weight:400;font-style:normal}body{margin:0;box-sizing:border-box;height:100%;background-color:#101017;//font-family:'Inconsolata',Helvetica,sans-serif;font-family:montserrat,sans-serif;color:#f7f7f7}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#191a21}::-webkit-scrollbar-thumb{background:#0e3c86}a:hover{text-decoration:none}.hbox{background-color:#101017;color:#f7f7f7;padding:15px}canvas#c{position:absolute;left:0;top:0;width:100%;height:100%}.socialbox{padding:10px 5px;background:#101017;margin:5px;cursor:pointer;transition:all .5s ease}.socialbox:hover{background:linear-gradient(to right,#0e3c86,#01316d)}.socialbox h6{margin-bottom:0}.bg-main{background-color:rgba(16,16,23,.575)}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5);font-size:18px}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:rgba(255,255,255,.75)}.main-banner{height:100vh}@media only screen and (min-width:1000px){.vcm{margin-top:25vh}}@media only screen and (max-width:999px){.vcm{margin-top:15vh}}.text-75{color:rgba(255,255,255,.75)}section.about,.blue-grad{background:linear-gradient(to right,#0e3c86,#01316d)}.inner-about{padding:0 100px 50px}.about h1{font-size:34px}.about p{font-size:22px}@media only screen and (min-width:1661px){section.services{margin-top:-25rem}}@media only screen and (max-width:1660px){section.services{margin-top:-20rem}}@media only screen and (max-width:1400px){section.services{margin-top:-15rem}}@media only screen and (max-width:1000px){section.services{margin-top:-12rem}}@media only screen and (max-width:768px){section.services{margin-top:-7rem}}.service-card{padding:50px 30px;background-color:#191a21;position:relative;height:100%}.service-card::before,.service-card::after{content:'';display:block;width:3rem;height:3rem;background:#fff;position:absolute;z-index:5;-webkit-transition:.2s ease-in-out width,.2s ease-in-out height;-moz-transition:.2s ease-in-out width,.2s ease-in-out height;-o-transition:.2s ease-in-out width,.2s ease-in-out height;transition:.2s ease-in-out width,.2s ease-in-out height}.service-card::before{top:-1px;left:-1px}.service-card::after{bottom:-1px;right:-1px}.service-card:hover::after,.service-card:hover::before{width:calc(100% + 2px);height:calc(100% + 2px)}.service-card h4{font-weight:600}.service-card p{font-size:18px;font-weight:300}.service-card .tools{margin-top:3.5rem}.service-card .tools p{margin-bottom:5px}.service-card .tools p.tools-title{color:rgba(25,110,247)}.work{margin-top:7rem!important}.work h2{font-size:48px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#fff;font-weight:600;text-transform:uppercase;text-decoration:underline;text-decoration-color:rgba(25,110,247);text-decoration-thickness:2px;text-decoration-skip-ink:none;text-underline-position:under}.card{margin:10px 1%;background:#222;overflow:hidden;border-radius:10px;cursor:pointer}.card-img-top{width:100%;height:17vw;object-fit:cover}.card .imgBx,.card .details{width:100%;height:100%;position:absolute;border-radius:10px}.card .imgBx{padding:.5em;transition:left .5s;will-change:left}.card:hover .imgBx{top:0;left:-100%}.card .imgBx img{width:100%}.card .imgBx nav{position:relative;background:rgba(0,0,0,.35);width:34px;height:34px;color:#fff;border:1px solid #fff;border-radius:50%;margin:0;float:right}.card .imgBx nav:after{content:'•••';position:absolute;top:50%;left:49%;transform:translate(-50%,-50%) rotate(90deg);font-size:15px;letter-spacing:2px;margin-top:1px}.card .details nav{display:none;position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.35);width:34px;height:34px;color:#fff;border:1px solid #fff;border-radius:50%}.card .details nav:after{content:'X';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:15px;margin-top:0}.card .details{color:#fff;background:#191a21;top:0;left:100%;padding:0;transition:left .5s;will-change:left}.card:hover .details{top:0;left:0%}.card .detailsBGtouch{background:#444}.card .details h4{text-align:center;margin:0;padding:10px;border-bottom:2px solid #fff;margin-bottom:1em}.card .details p{margin:0;padding:1em;font-size:20px}.card .details a{margin:1em;color:#fff;background-color:#196ef7;padding:5px;border-radius:4px;font-size:16px}.card .details span{color:#999;display:block;line-height:2em;text-align:center;letter-spacing:10px}.card .details ul{margin:0;padding:0;list-style:none}.card .details li a{display:block;color:#fff;text-decoration:none;padding:5px 1em;background:#444;border-top:1px solid #666;border-bottom:1px solid #000;font-size:90%;line-height:1}.card .details li a:hover{background:#333}.logtxt{opacity:0;position:absolute;width:100%;height:40px;z-index:2;background:rgba(0,0,0,.5);margin:0}.modal-content{background-color:#0d0d11}.modal-header{border:none}.modal-footer{border:none}@media only screen and (min-width:1360px){.mtn{margin-top:-6rem}}@media only screen and (max-width:1360px){.mtn{margin-top:-2rem}}@media only screen and (max-width:860px){.mtn{margin-top:0}}section.clients{background-color:#14151d}.clients h2,.reviews h2{font-size:48px;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#fff;font-weight:600;text-transform:uppercase;text-decoration:underline;text-decoration-color:rgba(25,110,247);text-decoration-thickness:2px;text-underline-offset:1px;text-decoration-skip-ink:none;text-underline-position:under}.reviewbox{padding:50px 30px;background-color:#191a21;position:relative;height:100%;color:#fff}.reviewbox::before,.reviewbox::after{content:'';display:block;width:3rem;height:3rem;background:#fff;position:absolute;z-index:-1;-webkit-transition:.2s ease-in-out width,.2s ease-in-out height;-moz-transition:.2s ease-in-out width,.2s ease-in-out height;-o-transition:.2s ease-in-out width,.2s ease-in-out height;transition:.2s ease-in-out width,.2s ease-in-out height}.reviewbox::before{top:-1px;left:-1px}.reviewbox::after{bottom:-1px;right:-1px}.reviewbox:hover::after,.reviewbox:hover::before{width:calc(100% + 2px);height:calc(100% + 2px)}.review h3{margin-bottom:0!important}.review small{font-size:14px}.review p{font-size:18px}footer{background-color:#14151d;padding:30px 0 15px;position:absolute;width:100%}footer p{font-size:18px;margin-bottom:0}.img-hover-zoom{height:300px;overflow:hidden}.img-hover-zoom img{transition:transform .5s ease}.img-hover-zoom:hover img{transform:scale(1.125)}.lity-active,.lity-active body{overflow:hidden}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}