@import url('https://fonts.googleapis.com/css?family=Niramit');
@import url('https://fonts.googleapis.com/css?family=Niramit|Noto+Sans+TC');
 body {
   display: grid;
   grid-template-rows: 1fr 430px 100px;
   margin: 0;
   padding: 0;
   background-color: #343D46;
   font-size: 16px;
 }
 .search-section {
  display: flex;
  justify-content: center;
  padding-top: 40px;
 }
 .search-video {
  height: 40px;
  min-width: 50%;
  border: 0px;
  padding-left: 5px;
  border-radius: 5px 0px 0px 5px;
  outline: none;
  font-size: 1rem;
  background-image: linear-gradient(to right,#fff , #F1F1F1);
 }
 .search-button {
  border-radius: 0px 5px 5px 0px;
  border: 0px;
  background-color: #FFFFFF;
  background-color: rgb(46, 46, 46);

 }
 .items-section {
   position: relative;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   overflow: hidden;
   margin: 20px auto 0px;
   width: 100%;
   height: 100%;
  font-family: 'Niramit', sans-serif;
 }
 .item {
  position: relative;
  margin: 10px 10px 0;
  width: 240px;
  height: 400px;
  background-color: #FFFFFF;
  border-radius: 5px;
}
.image-video {
  background-position: center;
  border-radius: 5px 5px 0 0;
}
.image-link {
}
.links {
  position: absolute;
  display: block;
  bottom: 230px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  max-height: 100px;
  padding: 5px;
  text-align: center;
  color: #Fff;
  font-size: 1rem;
  font-family: 'Niramit', sans-serif;
  text-decoration: none;
  background-color: rgba(52, 168, 83, 0.8);
}
.links:hover {
  color: #434343;
  transition: color 100ms;
}
.channel-title, .published-at, .watchs {
  text-align: center;
  max-height: 25px;
  overflow: hidden;
  font-size: 1rem;
}
.description {
  box-sizing: border-box;
  max-height: 120px;
  padding: 5px 10px 5px 10px;
  overflow: hidden;
  text-align: justify;
  font-size: 1rem;
}
.preloader {
  position: absolute;
  box-sizing: border-box;
  animation-name: preloader; 
  animation-duration: 1s;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-bottom-color: black;
}
.pages {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 100%;
  transition: left 200ms ease 0s;
}
.navigate {
  display: flex;
  justify-content: center;
  align-items: center;
}
.points {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin: 0 10px 0;
  border-radius: 50%;
  border: 5px solid black;
  cursor: pointer;
  text-align: center;
  line-height: 20px;
  font-size: 0.8rem;
  font-family: 'Niramit', sans-serif;
}
.-selected {
  background-color: #FFFFFF;
}
@keyframes preloader {
  100% {
    transform: rotate(360deg);
  }
}