bootstrap Carousel buttons don’t work and indicators don’t show

I am basically trying to recreate a bootstrap carousel with indicators but in my code I cannot see the indicators and the previous/next buttons don’t work. I have found an alternate solution that I could adapt here but I would like to understand where mine goes wrong, as it’s pretty much copy-pasted from Bootstrap’s site. HTML and CSS Below:

/* Define our custom colors */
:root{
  --livingcoral: #FC766AFF;
  --stormgray: #B0B8B4FF;
  --forestbiome: #184A45FF;
  --sagegreen: #567572FF;
  --marsala: #964F4CFF;
  --granitegray: #696667FF;
  --blacksteel: #080706;
  --paper: #EFEFEF;
  --goldleaf: #D1B280;
  --silver: #594D46;
}

/* Boilerplate CSS for box sizing and body */
* {
  box-sizing: border-box;
}

body{
  background-color: var(--paper);
  font-family: Georgia, Times, Courier;
  color: var(--blacksteel);
}

/* Top Bar including opacity transition */
#welcome {
  color: var(--paper);
  text-align: center;
  background-color: var(--blacksteel);
  font-family: Courier, Times, Georgia;
  transition: opacity 0.5s;
  cursor: default;
  /* background-image: url("BlueBuilding.jpg") */
}

#welcome:hover{
  opacity: 0.7;
}

/* Top left personal quote, including transition when hovering */
#top-left-motivation{
  text-align: left;
  color: var(--silver);
  overflow: hidden;
  cursor: default;
}

.quote, .text {
  display: block;
  overflow: hidden;
  transition: opacity 0.8s ease-in-out;
}

.quote{
  height: auto;
  width: auto;
  opacity: 1;
}

.text{
  height: 0;
  width: 0;
  opacity: 0;
}

#top-left-motivation:hover .quote{
  height: 0;
  width: 0;
  opacity: 0;
}
#top-left-motivation:hover .text{
  height: auto;
  width: auto;
  opacity: 1;
  font-style: italic;
}


/* Top right list including link hover effects */
#top-right-list{
  text-align: right;
  font-family: Georgia;
}

.list-inline-item{
  text-align: right;
  margin-left: 15px;
}

.info-link{
  color: var(--silver);
  transition: color 0.3s, border 0.3s, padding 0.3s;
}

.info-link:link { text-decoration: none; }

.info-link:visited { text-decoration: none; }

.info-link:hover {
  color: var(--goldleaf);
  text-decoration: none;
  cursor: pointer;
  border-top: 1px solid var(--goldleaf);
  border-bottom: 1px solid var(--goldleaf);
  /* background-color: lightskyblue; */
  /* border-radius: 2px; */
  padding: 4px 5px 5px 5px;
}

.info-link:active {
  text-decoration: none;
  color: brown;
}

/* personalt statement formatting */
#personal-statement{
  text-align: center;
  font-family: Georgia;
  /* color: #327c9c; */
}

#maincarousel{
  margin: 100px 100px 100px 100px;
  padding: 50px 50px 50px 50px;
  background-color: var(--silver);
  border-radius: 5px;
  color: var(--paper);
}


/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

/* Uncomment if you want the circles on the timeline */
.timeline::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--paper);
  border: 2px solid var(--blacksteel);
  border-radius: 50%;
  z-index: 2;
  left: calc(50% - 7px);
  top: 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: var(--blacksteel);
    top: 2px;
    bottom: 0px;
    left: 50%;
}

.container-timeline {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* For Javascript to hide/reveal elements on scroll */
.container-timeline {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.container-timeline.show{
  transform: none;
  visibility: visible;
  opacity: 1;
}

.left-side {
  left: 0;
}

.right-side {
  left: 50%;
  text-align: right;
}

/* Add lines to the left container (pointing right) */
.left-side::before {
  content: " ";
  height: 2px;
  position: absolute;
  top: 30px;
  width: 40px;
  z-index: 1;
  right: 0px;
  background: var(--blacksteel);
}

/* Add lines to the right container (pointing left) */
.right-side::before {
  content: " ";
  height: 2px;
  position: absolute;
  top: 30px;
  width: 40px;
  z-index: 1;
  left: 0px;
  background: var(--blacksteel);
}

/* Fix the circle for containers on the right side */
.right-side::after {
  left: -9px;
}

/* The actual content */
.content-timeline {
  padding: 20px 30px;
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--blacksteel);
}

.left-side .content-timeline {
  background: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}

.right-side .content-timeline {
  background: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}

/* format the timeline boxes */
.timeline-heading{
  color: var(--paper);
  font-family: Courier;
}
.left-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .timeline-heading{
  border-image-slice: 1;
  border-bottom: 1px solid;
  border-image-source: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}

.timeline-text{
  color: var(--paper);
  font-family: Georgia;
  text-decoration: bold;
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
    .timeline::after {
      left: 25px;
    }

    .timeline::before {
      left: 18px;
    }

  /* Full-width containers */
  .container-timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all lines are pointing leftwards */
  .container-timeline::before {
    left: 30px;
  }

  /* Make sure all circles are at the same spot */
  .left-side::after, .right-side::after {
    left: 15px;
  }

  /* Make all right containers behave like the left ones */
  .right-side {
    left: 0%;
  }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>work exp.</title>
    </head>
    <body class="workexp">
        <h1  id="welcome">
            Work experience.
         </h1>
         <div class="container-fluid" id="head">
             <div class="row justify-content-md-center">
                 <div class="col" id="top-left-motivation">
                     <span class="quote">Personal Quote.</span>
                     <span class="text">Transition text</span>
                 </div>
                 <div class="col" id="top-right-list">
                     <ul class="list-inline">
                         <li class="list-inline-item"><a class="info-link" href="index.html" class="">Home.</a></li>
                         <li class="list-inline-item"><a class="info-link" href="aboutme.html">About me.</a></li>
                         <li class="list-inline-item"><a class="info-link" href="contact.html">Contact.</a></li>
                     </ul>
                 </div>
             </div>
         </div>
         <div id="maincarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#maincarousel" data-slide-to="0" class="active"></li>
              <li data-target="#maincarousel" data-slide-to="1" class=""></li>
              <li data-target="#maincarousel" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active text-center p-4">
                     <p>lorem ipsum (imagine longer text)</p>
                </div>
                <div class="carousel-item text-center p-4">
                    <p>lorem ipsum v2 (imagine longer text)</p>
                </div>
                    <div class="carousel-item text-center p-4">
                    <p>lorem ipsum v2 (imagine longer text)</p>
                </div>
            </div>
            <a class="carousel-control-prev" href="#maincarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#maincarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only"></span>
            </a>
          </div>
    </body>
</html>

Also JSfiddle here https://jsfiddle.net/j9skLwye/2/

Any help appreciated.