@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Navigation */
.web-main-nav, .web-main-footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.web-main-nav-logo {
    width: 20%;
    justify-content: left;
}

.web-main-nav-menu {
    width: 80%;
    justify-content: right;
    display: flex;
    font-size: 1.2em;
}

.nav-item {
    font-weight: normal;
    margin-left: 1.2em;
    cursor: pointer;
}

.nav-item-active {
    font-weight: bold;
    cursor: pointer;
    color: #ff5900;
    margin-left: 1.2em;
}

.web-nav-pc-mode {
    display: flex;
}

.web-nav-mobile-mode {
    display: none;
}

.web-main-nav-mobile-overlay {
    display: none;
    text-align: right;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.8em;
    margin-bottom: 50em;
}

.nav-mobile-item {
    display: block;
    font-weight: normal;
    cursor: pointer;
}

.nav-mobile-item-active {
    display: block;
    font-weight: bold;
    cursor: pointer;
    color: #ff5900;
}

/* Web body */
body {
    font-family: "DM Sans", sans-serif;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 2%;
    text-align: left;
    color: black;
}

/* Footer */
.web-main-footer-copyright {
    width: 50%;
    justify-content: left;
    display: flex;
    font-size: 0.8em;
}

.web-main-footer-links {
    width: 50%;
    justify-content: right;
    display: flex;
    font-size: 0.8em;
}

/* People card */
.mockup-avatar, .mockup-avatar-inactive {
    width: 50px; /* Avatar size */
    height: 50px; /* Avatar size */
    border-radius: 50%; /* Makes the avatar circular */
    background-color: #ff5900; /* Background color of the avatar */
    color: white; /* Text color */
    display: flex; /* Flexbox to center content */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    /*font-family: Arial, sans-serif; !* Font family *!*/
    font-size: 1.5em; /* Font size */
    font-weight: normal; /* Font weight */

    /*background: #ff7e5f;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to right, #feb47b, #ff7e5f);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, #feb47b, #ff7e5f); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

.mockup-avatar-inactive {
    background-color: #a8a8a8; /* Background color of the avatar */
    color: white; /* Text color */

}

.photo-avatar {
    width: 50px; /* Avatar size */
    height: 50px; /* Avatar size */
    border-radius: 50%; /* Makes the avatar circular */
    /*background-color: #ff5900; !* Background color of the avatar *!*/
    color: white; /* Text color */
    display: flex; /* Flexbox to center content */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    /*font-family: Arial, sans-serif; !* Font family *!*/
    font-size: 1.5em; /* Font size */
    font-weight: normal; /* Font weight */
}

.web-people-card {
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
}

.web-people-card-avatar {

}

.web-people-card-info {
    margin-left: 1em;
    line-height: 1.2em;
}

.web-people-card-info-name {
    font-size: 1em;
    font-weight: 600;
}

/* Segment */
.web-segment {
    display: block;
}

.web-segment-row {
    display: flex;
    margin-bottom: 1em;
}

.web-segment-column-33p {
    width: 33.33%;
}

/* People profile */
.web-main-people-profile {
    display: flex;
    width: 100%;
}

.web-main-people-profile-avatar {
    width: 35%;
}

.web-main-people-profile-info {
    width: 65%;
    padding-left: 3em;
}

.web-main-people-profile-info-name {
    font-size: 2.5em;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 0;
}

.web-main-people-profile-info-position {
    font-size: 1.5em;
}

.web-main-people-profile-info-section, .web-main-courses-info-section {
    display: flex;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.8em;
}

.web-main-people-profile-info-subsection-left, .web-main-courses-info-subsection-left {
    width: 20%;
    opacity: 0.5;
}

.web-main-people-profile-info-subsection-right, .web-main-courses-info-subsection-right {
    width: 80%;
}

/* Courses */
.web-main-courses-name {
    font-weight: bold;
    font-size: 1.1em;
    /*color: #ff5900;*/
}

/* Etc */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    /*color: #ff5900;*/
    text-decoration: underline;
}

.pub-type-txt {
    opacity: 0.4;
    font-size: 0.8em;
}

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: black; /* old IE */
    background-color: black; /* Modern Browsers */
}

.pub-stats-display-section {
    display: flex;
    width: 100%;
    text-align: center;
}

.pub-stats-display-subsection {
    width: 20%;
    display: block;
}

@media screen and (max-width: 1300px) {
    body {
        padding-left: 8%;
        padding-right: 8%;
        padding-top: 5%;
    }

    .web-nav-pc-mode {
        display: none;
    }

    .web-nav-mobile-mode {
        display: flex;
    }

    .web-segment-row {
        display: block;
        margin-bottom: 0;
    }

    .web-segment-column-33p {
        width: 100%;
        margin-bottom: 1em;
    }

    .web-main-people-profile {
        display: block;
    }

    .web-main-people-profile-avatar {
        width: 100%;
        height: 20em;
        margin-bottom: 1em;
    }

    .web-main-people-profile-info {
        width: 100%;
        padding-left: 0;
    }

    .web-main-people-profile-info-subsection-left, .web-main-courses-info-subsection-left {
        width: 40%;
    }

    .web-main-people-profile-info-subsection-right, .web-main-courses-info-subsection-right {
        width: 60%;
    }

    .pub-stats-display-section {
        display: block;
    }

    .pub-stats-display-subsection{
        width: 100%;
    }

}