:root {
    --main-color: #000000;
    --color1: #b099f5;
    --color2: #5aa0ba;
    --color3: #db90ad;
    --dark-color1: #5139a9;
    --soft-grey: #e7e7e784;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 1%;
    
}

.left-column{
    background: var(--soft-grey);
}

.right-column{
    color: var(--main-color);
    padding: 20px 20px;
}

.header {
    padding: 20px;
    /* text-align: left;
    padding-left: 25%; */
    /* background: var(--soft-grey);*/
    color: var(--main-color);
    /* display: flex;
    flex-wrap: wrap; */
}

.header #name {
    padding: 0px;
    vertical-align: middle;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: var(--main-color);
    text-decoration: none;
}

.header #portrait-img {
    vertical-align: middle;
    text-align: center;
    /* flex: 25%; */
    padding: 0px;
}

.header #portrait-img img {
    border: round;
    border-radius: 100px;
}

.header h1 {
    font-size: 40px;
}

.navbar {
    /*overflow: hidden;*/
    /* background-color: var(--dark-color1); */
    text-align: center;
    float: center;
    margin-top: 50px;
    margin-left: 75px;
    margin-right: 75px;
}

.navbar a {
    /*display: block;*/
    color: var(--dark-color1);
    vertical-align: middle;
    text-decoration: none;
}


/* Change color on hover/mouse-over */
.navbar a:hover {
    /* background-color: var(--soft-grey);*/ 
    color: var(--color1);
}

#about {
    /* color: var(--main-color); */
    text-align: justify;
    margin-top: 75px;
    /* margin-left: 25%;
    margin-right: 25%; */
    margin-bottom: 10px;
    padding-bottom: 10px;
    /* padding: 20px 20px; */
    /* border: solid 1px var(--dark-color1); */
    /* max-width: 600px; */
}

#about a {
    color: var(--color1);
    text-decoration: none;
    padding-bottom: 0px;
}

#about a:hover {
    color: var(--color2);
}


.section {
    color: var(--main-color);
    padding: 5px 10px;
}

.section h1 {
    font-size: 28px;
    /* border-bottom: solid 3px var(--color1); */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.paper {
    /* padding: 5px 20px; */
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    background: var(--soft-grey);
    grid-template-columns: 1fr 2fr;
    padding: 5px 10px;
    padding-bottom: 2%;
    /* column-gap: 1%; */
}

.img-container {
    margin-top: 20%;
    /* flex: 25%; */
}

.paper-description {
    /* flex: 75%; */
    padding: 0px;
}

.paper-description h2 {
    font-size: 24px;
    /* color: var(--dark-color1); */
    padding: 0px;
}

.paper-description authors {
    color: var(--dark-color1);
    font-style: italic;
    padding: 0px;
    margin-top: -10px;
}

.paper-description venue {
    color: var(--color2);
    font-style: italic;
    padding: 0px;
}

.paper-description a {
    color: var(--color1);
    margin-top: -10px;
}

.break {
    height: 10px;
}

@media only screen and (max-width: 800px) {
    .wrapper{
        display: inline;
    }
    .navbar {
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .navbar a {
        /*display: block;*/
        color: var(--dark-color1);
        vertical-align: middle;
        text-decoration: none;
    }
    .left-column{
        position: static;
    }

    .right-column{
        padding: 10px 10px;
    }

    #about {
        margin-top: 10px;
    }

    .paper {
        display: block;
    }
    
    .img-container {
        margin-top: 1%;
        width: 75%;
    }

    .paper-description h2 {
        font-size: 20px;
    }
}