* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #111;
}

#videos, #videosF {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    pointer-events: none;
    top: 0;
    height: 100vh;
    width: 100vw;
}

div.video {
    border: none;
    width: 33%;
    aspect-ratio: 16/9;
    max-width: 1fr;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#IPAddressInput {
    margin: 5px;
    padding: 10px;
    background: red;
    border: none;
    z-index: 2;
}

#IPAddressInput::placeholder {
    color: black;
}
div#black {
    display: none;
}

div#black.enabled {
    display: block;
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

img {
    pointer-events: all;
    background: black;
    width: 100%;
    aspect-ratio: 16/9;
}

img:not([src]) {
    opacity: 0;
}

img.fullscreen {
    position: absolute;
    border: none !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    aspect-ratio: 16/9;
    z-index: 3;
    width: unset;
}

#start, .fullscreenbtn {
    pointer-events: all;
    cursor: pointer;
    margin-top: 10px;
    padding: 10px;
    background: red;
    color: black;
    border: none;
    border-radius: 5px;
}

.fullscreenbtn:hover, #start:hover {
    background: rgb(207, 0, 0);
}

#videosF > .video > .border {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
}

.border.l {
    background: linear-gradient(90deg, #b900e8 0%, #8f0694 100%);
}
.border.m {
    background: linear-gradient(90deg, #8f0694 0%, #7f095b 100%);
}
.border.r {
    background: linear-gradient(90deg, #7f095b 0%, #8b0a41 100%);
}

#videosF button {
    opacity: 0;
    pointer-events: none;
}