/*  Test_1 ////////////////////////////////////////////////////////*/

/* Relative Path: ../wallpaper/Test_1/ */

body.test_1-mode {
  --left-section-color: #c3c3c34e;

  --contain-color_1: #70707036;
  --message-box-color: rgba(255, 255, 255, 1);

  --message-box-name-color: black;
  --message-box-original-color: #555;
  --message-box-translate-color: black;
  --message-box-error-color: red;
  --message-box-system-color: green;
  --message-box-chatTime-color: #555;
  --message-box-streamTime-color: black;

  --buttom-menu-color:
    url('../wallpaper/Test_1/img/menu.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-menuback-color:
    url('../wallpaper/Test_1/img/menuback.png') center / 70% no-repeat,
    #0c535f center / 100% no-repeat;
  --buttom-chat_OFF-color:
    url('../wallpaper/Test_1/img/chat.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-chat_ON-color:
    url('../wallpaper/Test_1/img/chat-active.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-summary-color:
    url('../wallpaper/Test_1/img/summary.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-subtitles-color:
    url('../wallpaper/Test_1/img/subtitles.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-colorpalette_ON-color:
    url('../wallpaper/Test_1/img/palette.png') center / 80% no-repeat,
    #007BFF center / 100% no-repeat;
  --buttom-home-color:
    url('../wallpaper/Test_1/img/home.png') center / 70% no-repeat,
    #007BFF center / 100% no-repeat;
}


body.test_1-mode .slideshow {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

body.test_1-mode .slideshow img {
  position: absolute;
  height: 100%;
  width: auto;
  min-height: 45vw;
  min-width: 100vw;

  opacity: 0;
  animation: fade 50s infinite linear;
}

body.test_1-mode .slideshow img:nth-child(1) {animation-delay: 0s;}
body.test_1-mode .slideshow img:nth-child(2) {animation-delay: 10s;}
body.test_1-mode .slideshow img:nth-child(3) {animation-delay: 20s;}
body.test_1-mode .slideshow img:nth-child(4) {animation-delay: 30s;}
body.test_1-mode .slideshow img:nth-child(5) {animation-delay: 40s;}

@keyframes fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  20%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}