body {
  color: #c7c8c8;
  position: relative;
  background-color: black;

  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;

  /* required for scrollanime */
  max-width: 100%;
  height: 100%;
}

html {
  /* required for scrollanime */
  height: 100%;
}

h2 {
  color: #a6a7a7;
}

h6 {
  font-weight: 700;
}

p,
modal-subdesc1,
modal-subdesc2 {
  font-weight: 600;
}

/* * {
  outline: solid 1px red;
} */
.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #444 3px solid;
}

.navbar-custom {
  background-color: #111;
  border-bottom: 2px dotted #333;
}

#logo {
  font-family: "Halant", serif;
}

.dark-overlay {
  position: relative;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;

  min-height: 200px;

  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(../img/dots6.jpeg);

  overflow: hidden;
  /* causing overflow for whole site */

  /* for fixed background effect
  works only on PC, not mobile */
  background-attachment: fixed;
}

.darker-overlay {
  position: relative;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(17, 17, 17, 0.9);
  border-bottom: 2px solid #333;

  background: linear-gradient(rgba(17, 17, 17, 0.98), rgba(17, 17, 17, 0.98)),
    url(../img/dots5.jpeg);
}

.darkest-overlay {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 1);
}

#video-play .dark-overlay {
  padding-top: 30px;
}

#video-play {
  min-height: 200px;
  text-align: center;
  color: #fff;
}

#video-play a {
  color: #fff;
}

.modal-backdrop {
  opacity: 0.8 !important;
}
.modal-content,
.modal-header {
  border: 1px solid #000000;
  background-color: #222;
  border-bottom: #000000;
}

.modal-body {
  /* background-color: #333; */
  border: 1px solid #000000;
  background-color: #333;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.close {
  color: white;
}

.close:hover {
  color: #cccccc;
}

.gal-img:hover {
  opacity: 1;
}

.gal-img {
  opacity: 0.9;
}

#gallery-section {
  padding-top: 20px;
}

.container {
  max-width: 1010px;
}

#about-me .container {
  max-width: 800px;
}

#me-text {
  max-width: 375px;
}

.text-my-own-color a {
  color: #71c9e9 !important;
}

.text-my-own-color a:hover,
.text-my-own-color a:active {
  color: #9ed4e8 !important;
}

#copyright {
  color: #333333;
}