/* Component Layout */
* {
    margin: 0;
    padding: 0;
}

.page {
    height: 100vh;
}

.outer-frame {
    padding: 2rem;
}

.maj-h {
    height: 70vh;
}

.min-h {
    height: 45vh;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

ul {
    margin-left: 4rem;
    padding: 0.5rem;
}

.article {
    margin-left: 2rem;
    padding: 1rem;
    max-width: 75vw;
    min-width: 10vw;
}

.feature {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.t-knots {
    max-height: 75vh;
    height: 100%;
    width: 100%;
    pointer-events: none; 
    margin-bottom: -8rem;
}

.diagram-left {
    float: left;
    margin-left: 2rem;
    margin-right: 2rem;
}

.diagram-right {
    float: right;
    margin-left: 2rem;
    margin-right: 2rem;
}

@media screen and (max-width: 500px) {
    .article {
        padding: 0.5rem;
        max-width: 100%;
    }

    .maj-h {
        height: 60vh;
    }

    .min-h {
        height: 35vh;
    }
}

@media screen and (max-height: 500px) {
    .maj-h {
        height: 50vh;
    }
}