/* Nav-bar highlighting */
#nav-about{
    text-underline-offset: 8px !important;
    text-decoration-thickness: 2px !important;
    color: var(--accent-color);
}

.age{
    color: var(--accent-color);
    font-weight: 600;
    background-color: var(--secondary-color);
}

.level-bar-container{
    display: flex;
    justify-content: center;
    border-bottom: dashed 2px var(--accent-color);
    gap: 20%;   
}

.level-bar-low{
    margin-top:174px;
    width: 100px;
}

.level-bar-med{
    width: 100px;
    margin-top:48px;
}

.level-bar-big{
    width: 100px;
}

.level-bar-25, .level-bar-50, .level-bar-75{
    background: repeating-linear-gradient(
        125deg,
        var(--primary-color) 0px,
        var(--accent-color) 4px,
        var(--primary-color) 8px,
        var(--accent-color) 4px
        );
    width: 90px;
    border: 2px solid var(--accent-color);
    margin-left: auto;
    margin-right: auto;
}

.level-bar-25{
    height: 100px;
}

.level-bar-50{
    height: 200px;
}

.level-bar-75{
    height: 300px;
}

.rank-container{
    background-color: var(--primary-color);
    border-radius: 15px;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.rank{
    position: relative;
    padding:15px;
    width: 12%;
    text-align: center;
}

.donate-container{
    display: flex;
    justify-content: center;
    gap: 11%;
}

.donate{
    border-radius: 100%;
    width: 20%;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.donate img{
    vertical-align: middle;
}

.donate :hover{
    border-radius: 100%;
    background-color: var(--primary-color);
    animation-name: hover-shadow;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
}

.text-center{
    text-align: center;
}

.pane-container{
    margin-top: 5vh;
    display: flex;
    align-items: center;
}

.pane-default{
    width: 100%;
    height: auto
}

.pane-info{
    flex: 15vw;
    justify-content: center;
    text-align: center;
}

.m-top-20{
    margin-top: 20px;
}

.m-top-30{
    margin-top: 30px;
}

.m-top-40{
    margin-top: 40px;
}

.m-bottom-20{
    margin-bottom: 20px;
}

.m-bottom-30{
    margin-bottom: 30px;
}

.m-bottom-40{
    margin-bottom: 40px;
}

.container-legal{
    padding-top: 50px;
}

/* Animations */
@keyframes hover-shadow {
    from {box-shadow: 0px 0px 0px var(--primary-color);}
    to {box-shadow: 0px 10px 8px var(--accent-color);}
}

/* Cleaned - 07/08/2023 */