@import url('https://googleapis.com');

body{
    background-color: #0B0F14;
    color: #E6EDF3;
}

/* NavBar */
.linkContainer{
    top: 0;
    background-color: #121821;
    display:flex;
    font-family: "Open Sans", sans-serif;
    z-index: 9999;
}
.navBar{
    position: sticky;
    top: 0;
    background-color: #121821;
    padding: .5rem;
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-top: calc(50% - 50vw);
    font-family: "Open Sans", sans-serif;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

#hubDolLogo{
    width: 10rem;
    padding-top: 1rem;
    padding-right: .5rem;
    background-position: left calc(95% - 2px) !important; /* overwrite to avoid repeteating myself */
}

.navBarLink{
    padding: 1rem;
    padding-top: 0;
    text-decoration: none;
}

.navBarLink, #hubDolLogo{
    background: linear-gradient(to right, #E6EDF3 0%, #E6EDF3 100%);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left calc(60% - 2px);
    transition: 
        background-size 0.4s ease-in-out, 
        transform 0.2s ease;
}

.navBarText{
    font-size: 1.5rem;
    font-weight: bold; 
    color: #E6EDF3;
}

.navBarLink:hover, #hubDolLogo:hover{
    transform: scale(1.1);
    background-size: 100% 2px;
}

.navBarLink:active, #hubDolLogo:active{
    transform: scale(0.9);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

footer {
  text-align: center;
  padding: 1rem;
  color: var(--text-secondary);
  border-top: 0.0625rem solid var(--surface);
}