* {
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    padding: 20px;
}

h1 {
    height: 5%;
    margin: 0;
}

.app {
    height: 95%;
    width: 100%;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    column-gap: 2%;
}

.text-video {
    height: 100%;
    width: 69%;
    display: flex;
    flex-direction: column;
    row-gap: 2%;
}

.comments {
    height: 100%;
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 4%;
}

.comments > * {
    padding: 1vw;
    height: 58%;
    border-radius: 5px;
    border: 3px solid #005CF6;
}

.comments h3 {
    height: 7%;
    padding-left: 3px;
    margin-bottom: 20px;
}

.events {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: scroll;
}

.comments-result {
    height: 38%;
    border-radius: 5px;
    border: 3px solid #005CF6;
}

.input-url {
    height: 5%;
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 2%;
}

#mpd-input {
    height: 100%;
    width: 100%;
}

.dash-video-player {
    height: 93%;
    width: 100%;
    position: relative;
}

.dash-video-player video {
    width: 100%;
    height: auto;
    max-height: 95%;
}