@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
    --bj-gold: hsl(48, 37%, 62%);

    --bg: rgb(34, 34, 34);
    --bg-text: rgb(34, 34, 34);
    --color-online: #32d296;
    --color-idle: #faa05a;
    --color-dnd: #f0506e;
    --color-gray: hsl(220, 1%, 58%);
    --color-grayer: hsla(210, 1%, 58%, 0.5);
    --chaun-blue: hsl(212, 33%, 23%);
    --chaun-blue-d: hsl(213, 81%, 8%);

    --bluray: hsl(198, 95%, 43%);
    --netflix: hsl(357, 92%, 46%);
    --prime: hsl(195, 100%, 44%);
    --apple-plus: hsl(240, 2%, 10%);
    --hbo-max: hsl(280, 91%, 59%);
    --disney: hsl(230, 100%, 24%);
    --webrip: hsl(13, 71%, 34%);

    --hdr: hsl(233, 19%, 9%);
    --imax: hsl(207, 100%, 40%);
    --remastered: hsl(345, 67%, 60%);
}

* {
    font-family: 'Montserrat', sans-serif;
}

html {
    background-color: var(--bg);
    color: white;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

#main {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

table {
    border-collapse: collapse;
}

thead > tr > td {
    font-weight: bold;
}

td:not(.name) {
    text-align: center;
}

td {
    padding: .5rem 1rem;
}

tbody > tr:first-of-type {
    border-top: 1px solid var(--color-gray);
}
tbody > tr:last-of-type {
    border-bottom: 1px solid var(--color-gray);
}
tbody > tr:not(:first-of-type):not(:last-of-type) {
    border-bottom: 1px solid var(--color-grayer);
    border-top: 1px solid var(--color-grayer);
}

.ep-count {
    font-size: .8rem;
    color: var(--color-gray);
}

/* Badgez */
[data-badge] {
    box-sizing: border-box;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 5px;
    margin: 5px;
    border-radius: 5px;
    vertical-align: middle;
    background: var(--chaun-blue-d);
    color: white;
    font-size: .75rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
[data-badge]::after {
    content: attr(data-badge);
}

[data-badge="2160p"] {
    background: var(--color-online);
    color: var(--chaun-blue-d);
}
[data-badge="720p"] {
    background: var(--color-idle);
    color: var(--chaun-blue-d);
}

.gb {
    color: var(--color-gray);
}

/* Size */
[data-size="5"] {
    color: var(--color-idle);
}

[data-size="10"] {
    color: var(--color-dnd);
}

/* Duration */
[data-duration="5"] {
    color: var(--color-grayer);
}
[data-duration="10"] {
    color: var(--color-gray);
}
[data-duration="15"] {
    color: white;
}