body {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 80px;
    overflow: auto;
}

table {
    border-collapse: separate;
    border-spacing: 0px 18px;
    margin-bottom: 14px;
}

td {
    padding-right: 26px;
}

a {
    color: rgba(34, 34, 34, 1);
    text-decoration: none;
}

b {
    font-weight: 700;
}

.button {
    max-width: max-content;
    height: 52px;
    display: flex; 
    align-items:center;
    justify-content: center;
    gap: 8px;
    padding-left: 32px;
    padding-right: 32px;
    border-radius: 26px;
    border: none;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(103, 83, 230, 1);
    cursor: pointer;
    font-weight: 300;
}

.button:hover {
    background-color: rgba(84, 63, 212, 1);
}

.button:active {
    background-color: rgba(67, 49, 182, 1);
}

.button-green {
    background-color: rgba(0, 163, 139, 1);
}

.button-green:hover {
    background-color: rgba(0, 144, 123, 1);
}

.button-green:active {
    background-color: rgba(0, 120, 102, 1);
}

.button-red {
    background-color: rgba(255, 109, 66, 1);
}

.button-red:hover {
    background-color: rgba(243, 88, 41, 1);
}

.button-red:active {
    background-color: rgba(227, 65, 16, 1);
}

.button-blue {
    background-color: rgba(63, 105, 255, 1);
}

.button-blue:hover {
    background-color: rgba(37, 83, 246, 1);
}

.button-blue:active {
    background-color: rgba(22, 66, 222, 1);
}

.wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

#portfolio {
    opacity: 0;
    display: none;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.card {
    width: 1000px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 40px 40px 52px 40px;
    border-radius: 32px;
}

.card-border {
    border: 4px solid rgba(38, 0, 255, .1);
}

.card-green {
    background-color: rgba(231, 243, 241, 1);
}

.card-yellow {
    background-color: rgba(250, 245, 237,1);
}

.card-blue {
    background-color: rgba(239, 247, 255, 1);
}

.about {
    width: 640px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hello {
    display: flex;
    gap: 20px;
}

.hello span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hello img {
    width: 0;
    height: 0;
    object-fit: cover;
    border-radius: 50%;
}

.links {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-right: 36px;
}

.links .button {
    padding-left: 36px;
    padding-right: 36px;
}

.links span {
    display: flex;
    align-content: center;
    gap: 8px;
}

.thumbnail {
    width: 100%;
    height: auto;
}

.thumbnail img, .thumbnail-mobile img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.thumbnail-mobile {
    display: none;
}

.description {
    width: 854px;
    display: flex;
    flex-direction: column;
}

#cv {
    opacity: 0;
    display: none;
    flex-direction: column;
    gap: 40px;
    width: 960px;
}

.hide-to-left {
    animation: hide-to-left 150ms ease-in-out;
}

.hide-to-right {
    animation: hide-to-right 150ms ease-in-out;
}

