/*
* Estilo 
*/

 body {
     font-family: "Lato", sans-serif;
     margin: 0;
     padding: 0;
     overflow: hidden;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #444;
 }

 .sidebar {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 999;
     top: 0;
     left: 0;
     background-color: #111;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
 }

 .sidebar a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: #818181;
     display: block;
     transition: 0.3s;
 }

 .sidebar a:hover {
     color: #f1f1f1;
 }

 .sidebar .closebtn {
     position: absolute;
     top: 0;
     right: 25px;
     font-size: 36px;
     margin-left: 50px;
 }

 .sidebar .btn-group button {
     background-color: #111;
     border: none;
     color: #818181;
     padding: 8px 8px 8px 32px;
     cursor: pointer;
     width: 100%;
     display: block;
     text-decoration: none;
     font-size: 25px;
     text-align: left;
     transition: 0.3s;
 }

 .sidebar .btn-group button:not(:last-child) {
     border-bottom: none;
 }

 .sidebar .btn-group button:hover {
     background-color: #444;
 }

 .container {
     width: 100%;
 }

 .container .btn {
     position: absolute;
     background-color: #555;
     color: white;
     font-size: 16px;
     padding: 12px 24px;
     border: none;
     cursor: pointer;
     border-radius: 5px;
     text-align: center;
     margin: 15px 10px;
     z-index: 999;
 }

 .container .btn:hover {
     background-color: black;
 }

 @media screen and (max-height: 450px) {
     .sidebar {
         padding-top: 15px;
     }

     .sidebar a {
         font-size: 18px;
     }
 }

 /* MODAL */
 .modal-channel {
     position: absolute;
     padding-top: 2rem;
 }

 .modal-info {
     background-color: var(--bs-body-bg);
     color: var(--bs-border-color);
     opacity: 0.8;
     padding: 0.25em;
 }

 .hide {
     animation: hideAnimation 0s ease-in 4s;
     animation-fill-mode: forwards;
 }

 @keyframes hideAnimation {
     to {
         visibility: hidden;
         width: 0;
         height: 0;
     }
 }

 /* VIDEO ELEMENTS */
 #playerSTV {
     width: 100%;
     height: 100%;
 }

 video {
     width: 100% !important;
     height: 100% !important;
 }

 video[poster] {
     aspect-ratio: 16 / 9;
 }