html, body, .wrapper, .main {
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.main {
    display: flex;
    flex-direction: row;
    width: 80vw;
}

.fr {
    display: flex;
    flex-direction: row;
}

.fc {
    display: flex;
    flex-direction: column;
}

.page-content {
    flex:2;
    min-height: 85vh;
}

.navbar {
    border: 2px dotted lightskyblue;
    padding-left: 15px;
    padding-right: 15px;
    background-color: lightcoral;
    flex: 1;
}

.navitem {
    border: 1px solid black;
    background-color: darkred;
}

.sel {
    background-color: red;
}

.navitem a {
    font-weight: bold;
    font-family: "Times New Roman";
    font-size: 18px;
    color: blue;
    text-shadow: 2px black;
}

/* specific elements */

.topbar {
    height: 5vh;
    background: lightyellow;
    border: 2px solid darkred outset;
    border-radius: 10px;
}

.tb-img {
    height: 100%;
    width: auto;
}

.end {
    align-self: flex-end;
}

.alabel {
    font-family: Arial;
    size: 30px;
    color: blue;
    background-color: white;
}

.sidebar-left {
    flex: 1;
}

.center-colu {
    flex: 4;
}