/* --- general --- */

h1, h2, h3, h4, h5, p {
    margin: 0;
    transition: font-size 1s;
}

/* --- layout --- */

#static-view {
    justify-content: space-between;
    padding: 100px 4% 100px 10%;
    transition-duration: 1s;
    transition-property: padding-top, padding-bottom;
}

#scroll-view {
    align-items: flex-end;
    flex: 1;
    overflow-y: auto;
    padding: 100px 10% 100px 4%;
}

/* --- introduction --- */

#intro {
    gap: 16px;
    max-width: 400px;
    transition: max-width 1s;
}

#name {
    font-size: 36pt;
    font-weight: 700;
}

#position {
    font-size: 16pt;
    font-weight: 500;
}

#headline {
    color: #898989;
    font-size: 12pt;
    font-weight: 300;
}

/* --- navigation --- */

#nav {
    flex: 1;
    margin: 64px 0;
    transition: margin 1s;
}

.nav-item {
    font-size: 9pt;
    font-weight: 700;
    padding: 8px 0;
}

.nav-item a {
    color: #353e43;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-item a::before {
    content: "";
    background-color: #353e43;
    display: inline-block;
    height: 2px;
    margin-right: 16px;
    transition-duration: 0.3s;
    transition-property: background-color, width;
    vertical-align: middle;
    width: 32px;
}

.nav-item a:hover {
    color: #628699;
}

.nav-item a:hover::before {
    background-color: #628699;
    width: 64px;
}

/* --- socials --- */

#socials {
    display: flex;
    gap: 16px;
}

.social-link i {
    font-size: 32px;
    transition: color 0.5s;
}

.social-link:hover i {
    color: #628699;
}

/* --- card --- */

.card {
    border: 0.5px solid #cbcbcb;
    border-radius: 10px;
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    padding: 16px 20px;
    transition-duration: 0.5s;
    transition-property: background-color, transform;
}

.card:last-child {
    margin-bottom: 0;
}

.card:hover {
    background-color: #fafbfc;
    transform: scale(1.02);
}

.card-left {
    padding-top: 2px;
}

.card-right {
    flex: 1;
    gap: 8px;
}

.company {
    font-size: 12pt;
    font-weight: 500;
}

.title {
    font-size: 9pt;
    font-weight: 300;
}

.date {
    font-size: 9pt;
    font-weight: 500;
}

.desc li {
    color: #898989;
    font-size: 9pt;
    font-weight: 300;
    padding: 4px 0;
}

/* --- media queries --- */

@media only screen and (max-width: 1199px) {
    .card {
        flex-direction: column;
        gap: 8px;
    }
}

@media only screen and (max-width: 999px) {
    #content {
        flex-direction: column;
    }

    #static-view {
        padding: 32px 5% 16px 5%;
    }

    #scroll-view {
        overflow-y: visible;
        padding: 16px 5% 48px 5%;
    }

    #intro {
        max-width: 360px;
    }

    #name {
        font-size: 24pt;
    }

    #position {
        font-size: 12pt;
    }

    #headline {
        font-size: 10pt;
    }

    #nav {
        margin: 24px 0;
    }

    .social-link i {
        font-size: 24px;
    }
}