/******* Header *******/

header {
    text-align: right;
    padding: 1rem 5rem 1rem 1rem;
}

/******* Left column *******/

p {
    margin-bottom: 0;
}

.uni {
    margin-bottom: 4rem;
}

i {
    margin-left: 1rem;
    margin-right: 0.25rem;
}

.links {
    text-align: left;
    padding-left: 2rem;
}

#portrait {
    border-radius: 100%;
    margin: 1.5rem;
    max-width: 60%;
}

#leftcol {
    text-align: center;
    opacity: 1;
    transition: opacity 250ms 70ms;
}

#leftcol:hover {
    opacity: 0.95;
    transition: opacity 250ms 70ms;
}

/******* Main column *******/

#maincol {
    padding: 0;
}

.bio-section {
    margin-top: 1rem;
    padding: 1rem;
}

.workexp-section, .projects-section, .other-section {
    margin-top: 1rem;
    padding: 1rem;
}

.company {
    color: inherit;
}

.dateloc {
    color: gray;
}

li {
    padding-top: 0.75rem;
}

/******* Right column *******/

#leaf {
    max-width: 8%;
    max-height: 8%;
    position: relative;
    left: 110%;
}

#rightcol {
    overflow: hidden;
}

/******* Footer *******/

#footer {
    background-color: whitesmoke;
    padding: 2rem;
}

.credits {
    font-size: xx-small;
}

/******* Bootstrap extensions *******/
.btn-outline-brown {
    color: saddlebrown;
    border-color: saddlebrown;
}
  
.btn-outline-brown:hover {
color: #fff;
background-color: saddlebrown;
border-color: saddlebrown;
}

.btn-outline-brown:focus, .btn-outline-brown.focus {
box-shadow: 0 0 0 0.2rem rgba(180, 104, 3, 0.5);
}

.btn-outline-brown.disabled, .btn-outline-brown:disabled {
color: saddlebrown;
background-color: transparent;
}

.btn-outline-brown:not(:disabled):not(.disabled):active, .btn-outline-brown:not(:disabled):not(.disabled).active,
.show > .btn-outline-brown.dropdown-toggle {
color: #fff;
background-color: saddlebrown;
border-color: saddlebrown;
}

.btn-outline-brown:not(:disabled):not(.disabled):active:focus, .btn-outline-brown:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-brown.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(180, 104, 3, 0.5);
}

/******* Media queries *******/

@media screen and (max-width: 768px) {
    #portrait {
      max-width: 30%;
    }

    #leftcol {
        text-align: center;
    }
}