:root {
    --downloadr-bg: rgba(0, 100, 0, 0.5);
    --notify-bg: rgba(0, 100, 0, 0.5);
}

.container {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
}

.mc-server {
    background-color: black;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(3px) grayscale(1);
    transition: width 0.6s, filter 0.6s, background-position 0.6s;
    height: 100%;
    width: 50%;
}

.mc-server:hover,
.mc-server:focus,
.mc-server.active {
    cursor: pointer;
}

.mc-server.hover {
    cursor: copy;
    filter: blur(0px) grayscale(0);
    background-position: center;
    width: 100%;
}

#notifier {
    display: none;
    position: fixed;
    top: 2rem;
    right: 1rem;
    color: #fafafa;
    background-color: var(--notify-bg);
    font-size: 14px;
    font-weight: 400;
    font-family: monospace;
    letter-spacing: 3px;
    line-height: 16px;
    margin: 0px;
    padding: 0.5rem 1.5rem;
    transition: display 0.6s;
    z-index: 1010;
}

#downloader {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    color: #fafafa;
    text-decoration: none;
    background-color: var(--downloadr-bg);
    font-size: 14px;
    font-weight: 400;
    font-family: monospace;
    letter-spacing: 3px;
    line-height: 16px;
    margin: 0px;
    padding: 0.5rem 1.5rem;
    transition: display 0.6s;
    z-index: 1010;
}

#downloader:hover,
#downloader:focus,
#downloader.active {
    text-decoration: underline;
}