* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  /* background: gray; */
  border: 2px;
}

.timeline-subheading {
  padding-top: 70px;
}

.timeline-subheading>h1 {
  font-size: 50px;
  color: white;
}

.timeline-subheading>.heading-bar>hr {
  width: 100%;
  border-radius: 20px;
}

.timeline-subheading>.heading-bar {
  display: flex;
  justify-content: center;
}

.timeline-section {
  height: 100vh;
  padding: 2rem;
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
  background: radial-gradient(circle at 10% 20%, rgb(0, 0, 0) 0%, rgb(64, 64, 64) 90.2%);
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
  background: linear-gradient(112.1deg, #0f0d0d 11.4%, #010000 70.2%);
  background: #fff url(https://st3.depositphotos.com/1755195/14595/i/450/depositphotos_145959345-stock-photo-blank-black-gradient-texture-background.jpg) center center/cover no-repeat fixed;
  background: #fff url(https://media.istockphoto.com/id/1363717602/photo/abstract-red-and-black-are-light-pattern-with-the-gradient-is-the-with-floor-wall-metal.jpg?b=1&s=170667a&w=0&k=20&c=65eg33IjRk1hFWR5lTxFFGw5tqS9nOuqZQZC4rHj3Rc=) center center/cover no-repeat fixed;
}

.timeline {
  width: 100%;
  height: 480px;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
  /* background: #000; */
  overflow: auto;
  display: flex;
  font-size: 1.2em;
}

.timieline-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}

.timeline-content {
  max-width: 300px;
  height: 200px;

  padding: 20px;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-start;
  background: #fff;
  position: relative;
  border-radius: 10px;
  margin-right: 10px;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
  /* glass effect */
  background: rgba(27, 26, 26, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 90, 135, 0.37);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #848484;
  line-height: 1.5rem;
}

.timeline-content:before {
  position: absolute;
  width: calc(100% + 14px);
  height: 4px;
  top: calc(100% + 10px);
  background: #fff;
  content: "";
  left: -7px;
  border-radius: 5px;
}

.timeline-content:after {
  position: absolute;
  width: 4px;
  height: 25px;
  top: 100%;
  left: calc(50% - 10px);
  background: #fff;
  content: "";
}

.timeline-period {
  position: absolute;
  top: calc(100% + 25px);
  background: #fff;
  padding: 10px;
  min-width: 100px;
  text-align: center;
  border-radius: 10px;
  left: calc(50% - 60px);
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
  /* glass effect */
  background: rgba(27, 26, 26, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 73, 135, 0.37);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  line-height: 1.5rem;
}

.timeline-period:before {
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -20px;
  left: calc(50% - 10px);
  z-index: 2;
}

.timeline-content:nth-child(even) {
  align-self: flex-end;
}

.timeline-content:nth-child(even):before {
  top: -15px;
}

.timeline-content:nth-child(even):after {
  top: -25px;
}

.timeline-content:nth-child(even) .timeline-period {
  top: -60px;
}

.timeline-content:nth-child(even) .timeline-period:before {
  top: calc(100% + -6px);
}

/*# sourceMappingURL=style.css.map */

@media (min-width: 900px) {
  .timeline-section {
    padding-bottom: 5%;
  }
}

@media (max-width: 900px) {
  .timeline-section {
    padding-bottom: 15%;
  }
}

@media (max-width: 750px) {
  .timeline-section {
    padding-bottom: 20%;
  }
}

@media (max-width: 500px) {
  .timeline-section {
    padding-bottom: 25%;
  }
}

@media (max-width: 350px) {
  .timeline-section {
    padding-bottom: 35%;
  }
}