figure {
  text-align: center;
}
#colour {
    background: linear-gradient(to top right, #FFCBA4, #FFFFFF);
    background-repeat: no-repeat;
    height: 100vh;
}
body {
    background: linear-gradient(to top right, #FFCBA4, #FFFFFF);
}

h3 {
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}
  
h1 {
    font-family: 'Sono', sans-serif;
    font-size: 45px;
}
h1 span {
    background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 19px;
    transform: rotate(11deg);
    display: inline-block;
}

.intro {
  width: 85%;
  align-self: center;
}

.my-5 {
  background: black;
  border-radius: 42px;
}

.card-header {
  background: chartreuse;
}

.card-body {
  display: flex;
  flex-direction: column;
  background: transparent;
}


/* pop effect for navbar */

.navbar-nav a {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.navbar-nav a::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ac289a;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-in-out;
}

.navbar-nav a:hover::before {
  transform: scaleX(1);
}

.navbar-nav a:hover {
  color: #1a0fa7;
}

.img-container {
  text-align: center;
  margin: 10px 0 10px 0;
}

#folder-structure {
  border-radius: 2px;
}

.game-image {
  border-radius: 8px;
  object-fit: cover;
  width: 77%;
  align-self: center;
}

/* bottom footer */

#footer {
  position: sticky;
  width: 100%;
  bottom: 0;
}

.text-center {
  color: azure;
}

  /* ---------------------------------------------------------------------------------------------------- */

.video-container {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 77px;
}

.video-container video {
  width: 58%;
}