:root {
  --main:
    /*#f1bf1a;*/
    #2e2e2e;
  --white: #ffffff;
}

body {
  font-family: Avanta Garde;
}

h1 {
  font-family: "Montserrat Medium";
  max-width: 40ch;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

h1 span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

#start-main {
  animation: fade-in 0.1s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#start-sub {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.navbar-brand {
  padding-left: 21px;
}

.maintxtcustom {
  background-image: url(./img/dot-background.webp);
  background-size: cover;
  background-position: center;
  margin-top: -10px;
}

.marginleft2 {
  margin-left: 2ch;
}

.marginleft4 {
  margin-left: 4ch;
}

.carousel-item>img {
  width: auto;
  height: 640px;
}


#linkedin {
  color: var(--main);
}

.colouredtext {
  color: var(--main);
  text-decoration-color: var(--main);
}

.hoverwhite:hover {
  color: white;
  text-decoration-color: white;
}

#what-i-do {
  background-color: #bddfbd
}

#contact {
  background-color: rgba(226, 246, 205, 0.664)
}

#start-fg {
  background-color: #ffffff7c;
}

#about-me {
  /* Image by <a href="https://pixabay.com/users/smellypumpy-4101005/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1932611">smellypumpy</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1932611">Pixabay</a> */
  background-image: url(./img/about-me-bg.jpg);
  background-position: center;
  background-size: cover;
}

#about-me-portrait {
  shape-outside: url(/img/nati-free-less-right.png);
}

#bottom {
  background-color: gray;
}

@media (max-width: 768px) {
  .carousel-item>img {
    width: auto;
    height: 400px;
  }
}

.nolinks {
  text-decoration: none !important;
  color: inherit !important;
  pointer-events: none !important;
}

h6,
h5 {
  font-weight: bold;
}