grid-container { gap: 2px 5px; height: 100%; width: 100%; user-select: text; display: grid; grid-template: "header header" 76px "list video" calc(100% - 112px) "footer footer" 30px / 350px 1fr; background-color: rgb(3, 153, 0); }
grid-item { display: block; margin: 0px; border-radius: 7px; height: 100%; width: 100%; overflow: auto; word-break: break-word; }
grid-item.header { grid-area: header; background-color: rgb(255, 255, 255); text-align: center; }
grid-item.footer { grid-area: footer; background-color: rgb(255, 255, 255); display: flex; justify-content: center; }
grid-item.video { grid-area: video; background-color: rgb(255, 255, 255); display: flex; flex-direction: column; place-content: stretch space-evenly; align-items: center; }
grid-item.list { grid-area: list; background-color: rgb(199, 199, 199); }
canvas { height: 72px; width: 100%; background-color: rgb(255, 255, 255); max-width: 720px; min-width: 350px; }
a { text-decoration: none; }
a:link { color: rgb(0, 0, 0); }
a:visited { color: rgb(0, 0, 0); }
a:hover { color: rgb(255, 0, 0); }
select { font-size: inherit; width: 100%; height: 30px; }
[onclick] { cursor: pointer; }
youtube-list { display: block; height: calc(100% - 30px); overflow: auto; }
youtube-click { display: block; cursor: pointer; background-color: rgb(255, 255, 255); height: 30px; width: 100%; overflow: hidden; white-space: nowrap; font-size: 100%; line-height: 100%; align-content: center; margin: 2px 0px 0px; text-overflow: ellipsis; }
youtube-click:hover { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); }
youtube-click[data-active="1"] { color: rgb(255, 255, 255); background-color: rgb(180, 0, 180); }
iframe { width: 560px; height: 315px; }
youtube-title { display: inline-block; align-self: center; font-size: 110%; line-height: 150%; max-width: 500px; }
youtube-name { display: inline-block; align-self: center; max-width: 500px; font-size: 100%; }
youtube-description { display: inline-block; max-width: 500px; font-size: 80%; }
youtube-group { display: inline-block; align-self: center; }
youtube-group span { display: inline-block; margin-right: 80px; }
h1 { font-size: 300%; margin: 0px; padding: 0px; }
h2 { font-size: 200%; margin: 0px; padding: 0px; }
h3 { font-size: 150%; margin: 0px; padding: 0px; }
grid-item.footer a { display: inline-block; width: 44px; box-shadow: rgb(173, 173, 173) 2px 1px 1px 1px; line-height: 100%; height: 18px; font-size: 100%; margin: 0px 5px; text-align: center; border-radius: 4px; align-self: center; }
grid-item.footer a:hover { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); }
@media screen and (max-width: 930px) {
  grid-container { grid-template: "header" 76px "video" 220px "list" calc(100% - 332px) "footer" 30px; }
  iframe { width: 340px; height: 191px; }
}