events.css

.timeline {
     list-style: none;
     padding: 20px 0 20px;
     position: relative;
     color: white;
     text-align: center;
   }

   #particles-js{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;

}

.undefined{
  font-size: inherit;
}

   sup {position: relative;
  left: -0.35em; }

   .timeline:before {
     top: 0;
     bottom: 0;
     position: absolute;
     content: " ";
     width: 3px;
     background-color: #eeeeee;
     left: 50%;
     margin-left: -1.5px;
   }

   .timeline > li {
     margin-bottom: 50px;
     position: relative;
   }

   .timeline > li:before,
   .timeline > li:after {
     content: " ";
     display: table;
   }

   .timeline > li:after {
     clear: both;
   }

   .timeline > li:before,
   .timeline > li:after {
     content: " ";
     display: table;
   }

   .timeline > li:after {
     clear: both;
   }

   .timeline > li > .timeline-panel {
     width: 46%;
     float: left;
     border: 2px dashed #d4d4d4;
     border-radius: 25px;
     padding: 3%;
     position: relative;
     -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
     background: rgba(255, 255, 255, 0);
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
     -webkit-backdrop-filter: blur(1em);
     backdrop-filter: blur(1em);
     -moz-backdrop-filter:blur(1em);
      background-color: rgba(255, 255, 255, .05);
}
   .timeline > li > .timeline-panel:before {
     position: absolute;
     top: 26px;
     right: -15px;
     display: inline-block;
     border-top: 15px solid transparent;
     border-left: 15px solid #ccc;
     border-right: 0 solid #ccc;
     border-bottom: 15px solid transparent;
     content: " ";
   }

   .timeline > li > .timeline-panel:after {
     position: absolute;
     top: 27px;
     right: -14px;
     display: inline-block;
     border-top: 14px solid transparent;
     border-left: 14px solid #fff;
     border-right: 0 solid #fff;
     border-bottom: 14px solid transparent;
     content: " ";
   }

   .timeline > li.timeline-inverted > .timeline-panel {
     float: right;
   }

   .timeline > li.timeline-inverted > .timeline-panel:before {
     border-left-width: 0;
     border-right-width: 15px;
     left: -15px;
     right: auto;
   }

   .timeline > li.timeline-inverted > .timeline-panel:after {
     border-left-width: 0;
     border-right-width: 14px;
     left: -14px;
     right: auto;
   }

   .timeline-badge.night {
     background-color: #2e6da4 !important;
   }

   .timeline-badge.green {
     background-color: #3f903f !important;
   }

   .timeline-badge.yellow {
     background-color: #f0ad4e !important;
   }

   .timeline-badge.red {
     background-color: #d9534f !important;
   }

   .timeline-badge.sky {
     background-color: #5bc0de !important;
   }

   .timeline-title {
     margin-top: 0;
     color: inherit;
   }

   .timeline-body > p,
   .timeline-body > ul {
     margin-bottom: 0;
   }

   .timeline-body > p + p {
     margin-top: 5px;
   }

   #universe {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: auto;
    background-position: center 40%;
    background-repeat: no-repeat;
  background-attachment: fixed;
    background-size: cover; }

    body {
      background-color: #08090A;
    background-attachment: fixed;
     }
    h3{
      margin-top: 14px;
     }
     i{
       margin-top: 17px;
     

	list-style: none;
	padding: 20px 0 20px;
	position: relative;
	color: #fff;
	text-align: center
}

#particles-js {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .1);
	position: fixed
}

sup {
	position: relative;
	left: -.35em
}

.timeline:before {
	top: 0;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 3px;
	background-color: #eee;
	left: 50%;
	margin-left: -1.5px
}

.timeline>li {
	margin-bottom: 50px;
	position: relative
}

.timeline>li:after,
.timeline>li:before {
	content: " ";
	display: table
}

.timeline>li:after {
	clear: both
}

.timeline>li:after,
.timeline>li:before {
	content: " ";
	display: table
}

.timeline>li:after {
	clear: both
}

.timeline>li>.timeline-panel {
	backdrop-filter: blur(.8);
	-webkit-backdrop-filter: blur(.8);
	width: 46%;
	float: left;
	border: 2px dashed #d4d4d4;
	border-radius: 25px;
	padding: 1%;
	position: relative;
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .175);
	background: rgba(255, 255, 255, 0);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .175);
	background: hsla(0, 0%, 100%, .08)
}

.timeline>li>.timeline-panel:before {
	position: absolute;
	top: 26px;
	right: -15px;
	display: inline-block;
	border-left: 15px solid #ccc;
	border-right: 0 solid #ccc;
	border-bottom: 15px solid transparent;
	content: " "
}

.timeline>li>.timeline-panel:after {
	position: absolute;
	top: 27px;
	right: -14px;
	display: inline-block;
	border-left: 14px solid #fff;
	border-right: 0 solid #fff;
	border-bottom: 14px solid transparent;
	content: " "
}

.timeline>li>.timeline-badge {
	color: #fff;
	width: 60px;
	height: 60px;
	line-height: 20px;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -30px;
	background-color: #999;
	z-index: 100;
	border-radius: 50%;
}

.timeline>li.timeline-inverted>.timeline-panel {
	float: right;
	backdrop-filter: blur(.8);
	-webkit-backdrop-filter: blur(.8)
}

.timeline>li.timeline-inverted>.timeline-panel:before {
	border-left-width: 0;
	border-right-width: 15px;
	left: -15px;
	right: auto
}

.timeline>li.timeline-inverted>.timeline-panel:after {
	border-left-width: 0;
	border-right-width: 14px;
	left: -14px;
	right: auto
}

.timeline-badge.danger {
	background-color: #d9534f!important
}

.timeline-title {
	margin-top: 0;
	color: inherit
}

.timeline-body>p,
.timeline-body>ul {
	margin-bottom: 0
}

.timeline-body>p+p {
	margin-top: 5px
}

body {
	background-color: #08090a;
	background-attachment: fixed
}

h3 {
	margin-top: 14px
}

i {
	margin-top: 17px
}


body {
  background-image: url(img/Bodyback.jpg); }

@media only screen and (max-width: 768px) {
  .timeline > li > .timeline-panel {
    /* position: absolute; */
    left: 40px;
    width: 85%;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: left;
    width: 85%;
  }
  .timeline > li > .timeline-panel::after{
    display: none;
  }
  .timeline > li > .timeline-panel::before{
    display: none;
  }
  .timeline:before {
    left: 30px;
  }
  .timeline > li > .timeline-badge{
    left: 30px;
  }

}