.summary { background: #f1f1f1; height: 100%; min-height: 100vh; font-family: "LabGrotesque", sans-serif; &__content { display: flex; flex-direction: column; } &__title { font-weight: 700; font-size: 22px; line-height: 32px; margin-bottom: 0; span { color: #52b709; } } &__back { display: flex; align-items: center; column-gap: 30px; margin-top: 20px; cursor: pointer; p { margin-bottom: 0; font-size: 14px; line-height: 32px; font-weight: 500; } } &__info { min-height: 110px; background: white; border-radius: 12px; margin-top: 25px; display: flex; align-items: center; padding: 0 25px 0 45px; justify-content: space-between; @media (max-width: 930px) { padding: 0 25px; } @media (max-width: 690px) { padding: 0 20px; min-height: 80px; } @media (max-width: 500px) { padding: 0 5px; } } &__person { display: flex; align-items: center; column-gap: 45px; @media (max-width: 825px) { column-gap: 20px; } @media (max-width: 550px) { column-gap: 10px; } } &__avatar { width: 88px; height: 88px; border-radius: 100px; @media (max-width: 690px) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } } .openGit { .summary__name { max-width: none; @media (max-width: 490px) { max-width: 280px; } } } &__name { font-weight: 500; font-size: 16px; line-height: 32px; position: relative; @media (max-width: 690px) { font-size: 14px; margin-right: 10px; line-height: 15px; } @media (max-width: 550px) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; margin: 0; } @media (max-width: 450px) { max-width: 160px; } &:after { content: ""; position: absolute; background: #52b709; border-radius: 12px; width: 70%; height: 8px; bottom: -14px; left: 0; } } &__git { border-radius: 31px; width: 177px; height: 62px; font-weight: 500; font-size: 1.9em; line-height: 32px; color: white; border: none; transition: all 0.3s ease; background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient( 36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100% ); &:hover { box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); transform: scale(1.02); } @media (max-width: 690px) { width: 120px; height: 50px; } @media (max-width: 450px) { width: 80px; height: 40px; } } &__skills { background: #ffffff; border-radius: 12px; margin-top: 35px; } &__sections__head { display: flex; min-height: 69px; background: #e1fccf; border-radius: 12px 12px 0px 0px; align-items: center; padding: 0 35px 0 50px; justify-content: space-between; @media (max-width: 550px) { padding: 0 15px; } h3 { font-style: normal; font-size: 18px; line-height: 32px; margin: 0; @media (max-width: 660px) { line-height: 20px; } } button { background: #ffffff; border-radius: 44px; padding: 10px 20px; display: flex; align-items: center; border: none; height: 42px; font-weight: 500; font-size: 14px; line-height: 32px; white-space: nowrap; @media (max-width: 520px) { font-size: 12px; padding: 10px; white-space: nowrap; } } .edit { background-color: green; color: white; } } .skills__section { &__items { padding: 25px 35px 25px 50px; @media (max-width: 550px) { padding: 15px; } &__wrapper { display: flex; flex-wrap: wrap; column-gap: 5px; .skill_item { font-weight: 700; font-size: 16px; line-height: 32px; white-space: nowrap; text-transform: uppercase; @media (max-width: 550px) { font-size: 14px; line-height: 20px; } } } } .editSkills { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; span { display: flex; column-gap: 8px; background-color: #f5f5f5; border-radius: 15px; padding: 3px 10px 3px 10px; font-weight: 700; font-size: 16px; line-height: 32px; white-space: nowrap; text-transform: uppercase; img { cursor: pointer; } } .selectSkills { position: relative; display: flex; flex-direction: column; font-weight: 700; font-size: 16px; &__name { display: flex; column-gap: 12px; align-items: center; cursor: pointer; background-color: #f5f5f5; border-radius: 15px; padding: 3px 10px 3px 10px; img { transition: all 0.3s ease; } .open { transform: rotate(180deg); } } &__dropDown { position: absolute; background-color: white; border-radius: 12px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; row-gap: 5px; align-items: center; padding: 7px; top: 35px; &::-webkit-scrollbar { width: 3px; border-radius: 10px; } &::-webkit-scrollbar-thumb { background: #cbd9f9; border-radius: 20px; } &::-webkit-scrollbar-track { background: #c5c0c6; border-radius: 20px; } p { cursor: pointer; } } } } } &__experience { display: flex; flex-direction: column; row-gap: 20px; margin-top: 30px; .experience { &__block { background: #ffffff; border-radius: 12px; } &__content { padding: 15px 35px 15px 50px; @media (max-width: 550px) { padding: 15px 15px 20px; } h2 { font-weight: 700; font-size: 16px; line-height: 32px; margin-bottom: 0; } p { font-weight: 400; font-size: 16px; line-height: 32px; margin-bottom: 0; } a:hover { text-decoration: none; color: #007bff; } } } } .ck-toolbar { border: none !important; } .ck-content { border: none !important; padding: 15px 35px 15px 50px !important; } &__sectionGit { margin-top: 25px; &Items { margin-top: 25px; display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 25px; justify-content: space-between; .noGitItems { width: 100%; font-size: 20px; background: #ffffff; border-radius: 12px; padding: 10px; color: #000000; font-weight: 600; } .gitItem { width: 48%; display: flex; align-items: center; justify-content: space-between; background: #ffffff; border-radius: 12px; padding: 10px; transition: all 0.3s ease; color: #000000; &:hover { box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); transform: scale(1.02); text-decoration: none; } @media (max-width: 825px) { width: 100%; } @media (max-width: 470px) { padding: 15px; } &__info { display: flex; flex-direction: column; max-width: 350px; width: 100%; @media (max-width: 825px) { max-width: 100%; } &__about { display: flex; align-items: center; column-gap: 15px; } &__name { h4 { font-weight: 700; font-size: 18px; line-height: 32px; margin-bottom: 0; } p { font-weight: 300; font-size: 16px; margin-bottom: 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; @media (max-width: 470px) { max-width: 200px; } } } &__specification { display: flex; align-items: center; padding-left: 10px; column-gap: 25px; @media (max-width: 470px) { margin-top: 0; } span { background: #d4f123; border-radius: 12px; max-width: 260px; width: 100%; height: 8px; } p { margin-bottom: 0; font-weight: 400; font-size: 14px; line-height: 32px; } } } &__link { border-radius: 50%; background: #ddeec6; min-width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; } } } } footer { margin-top: 10px; } .container { max-width: 1160px; margin-top: 23px; @media (max-width: 570px) { margin-top: 0; } } }