body {
   position: absolute;
   top: 0;
   left: 0;
   font-family: 'Arial', sans-serif;
   margin: 0;
   padding: 0;
   width: 100%;
   box-sizing: border-box;
}

#app {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

#upload,
#processed {
   position: relative;
   display: flex;
   flex-direction: column;
   width: max-content;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 80%;
}

#processed {
   display: none;
}

label {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
   color: #333;
}

#time_inputs {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
}

.time-input {
   width: min-content;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 20px;
   width: 60px;
   min-width: 40px;
}

#video_input {
   width: 100%;
   margin-bottom: 15px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

#video_input:hover {
   background-color: #0056b3;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   color: white;
}

#add_thumbnail,
#download_video {
   display: block;
   width: 100%;
   padding: 10px;
   background-color: #007BFF;
   color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
}

#add_thumbnail:hover,
#download_video:hover {
   background-color: #0056b3;
}

#add_thumbnail:disabled,
#download_video:disabled {
   background-color: #ccc;
   cursor: not-allowed;
}

#processed_video {
   width: 100%;
   height: auto;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.spacer {
   height: 20px;
   background: transparent;
}

.title {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 10px;
   text-align: center;
   margin-top: 5px;
}