.slidingImage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16%;
  margin-bottom: 5%;
}

.slider {
  /* width: 300px; */
  /* height: 150px; */
  /*  simula sa border attribute hanggang sa margin auto left ang dinagdag dito sa line na ito para ma achieve ang rainbow curve div ng top simage slider sa second page ng portal */
  border: double 5px transparent;
  background-image: linear-gradient(rgb(48, 34, 68), rgb(48, 34, 68)),
    linear-gradient(
      to bottom right,
      #b827fc 0%,
      #2c90fc 25%,
      #b8fd33 50%,
      #fec837 75%,
      #fd1892 100%
    );
	
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin-left: auto;
  margin-right: auto;
  
  width: 100%;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}

.slides {
  width: 1000%;
  /* height: 150px; */
  height: auto;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 10%;
  transition: 2s;
}

.slide img {
  /* width: 700x; */
  /* height: 150px; */
  width: 100%;
  height: auto;
}

/*Below is good for 5 pictures ONLY*/
#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -10%;
}

#radio3:checked ~ .first {
  margin-left: -20%;
}

#radio4:checked ~ .first {
  margin-left: -30%;
}

#radio5:checked ~ .first {
  margin-left: -40%;
}

/*css for automatic navigation*/
.navigation-auto {
  position: absolute;
  width: 300px;
  margin-top: 130px;
  display: flex;
  justify-content: center;
  visibility: hidden;
}

.navigation-auto div {
  border: 1.5px solid #f9fafb;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  /*visibility: hidden;*/
}

.navigation-auto div:not(:last-child) {
  margin-right: 20px;
}

#radio1:checked ~ .navigation-auto .auto-btn1 {
  background: #0967f9;
}

#radio2:checked ~ .navigation-auto .auto-btn2 {
  background: #0967f9;
}

#radio3:checked ~ .navigation-auto .auto-btn3 {
  background: #0967f9;
}

#radio4:checked ~ .navigation-auto .auto-btn4 {
  background: #0967f9;
}

#radio5:checked ~ .navigation-auto .auto-btn5 {
  background: #0967f9;
}
