body{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "width" 100;

    margin: 0;
    background-color: black;
    overflow: hidden;
}

.container {
    display: flex;
}

#bio-section {
    position: absolute;
    margin-right: auto;
    z-index: 100;
    background: rgb(0, 0, 0, 0.6);
    color: #ccc;
    border: 3px solid #3f08e3;
    border-radius: 25px;
    width: calc(100vw / 4);
    height: calc(100vh / 1.1);
    padding: 20px;
    margin: 20px;
    text-align: center;
}

.right{
    right: 0; 
    transform: translateX(210%);
}

.left{
    transform: translateX(-110%);
}

.animateLeft {
    animation: slideOutRight 1s ease-in-out;
    animation-fill-mode: forwards;
}

.animateRight{
    animation: slideOutLeft 1s ease-in-out;
    animation-fill-mode: forwards;
}

.links{
    margin-top: 10px;
}

.name{
    font-style: normal;
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    margin-top: -20px;
}

.locationSub {
    font-style: normal;
    font-size: 20px;
    font-weight: 500;
    margin-top: -20px;
    text-align: center;
}

.bio{  
    text-align: justify;
    padding: 40px;
    padding-bottom: 0px;
}

.closePanel{
    position: absolute;
    top: 20px;
    right: 10px;
    margin-right: 20px;
    cursor: pointer;
}

.bio-text{
    margin-top: -25px;
}
  
/* Style the circle */
#profile {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Create a perfect circle */
    top: 50%;
    left: 50%;
    margin: 0 auto;
    opacity: 1;
}

.badge{
    display: none;
}

.circular--portrait { position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .circular--portrait img { width: 100%; height: auto; }

@keyframes slideInRight {
    from {
        transform: translateX(-110%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-110%);
    }
}

@keyframes rightSlideOutRight {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(110%);
    }
}

@keyframes rightSlideInLeft {
    from {
        transform: translateX(110%);
    }
    to {
        transform: translateX(0%);
    }
}