:root {
    --primary-color: 55, 100, 164;
    --primary-color-dark: 24, 74, 142;
    --primary-color-light: 155, 206, 245;
    --primary-color-lightest: 200, 219, 243;
    --secondary-color: 255, 255, 255;
    --black: 51, 51, 51;
    --grey: 235, 235, 245;
}


@media only screen and (max-width: 600px) {
    html {
        font-size: 4vw;
    }
    .site-header .navbar-nav .nav-link.active {
        padding: 10px;
    }
    .navbar-collapse {
        margin-top: 10px;
    }
}
body {
    color: rgb(var(--black));
    margin-top: 5rem;
    font-family: 'Roboto', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #444;
}
.title {
    color: rgb(var(--black));
}
ul {
    margin: 0;
}
a {
    color: rgb(var(--primary-color));
}
a:hover {
    color: rgb(var(--primary-color-dark));
    text-decoration: none;
}
a:focus {
    outline: none;
}
.bg-steel {
    background-color: rgb(var(--primary-color));
    box-shadow: 0 2px 2px 2px rgb(var(--primary-color));
    animation: 1s slidein-nav;
}
@keyframes slidein-nav {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(-0%);
    }
}

@media only screen and (max-width: 600px) {
    .bg-steel {
        opacity: 1;
    }
}
.site-header .navbar-nav .nav-link {
    color: rgb(var(--secondary-color));
}
.site-header .navbar-nav .nav-link:hover {
    color: rgb(var(--grey));
}
.site-header .navbar-nav .nav-link.active {
    font-weight: 500;
    background-color: rgba(var(--primary-color-dark), 0.7);
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: inset 0 2px 2px 3px rgba(var(--black), 0.5);
}
.content-section {
    background: #fffefdd0;
    padding: 10px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 1px 1px #9f9f9f1c;
}
.project-content,
.post-content {
    white-space: pre-line;
}
.project-metadata,
.post-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3;
    overflow: auto;
}
.account-img {
    max-width: 11%;
    height: auto;
}
.project-author,
.post-author {
    display: table-cell;
    vertical-align: middle;
}
.link-img {
    max-height: 50%;
}
.btn {
    background-color: #e7e7e7;
}
.positive-result {
    color: rgb(40, 150, 40);
}
.negative-result {
    color: rgb(175, 37, 37);
}
.current-page {
    color: #e3e3e3;
}
.pagination .page-item .page-link {
    color: rgb(150, 130, 58);
    background-color: #fffefdee;
}
.pagination .page-item.disabled .page-link {
    color: rgb(139, 139, 139);
}

main {
    min-height: calc(100vh - 151px);
}
.footer {
    height: 50px;
    animation: fadein 1.5s;
}
.footer--line {
    width: 30%;
    margin-top: 0px;
    margin-bottom: 0px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}
.footer--wrapper {
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.footer--item {
    height: 50px;
    margin: 0px 5px 0px 5px;
}

@media only screen and (max-width: 600px) {
    .footer--text {
        display: none;
    }

    .footer--item {
        margin: 0px 10px 0px 10px;
    }

    .footer--line {
        display: none;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

.formula {
    font-size: 1.5em;
    display: block;
    margin: 10px;
}

.fadein {
    animation: fadein 0.75s;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url(/static/website/images/logo_background.svg), radial-gradient(circle at 80%, white, rgb(var(--grey)), rgb(var(--primary-color-lightest)));
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
}