@import url(https://fonts.bunny.net/css?family=alexandria:300|bakbak-one:400|balsamiq-sans:700);
body {margin: 0; background-color: #27272A; color: #ECECED; font-family: 'Alexandria', sans-serif;}
header {height: 10vh; display: flex; align-items: center; gap: 2vw; background-color: #D6AF3E;}
header img {height: 90%; margin-left: 2vw;}
header h3 {margin: 0; font-family: 'Bakbak One', display;font-size: 200%}
header h3:hover {cursor: pointer; color: #696F8A}
header input {margin-left: auto; margin-right: 5%; border: none; height: 40%}
main {height: 100%; min-height: 75vh; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 5vh; margin-bottom: 5vh; gap: 5vh}
#player {display: none; justify-content: center; align-items: center; width: 100vw; height: 75vh; margin-top: 5vh; margin-bottom: 5vh;}
.container {width: 70vw; height: fit-content; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color:gray;}
.container h2 {font-family: 'Balsamiq Sans', display;}
.channels {display: flex; flex-wrap: wrap; justify-content:flex-start; gap: 1vw; margin: 0 2vw}
.channel {width: 5vw; height: 5vw; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 1vw; border: 2px solid black; padding: 0.5em}
.channel:hover {cursor: pointer; background-color: #6D7888;}
.channel img {width: auto; height: auto; max-width: 90%; max-height: 90%;}
.hd {background-image: url('img/hd.png'); background-position: left 100% bottom 100%; background-repeat: no-repeat; background-size: 25%;}
footer {height: 5vh; display: flex; align-items: center; justify-content: center; background-color: #D6AF3E   ;}