*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family: "SchibstedGrotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #0A0A0A;
}

.layout {
    max-width:1360px;
    margin:0 auto;
    padding:0 20px;
}

.header {
    margin: 40px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header__name {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.header__title {
    color: #ABABAB;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.02em;
}

.main {
    display: flex;
    gap: 40px;
    position: relative;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 420px;
    flex-shrink:0;
    border-bottom: 0.5px solid #383838;
    position: sticky;
    top: 40px;
    align-self: flex-start;
}

.sidebar__description {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
    padding: 30px 0;
    border-top: 0.5px solid #383838;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.sidebar__links {
    display: flex;
    flex-direction: column;
}

.sidebar__link{
    padding: 14px 0 16px 0;
    border-top: 0.5px solid #383838;
}

.sidebar__link a,
.experience__company a,
.education__company a,
.portfolio__link a,
.portfolio__tilda-link a {
    position: relative;
    color: #ABABAB;
    padding-right: 12px;
}

.sidebar__link a:before,
.experience__company a:before,
.education__company a:before,
.portfolio__link a:before,
.portfolio__tilda-link a:before {
  content: '';
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    right: 0;
    top: 50%;
    margin-top: 1px;
    transform: translateY(-50%);
    mask-image: url('arrow.svg');
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('arrow.svg');
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: #ABABAB;
}

.sidebar__link a:hover:before,
.experience__company a:hover:before,
.education__company a:hover:before,
.portfolio__link a:hover:before,
.portfolio__tilda-link a:hover:before {
    background-color: #FFFFFF;
}

.content {
    flex: 1;
}

.experience,
.education {
    border-top: 0.5px solid #383838;
    padding: 30px 0 0 0;
}

.experience__title,
.education__title{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.01em;
    padding-bottom: 10px;
}

.experience__item,
.education__item {
    padding: 20px 0 60px;
    border-bottom: 0.5px solid #383838;
    display: flex;
    gap: 40px;
}

.experience__item:last-child,
.education__item:last-child {
    border-bottom: none;
}

.experience__header,
.experience__content,
.education__header,
.education__content{
    flex:1;
}

.experience__header,
.education__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.experience__position,
.education__position {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.experience__meta,
.education__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.experience__period,
.experience__location,
.education__period,
.education__location {
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
}

a {
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
}

.experience__content,
.education__content{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.experience__list,
.education__list {
    padding-left: 16px;
    list-style-position: outside;
}

.skills {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-top: 0.5px solid #383838;
    padding: 30px 0 60px 0;
}

.skills__title,
.recommendations__title {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.skills__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skills__description {
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
}

.skills__list {
    padding-left: 16px;
    list-style-position: outside;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.recommendations {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-top: 0.5px solid #383838;
    padding: 30px 0 40px 0;
}

.recommendations__item {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.recommendations__author {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.recommendations__position {
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
}

.recommendations__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portfolio__title {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.01em;
    border-top: 0.5px solid #383838;
    padding: 30px 0 10px 0;
}

.portfolio__item {
    padding: 20px 0 60px;
    border-bottom: 0.5px solid #383838;
}

.portfolio__item:last-child {
    border-bottom: none;
}

.portfolio__info,
.portfolio__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portfolio__category {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.portfolio__description {
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
}

.portfolio__tilda-links {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.portfolio__tilda-link {
    padding: 14px 0 16px 0;
    border-bottom: 0.5px solid #383838;
    color: #ABABAB;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-decoration: none;
}

@media (max-width: 1024px) {

    .layout {
        max-width: 100%;
    }

    .main {
        flex-direction: column;
        gap: 0;
    }

    .sidebar {
        width: 100%;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        top: auto;
        border-bottom: none;
    }

    .header {
        margin: 20px 0 60px;
        min-height: calc(100vh - 100px);
    }

    .experience__item,
    .education__item,
    .portfolio__item {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0 20px;
    }
}