body {
    font-family: 'Roboto', sans-serif;
}

#particles {
    position: fixed;
    background-color: #eee;
    z-index: -10;
    width: 100%;
    height: 100vh;
}

.bg-dark {
    background-color: #222 !important;
}

.nav-link {
    text-transform: uppercase;
    font-family: "Roboto", serif;
    font-weight: 100;
    letter-spacing: 4px;
    color: #eee !important;
}

.nav-link:hover {
    color: #777 !important;
}

#intro {
    width: 100%;
    height: 30vh;
}

.intro-title {
    font-size: 7vmin;
    font-family: 'Lora', serif;
    color: #222;
    user-select: none;
}

.intro-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #777;
}

.intro-link {
    font-size: 3vmin;
    transition: color 250ms ease;
    color: #777;
    text-decoration: none;
    pointer-events: auto;
}

.intro-mail {
    font-family: 'Roboto Mono', monospace;
    color: #777;
    text-decoration: none;
}

.intro-link:hover, .intro-mail:hover {
    color: #222;
    text-decoration: none;
}

.avatar {
    height: 20vh;
    width: 20vh;
}

.section-img {
    height: 27vh;
    width: 27vh;
}

.acad-description {
    height: 27vh;
}

.section-img-small {
    height: 12vh;
    width: 12vh;
}

#intro {
    padding-top: 5vh; 
    padding-left: 5vh
}

#content {
    color: #eee;
    min-height: 20vh;
}

#content h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

#content h1 {
    font-size: 6vmin;
    font-family: 'Lora', serif;
    user-select: none;
}

#content p {
    font-family: 'Roboto Slab', serif;
}

.roboto-mono {
    font-family: 'Roboto Mono', monospace;
}

.text-link {
    color: #222;
}

.text-link:hover {
    color: #aaa;
}

.opaque-section {
    padding-top: 5vh; 
    padding-bottom: 5vh; 
    background-color: #222;
    min-height: 20vh;
}

.opaque-section a {
    color: #fff;
}

.opaque-section a:hover {
    color: #bbb;
}

.opaque-section p {
    color:#bbb;
}

.opaque-section .fw-bold {
    color:#eee;
}

.transparent {
    color: #222;
}

.highlight {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.footer {
    padding-top: 5vh;
    padding-bottom: 5vh;
    color: #eee;
}

.footer-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #eee;
}

.footer-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: #ccc;
}

.footer-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    margin-right: 14px;
    color: #ccc;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: none;
    color: #fff;
}

.acad-project {
    min-height: 35vh;
    padding-bottom: 5vh;
}

.acad-project h4 {
    font-weight: 600;
    margin-bottom: 0;
}

.acad-project h6 {
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    color: #aaa;
}

.work-position {
    padding-bottom: 2vh;
}

.description {
    flex-grow: 1;
}

.work-position h4 {
    font-family: "Roboto Mono", monospace;
    font-weight: 600;
    margin-bottom: 0.5vh;
}

.work-position h5 {
    font-weight: 300;
    display: inline;
    margin-bottom: 0;
}

.work-position h6 {
    display: inline;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    color: #aaa;
    text-align: end;
    margin-bottom: 0;
}

.afk-img {
    padding-top: 7px;
    height: 30vmin;
    width: 30vmin;
}

@media screen and (max-width: 992px) {
    .acad-description {
        height: 40vh;
    }
}

@media screen and (max-width: 576px) {
    #intro {
        padding-top: 4vh;
        padding-left: 0;
    }

    #intro-text, #intro-img {
        text-align: center;
    }

    .intro-title {
        font-size: 3vh;
        margin-bottom: 0;
    }

    .avatar {
        height: 15vh;
        width: 15vh;
        margin-bottom: 1vh;
    }

    .intro-link, .intro-mail {
        font-size: 2vh;
    }
}