/* Body setup */

body {
  overflow: auto;

  margin: 0;
  padding: 0;

  background: rgb(15, 7, 186);
}

/* End Body setup */

/* Canvas setup */

canvas {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}

/* End Canvas setup */

/* Current Project */

.current {
  color: blue;
}

/* End Current project  */

/* Worked */

.worked {
  color: green;
}

/* End Worked */

/* Coming Soon */

.coming-soon {
  color: red;
}

/* End Coming Soon */

/* Blog */

.blog {
  color: black;
}

/* End Blog */

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  height: 0;

  transition: top 0.2s ease-in-out;
  text-align: center;
}

header>div {
  display: inline-block;
  /* min-width: 346px; */

  padding: 5px;

  border-radius: 0px 0px 15px 15px;
  background: white;
  box-shadow: 0px 1px 3px grey;
}

/* Tag line setup */

#tag-line {
  position: relative;
  top: 45%;
  left: 50%;

  width: 50%;
  min-width: 250px;

  transform: translate(-50%, -50%);

  color: black;

  font-weight: 500;
}

/* End Tag line setup */

#lead-down {
  z-index: 10;
  right: 0;
  bottom: 15px;
  left: 0;

  display: block;

  width: 100%;
  height: 10vh;

  text-align: center;

  color: black;
}

#lead-down span {
  display: block;

  width: 35px;
  height: 35px;
  margin: 0 auto;

  text-align: center;

  border: 3px solid white;
  border-radius: 50%;
}

#lead-down i {
  padding-top: 8px;

  animation: pulsate 1.5s ease;
  animation-iteration-count: infinite;

  color: white;
}

.nav-item {
  display: inline-block;
  float: left;
}

.contact-content {
  width: 85%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
}

.skill-logo {
  width: 85%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;

  border-radius: 15px;
  background-color: white;
}

.logo {
  width: 120px;
  height: 120px;
  margin: 5px;
  padding: 0px;
}

#work, #skills, #contact {
  width: 100%;
  height: auto;
  margin-top: 70px;

  text-align: center;
}

#contact {
  margin-bottom: 30px;

  font-size: 20px;
}

#work {
  margin-right: auto;
  margin-left: auto;
}

/* Due to map i have to split it from above style */

#about {
  margin-top: 70px;
}

#work-nav {
  display: inline-block;

  border-radius: 50px;
  background-color: white;
}

#work-cards {
  width: 95%;
  min-height: 70vh;
  margin-right: auto;
  margin-left: auto;
  padding-top: 70px;
}

.card {
  width: 400px;
}

.work-card {
  padding: 10px;
}

.work-card-body {
  min-height: 200px;

  text-align: left;
}

.work-card-profile {
  width: 100%;
  height: auto;
  margin: 0px;
}

.content-title {
  display: inline-block;

  width: 200px;

  font-size: 25px;
}

#work .animated {
  -webkit-animation-duration: 0.5s;
}

.card-description {
  font-weight: 500;
}

#work .card-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;

  height: auto;

  text-align: justify;
  text-overflow: ellipsis;
  text-overflow: ellipsis;

  text-shadow: 0px 0px 0px;

  font-weight: 500;

  -webkit-line-clamp: 4;
}

.card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;

  height: auto;

  text-overflow: ellipsis;

  font-weight: 500;

  -webkit-line-clamp: 1;
}

@keyframes pulsate {
  0% {
    transform: scale(1, 1)
  }
  50% {
    transform: scale(1.3, 1.3)
  }
  100% {
    transform: scale(1, 1)
  }
}

/* Responsive cards */

div.gallery:hover {
  box-shadow: 1px solid grey;
}

/* Responsive cards Ends */

.about-card-profile {
  width: 80%;
  margin-top: 90px;
  margin-right: auto;
  margin-left: auto;

  background: white;
}

#map-container {
  width: 85%;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;

  border-radius: 15px;
  background-color: WHITE;
}

#container {
  position: relative;

  width: 95%;
  margin-right: auto;
  margin-left: auto;

  font-size: 1em;
}

#container>h3 {
  position: absolute;
  left: 50%;

  margin-top: 1%;

  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);

  color: black;
  border-bottom: 2px solid black;

  font-size: 2em;
}

/* To the body element */

.noscroll {
  overflow: hidden;
}

.overlay {
  position: fixed;
  top: 0;
  top: 0;
  bottom: 0;
  left: 0;

  overflow-y: scroll;
}

[aria-hidden="true"] {
  z-index: -1;

  width: 100%;

  transition: opacity 1s, z-index 0s 1s;

  opacity: 0;
}

[aria-hidden="false"] {
  z-index: 1;

  width: 100%;

  transition: opacity 0.5s;

  opacity: 1;
}

.overlay div {
  width: 80%;
  margin: 15vh auto;
  margin-top: 5vh;
  padding: 30px;

  color: black;
  border-radius: 15px;
  background: rgba(255, 255, 255, .95);
}

.overlay {
  background: rgba(40, 40, 40, 0.9);
}

article p {
  margin-top: 20px;
  margin-bottom: 20px;
}

article div a {
  color: #28666c;
}

article div a:hover {
  color: black;
}

article div div img {
  max-width: 100%;
  margin: 10px;

  vertical-align: middle;
}

article div img {
  margin: 10px;
}

/* Media Queries */

/* Media Query for Navigation Bar */

@media screen and (max-width: 543px) {
  .work-nav-link {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}

@media screen and (max-width: 447px) {
  .work-nav-link {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

@media screen and (max-width: 397px) {
  .work-nav-link {
    padding-top: 7px !important;
    padding-right: 5px !important;
    padding-bottom: 7px !important;
    padding-left: 5px !important;
  }
}

/* End Media Query for Navigation Bar */

/* Media Queries for World Map */

@media only screen and (max-width: 1150px) {
  #container {
    font-size: 0.8em;
  }
  #container>h3 {
    font-size: 2em;
  }
}

@media only screen and (max-width: 950px) {
  #container {
    font-size: 0.7em;
  }
  #container>h3 {
    font-size: 1.8em;
  }
}

@media only screen and (max-width: 840px) {
  #container {
    font-size: 0.6em;
  }
  #container>h3 {
    font-size: 1.6em;
  }
}

@media only screen and (max-width: 775px) {
  #container {
    display: none;
  }
  .about-card-profile {
    margin-top: 130px;
  }
}

/*End Media Queries for World Map */

/* Media Queries o=for Overlay */

@media only screen and (max-width: 750px) {
  .overlay div {
    width: 100%;
    margin: 0px;
    padding: 30px;

    border-radius: 0px;
    background: rgba(255, 255, 255, 1);
  }
  .overlay {
    background: rgba(255, 255, 255, 1);
  }
}

/* EndMedia Queries o=for Overlay */

/* End Media Queres */

/* Particle JS CSS */

/* ---- reset ---- */
canvas {
  display: block;

  vertical-align: bottom;
}
/* ---- particles.js container ---- */

#particles-js {
  position: absolute;

  width: 100%;
  height: 100%;

  background-color: #0f07ba;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

/* ---- stats.js ---- */

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;

  width: 80px;
  padding-bottom: 2px;

  text-align: left;
  text-indent: 4px;

  color: #13E8E9;
  background: #000022;

  font-family: Helvetica, Arial, sans-serif;
  font-size: .8em;
  font-weight: bold;
  line-height: 14px;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats, .count-particles {
  margin-top: 5px;
  margin-left: 5px;

  -webkit-user-select: none;
}

#stats {
  overflow: hidden;

  border-radius: 3px 3px 0 0;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

/* End Particle JS CSS */