:root {
    --blue1: #1ec6ef;
    --blue2: #1871ed;
    --channelBG: #0000003d;
    --shadowRadius: 1px;
    --shadowOffsetPos: 1px;
    --shadowOffsetNeg: -1px;
}

body {
    font-size: xx-large;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    background-image: url("image.jpg");
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    user-select: none;
    padding-bottom: 8em;
}

#Header {
    /* background-color: white; */
    color: var(--blue1);
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: var(--shadowOffsetPos) var(--shadowOffsetPos) var(--shadowRadius) black,
        var(--shadowOffsetNeg) var(--shadowOffsetPos) var(--shadowRadius) white,
        var(--shadowOffsetPos) var(--shadowOffsetNeg) var(--shadowRadius) white,
        var(--shadowOffsetNeg) var(--shadowOffsetNeg) var(--shadowRadius) white;
}
img {
    width: 150px;
}

#Features {
    display: flex;
    gap: 1em;
    text-align: center;
    width: fit-content;
    margin: 0.5em auto;
}
#Features > * {
    padding: 0.5em 1em;
}

#Options {
    position: absolute;
    left: 0;
    top: 0;
}
#Options > * {
    color: darkolivegreen;
    width: fit-content;
}
#Options > *:hover {
    text-shadow: var(--shadowOffsetPos) var(--shadowOffsetPos) var(--shadowRadius) black,
        var(--shadowOffsetNeg) var(--shadowOffsetPos) var(--shadowRadius) black,
        var(--shadowOffsetPos) var(--shadowOffsetNeg) var(--shadowRadius) black,
        var(--shadowOffsetNeg) var(--shadowOffsetNeg) var(--shadowRadius) black;
    cursor: pointer;
}
#Channel-Grid {
    width: fit-content;
    margin: auto;
    padding: 2px;
    display: grid;
    grid-template-columns: 1fr;
}
.Channel,
.ChannelReady,
.ChannelLightning {
    background-color: var(--channelBG);
    margin: auto;
    display: grid;
    grid-template-columns: 0fr 1.2fr 1fr 1fr 1fr 0.8fr; /* 0.5fr;*/
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid white;
    width: fit-content;
    padding: 0.5em;
}
.Channel > *,
.ChannelReady > *,
.ChannelLightning > * {
    margin: 0 0.5em;
}

@keyframes ChannelReady {
    from {
        box-shadow: 2px 2px 4px transparent, -2px -2px 4px transparent, -2px 2px 4px transparent,
            2px -2px 4px transparent;
    }
    to {
        box-shadow: 2px 2px 4px white, -2px -2px 4px white, -2px 2px 4px white, 2px -2px 4px white;
    }
}
.ChannelReady {
    animation-name: ChannelReady;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: rgba(0, 128, 0, 0.315);
}

@keyframes ChannelLightning {
    from {
        box-shadow: 2px 2px 4px transparent, -2px -2px 4px transparent, -2px 2px 4px transparent,
            2px -2px 4px transparent;
    }
    to {
        box-shadow: 2px 2px 4px var(--blue1), -2px -2px 4px var(--blue1), -2px 2px 4px var(--blue1),
            2px -2px 4px var(--blue1);
    }
}
.ChannelLightning {
    animation-name: ChannelLightning;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: rgba(0, 119, 128, 0.63);
    border-color: var(--blue2);
}
.Button {
    border: 3px inset var(--blue2);
    padding: 0 0.5em;
    background-color: white;
    color: var(--blue2);
    border-radius: 0.2em;
}

.Button:hover {
    border: 3px outset white;
    background-color: var(--blue2);
    color: white;
    cursor: pointer;
}
label,
#Add,
#SortNum,
#SortTime {
    width: fit-content;
    margin: auto;
    color: white;
    text-shadow: var(--shadowOffsetPos) var(--shadowOffsetPos) var(--shadowRadius) var(--blue1),
        var(--shadowOffsetNeg) var(--shadowOffsetPos) var(--shadowRadius) var(--blue2),
        var(--shadowOffsetPos) var(--shadowOffsetNeg) var(--shadowRadius) var(--blue1),
        var(--shadowOffsetNeg) var(--shadowOffsetNeg) var(--shadowRadius) var(--blue2);
}
#Add:hover,
#SortNum:hover,
#SortTime:hover,
.ChanText:hover,
.Move:hover,
.Delete {
    cursor: pointer;
    text-shadow: var(--shadowOffsetPos) var(--shadowOffsetPos) var(--shadowRadius) red,
        var(--shadowOffsetNeg) var(--shadowOffsetPos) var(--shadowRadius) red,
        var(--shadowOffsetPos) var(--shadowOffsetNeg) var(--shadowRadius) red,
        var(--shadowOffsetNeg) var(--shadowOffsetNeg) var(--shadowRadius) red;
}

.Delete:hover {
    color: red;
    text-shadow: none;
}

.ChanText {
    text-align: left;
}
.Move {
    font-size: 2em;
}

#DropDown {
    display: grid;
    grid-template-columns: repeat(6, auto);
    text-align: center;
    border: 2px solid white;
    visibility: hidden;
    position: fixed;
}

.DropChoice {
    padding: 0.5em;
    font-size: large;
    border: 1px solid black;
    background-color: white;
    width: 1em;
    margin: 0;
}
.DropChoiceTaken {
    padding: 0.5em;
    font-size: large;
    border: 1px solid black;
    background-color: gray;
    width: 1em;
    margin: 0;
}
.DropChoice:hover {
    border: 1px solid white;
    background-color: var(--blue1);
    cursor: pointer;
}

#Footer {
    user-select: text;
    color: white;
    font-size: 1vw;
    position: fixed;
    bottom: 0;
    text-shadow: var(--shadowOffsetPos) var(--shadowOffsetPos) var(--shadowRadius) black,
        var(--shadowOffsetNeg) var(--shadowOffsetPos) var(--shadowRadius) black,
        var(--shadowOffsetPos) var(--shadowOffsetNeg) var(--shadowRadius) black,
        var(--shadowOffsetNeg) var(--shadowOffsetNeg) var(--shadowRadius) black;
}

#Slider {
    width: 20%;
}

/* Media Queries */
@media all and (min-width: 1024px) and (max-width: 1280px) {
    :root {
        --shadowRadius: 3px;
    }
    body {
        font-size: large;
    }
    img {
        width: 150px;
    }
    .Button,
    .Button:hover {
        border-width: 3px;
    }
    .DropChoice,
    .DropChoiceTaken {
        font-size: large;
    }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    :root {
        --shadowRadius: 2px;
    }
    body {
        font-size: medium;
    }
    img {
        width: 100px;
    }
    .Button,
    .Button:hover {
        border-width: 2px;
    }
    .DropChoice,
    .DropChoiceTaken {
        font-size: medium;
    }
}

@media all and (min-width: 480px) and (max-width: 768px) {
    :root {
        --shadowRadius: 1px;
    }
    body {
        font-size: small;
    }
    img {
        width: 75px;
    }
    .Button,
    .Button:hover {
        border-width: 1px;
    }
    .DropChoice,
    .DropChoiceTaken {
        font-size: small;
    }
}

@media all and (max-width: 480px) {
    :root {
        --shadowRadius: 1px;
    }
    body {
        font-size: small;
    }

    img {
        width: 50px;
    }
    .Button,
    .Button:hover {
        border-width: 1px;
    }
    .DropChoice,
    .DropChoiceTaken {
        font-size: x-small;
    }
}