:root {
  --theme-01-bg: #FFF; 
  --theme-02-bg: #666;
  --theme-03-bg: linear-gradient(-45deg, red , yellow, red);
  --theme-04-bg: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  --theme-05-bg: url('../img/anime-room-background-01.gif');
  --theme-06-bg: url('../img/anime-room-background-02.gif');
  --theme-07-bg: url('../img/anime-room-background-03.gif');
  --theme-file-bg: 'file';
}

body {
  font-family: Arial, Verdana;
  position: relative; 
  width: 100%;
  height: 100vh;
  margin: 0;
}

.text-title {
  padding: 15px;
  font-size: 3em;
  font-family: Times;
  font-weight: bold;
}


/*
 * Theme Menu
 * */
.theme-options {
  padding-top: 20px;
  width: 100%;
  
  .input-title {
      margin: 22px;
    }


  ul {
    margin: auto;
    width: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 40px;
    list-style-type: none;
    
    li {
      border-radius: 5px;
      border: 2px solid #DDD;
      margin: 3px;
      background-size: 32px; 
      height: 35px;
    }
    
  
   .theme-01 {
     background-color: var(--theme-01-bg); 
   }
   .theme-02 {
     background-color: var(--theme-02-bg); 
   }
   .theme-03 {
     background: var(--theme-03-bg);
   }
   .theme-04 {
     background: var(--theme-04-bg);
   }
   .theme-05 {
     background: var(--theme-05-bg);
   }
   .theme-06 {
     background: var(--theme-06-bg);
   }
   .theme-07 {
     background: var(--theme-07-bg);
   }
   .theme-08 {
     background: var(--theme-file-bg);
     background-size: 200%;
   }
  }
} 


/*
 * Body Effects
 * */

.body-effect-01 {
  color: #000!important; 
  background-color: var(--theme-01-bg)!important; 
  transition: background-color 0.5s ease-in!important;
  .text-title {
    font-family: Times !important;
  }
}

.body-effect-02 {
  color: #FFF!important;
  background: var(--theme-02-bg);!important;
  transition: background-color 0.5s ease-out!important;
    #timer {
    background: black !important;
  }
  .text-title {
    font-family: Verdana !important;
    font-size: 3em;
  }

}

.body-effect-03 {
  color: #FFF!important;
  background-image: var(--theme-03-bg)!important;
  transition: background-image 0.5s ease-in!important;
  background-size: 150% 150%!important;
  animation: gradient 10s ease infinite!important;
  
  #timer {
    background: transparent !important;
  }
  
  .text-title {
    font-family: Arial;
    font-style:italic;
    font-size: 3em;
  }

}

.body-effect-04 {
  background-image: var(--theme-04-bg)!important;
  background-size: 400% 400%!important;
  animation: gradient 15s ease infinite!important;
  
  .text-title {
    font-family: Arial;
    font-size: 2.5em;
    text-shadow: 1px 1px #FFF;
  }
}

.body-effect-05 {
  color: #000!important; 
  background: var(--theme-05-bg)!important;
  background-size: 100%!important;
  height: 100vh!important;
 
  .text-title {
    font-family: Arial;
    font-size: 2.5em;
    text-shadow: 1px 1px #FFF;
  }
  #timer {
    background-color: #FFFFFF53 !important;;
  }
}

.body-effect-06 {
  color: #000!important; 
  background: var(--theme-06-bg)!important;
  background-size: 100%!important;
  height: 100vh!important;
  
    .text-title {
    color: whitesmoke;
    font-family: Arial;
    font-size: 2.5em;
    text-shadow: 1px 1px #000;
  }
}

.body-effect-07 {
  color: #FFF!important; 
  background: var(--theme-07-bg)!important;
  background-size: 100%!important;
  height: 100vh!important;
  
    .text-title {
    color: whitesmoke;
    font-family: Courier;
    font-size: 2.5em;
    text-shadow: 2px 2px #000;
  }
  
  #timer {
    background: transparent !important;
  }
}

 .body-effect-08 {
  background-image: var(--theme-file-bg) !important;
  background-size: 100% 100%!important;
  height: 100vh;

    .text-title {
    color: whitesmoke;
    font-family: Verdana;
    font-size: 2.5em;
    text-shadow: 2px 2px #000;
  }

  #timer {
    background-color: #FFFFFF53 !important;;
  }
}


/*
 * keyframes animation 
 * */

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*
 * End body effects 
 * */


.container {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 100%; 
  text-align: center;
  margin: 0;
  display: auto;
}

.timeDiv {
 position: absolute; 
 top: 40%;
 width: 100%; 
 transform: translateY(-50%);  
 text-align: center;
 margin: 0;
 display: auto;
}

.timeDiv #timer {
 font-size: 9em;
 background-color: white;
 width: fit-content;
 padding: 20px;
 border-radius: 30px 80px 30px 80px;;
 text-align: center;
 margin: 0 auto;
}

.hiddenAll {
  display: none;
}

.displayAll {
  display: auto;
}

.container h3 {
  font-size: 1.3em;
  width: 2rem;
  text-align: center;
}

.divHour, .divMinute, .divSecond {
  display: inline-flex;
  font-size: 2rem;
}

.divHour span,
.divMinute span {
  font-size: 2rem;
  position: absolute;
  top: -35px;
}

.divMinute h3 {
  display: none;
}


.containerHidden {
  display: none;
}


.divSecond {
  display: none;
}

.buttonStart {
  position: inherit; 
  top: 60%;
  left: 45%;
  transform: translateY(50%); 
  width: 10%; 
  text-align: center;
  margin: 0;
  padding: 20px;
}

.divHour button, 
.divMinute button, 
.divSecond button{
  width: 2rem;
  font-size: 30px;
}

input[type=file] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

input[type=number] {
  font-size: 2em;
  width: 5rem;
  height: 2em;
  font-weight: bold;
  text-align: center;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}