html, body {
    height: 100%;
    background-color: rgb(255, 255, 255);
}

.text-container {
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.vis-network {
    outline: none;
}

.round-image {
    max-width: 160px;
    max-height: 160px;
    min-width: 120px;
    min-height: 120px;
    background-size: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border:0px solid #000000;
    margin:auto;
    aspect-ratio: 1 / 1;
}

.entity {
    background-color: none;
}

.about {
    margin-bottom:0em;
}

.about a {
    color: black; 
    text-decoration: underline;
}

.paper-title a {
    font-weight: bold;
    color: #000000;
}
.paper-author {
    font-weight: light;
    font-style: italic;
}
.paper-venue {
    font-weight: light;
}

.footer {
    height: 2em;
}

@media screen and (min-width: 0px) and (max-width: 992px) {
    .content {
        margin-top: 2em;
        margin-left: 0em; /* Same as the width of the side bar */
        margin-right: 0em; /* Same as the width of the side bar */
        padding: 0em;
        font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
        font-size: 1em;
        line-height: 1.5;
        
    }
    .text-container {
        padding-left: 1em; 
        padding-right: 1em; 
        padding-top: 2em; 
        max-height: 9999px; 
        overflow-y: auto;
    }
    .helper {
        display: none;
    }
    .box {
        background-size: 400%; 
        background-position: top -30px left -80px;
        max-width: 160px;
        max-height: 160px;
        min-width: 120px;
        min-height: 120px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border:0px solid #000000;
        margin:auto;
        aspect-ratio: 1 / 1;
        height: 60vw; 
        background-repeat: no-repeat;
    }
    .row {
        margin: 0;
    }
    
    #networkgraph {
        display: none;
        width: 400px;
        height: 400px;
    }
    .links-desktop {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .links-mobile {
        display: none;
    }
    .box {
        background-size: 100%; 
        background-position: center;
        max-height: min(750px, 60vw);
        max-width: min(1000px, 80vw);
        margin-bottom: max(-750px, -60vw);
        height: 60vw; 
        background-repeat: no-repeat;
    }
    .content {
        width: 80vw; 
        max-height: min(750px, 60vw); 
        max-width: min(1000px, 80vw);
        margin: auto;
        margin-top: 2em;
        font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
        font-size: 1em;
        line-height: 1.5;
    }
    .text-container {
        padding-top: 2em;
        padding-left: 1em; 
        padding-right: 1em; 
        max-height: min(750px, 60vw); 
        overflow-y: scroll;
    }
    .helper {
        display: block;
        height: 20vw; 
        max-height: min(250px, 20vw);
    }
    .row {
        margin: 0;
    }
    
    #networkgraph {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        position: relative;
        font-variant: small-caps;
        height: 40vw;
        max-height: min(500px, 40vw);
    }
    
    .column {
        height: 60vw; max-height: min(750px, 60vw); max-width: min(500px, 40vw);
    }
    
    .entity.selected {
        background-color: rgba(255, 230, 0, 0.5);
    }
    
}