.job {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.period {
    font-size: 14px;
    line-height: 20px;
    min-width: 144px;
    max-width: 144px;
    padding-top: 11px;
}

.period-mobile {
    display: none;
    margin-top: 4px;
    padding: 4px 12px 4px 12px;
    border-radius: 120px;
    background-color: rgba(38, 0, 255, .1);
    width: fit-content;
}

/* .job-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
} */

.job-description > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.segment-control {
    display: flex;
    position: relative;
    user-select: none;
    border-radius: 52px;
    background-color: rgba(38, 0, 255, .1);
}

.segment-control span {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 52px;
    z-index: 2;
}

.segment-control span:hover {
    cursor: pointer;
    /* background-color: rgba(38, 0, 255, .1); */
    background-color: rgba(255, 255, 255, .5);
}

.selected-segment {
    position: absolute;
    z-index: 1;
    background-color: white;
    border-radius: 52px;
}

.selected {
    pointer-events: none;
}

.segment-transition {
    transition: left 0.2s cubic-bezier(0.25, 1.25, 0.5, 1);
}

.language {
    display: flex;
    align-items: center;
    justify-content: end;
    min-width: 100%;
}

.language .segment-control {
    padding: 3px;
    gap: 3px;
    max-width: 153px;
    max-height: 34px;
}

.language .segment-control span {
    font-size: 14px;
    line-height: 20px;
    min-width: 72px;
    max-width: 72px;
    min-height: 28px;
    gap: 5px;
}

.language .segment-control span img {
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.language .selected-segment {
    min-width: 72px;
    max-width: 72px;
    min-height: 28px;
    max-height: 28px;
}

.language .selected-segment-first {
    left: 3px;
}

.language .selected-segment-second {
    left: 78px;
}

.navigation {
    opacity: 0;
    position: relative;
    min-height: 52px;
}

.navigation .segment-control {
    gap: 4px;
    padding: 4px;
}

.navigation .segment-control span {
    min-width: 140px;
    max-width: 140px;
    min-height: 44px;
}

.navigation .selected-segment-first {
    left: 4px;
}

.navigation .selected-segment-second {
    left: 148px;
}

.navigation .selected-segment {
    min-width: 140px;
    max-width: 140px;
    min-height: 44px;
}

.pdf {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background-color: rgba(103, 83, 230, 1);
    color: white;
    min-height: 50px;
    border-radius: 32px;
    position: absolute;
    top: 1px;
    left: 310px;
    min-width: 50px;
    scale: 0;
    opacity: 0;
}

.show-pdf-animation {
    animation: show-pdf 150ms cubic-bezier(1, 1.2, 1, 1.2) forwards;
    animation-delay: 125ms;
}

.pdf span {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    align-items: center;
    font-weight: 300;
}

.show-pdf-span-animation {
    animation: show-pdf-span 100ms ease-in-out forwards;
    animation-delay: 300ms;
}

.hide-pdf-animation {
    animation: hide-pdf 100ms ease-in-out forwards;
}

.fadeIn {
    animation: fadeIn 200ms ease-in-out forwards;
    animation-delay: 200ms;
}

.description-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    margin-bottom: 18px;
  }
  
.row {
    display: table-row;
}

.cell {
    display: table-cell;
    vertical-align: top;
    padding-top: 0;
    padding-bottom: 16px;
}

.header {
    width: 110px;
}

@media only screen and (max-width: 1072px) {
    
    .thumbnail {
        display: none;
    }

    .thumbnail-mobile {
        display: block;
        width: 100%;
        height: auto;    
    }

    .wrapper {
        width: 100%;
        overflow: hidden;
        gap: 40px;
        align-items: start;
    }

    .language {
        justify-content: center;
    }

    .card-border {
        border: none;
    }

    .card {
        width: 100%;
        border-radius: 0;
        padding-top: 0;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 0;
    }

    .portfolio .card {
        padding: 24px;
    }

    .about, #cv {
        width: 100%;
    }

    li {
        margin-top: 0;
        margin-left: 16px;
    }

    .links {
        flex-direction: column;
        align-items: start;
        gap: 18px;
    }

    .navigation {
        padding-left: 24px;
    }

    .pdf {
        left: 334px;
    }

    .description {
        width: 100%;
    }

    .description-table {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .row {
        display: flex;
        flex-direction: column;
        gap: 2px;   
    }

    .cell {
        display: block;
        width: 100%;
        padding: 0;
    }

    .job {
        padding-left: 24px;
        padding-right: 24px;
    }

    .period {
        display: none;
    }

    .period-mobile {
        display: block;
    }
}

@media only screen and (max-width: 480px) {
    .navigation {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        min-height: 52px;
        width: 100%;
        padding: 0;
    }

    .navigation a {
        min-width: 100px;
    }

    .pdf {
        position: auto;
        top: auto;
        left: auto;
        min-width: 50px;
        scale: 0;
        opacity: 0;
    }

    .cv {
        margin-top: 50px;
    }
}