* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* Обычный */
@font-face {
    font-family: 'Gilroy medium';
    src: url(./fonts/gilroy-medium.ttf);
}

/* Жирный */
@font-face {
    font-family: 'Gilroy bold';
    src: url(./fonts/gilroy-bold.ttf);
}

body {
    font-family: "Gilroy medium";
    font-style: normal;
}

.container {
    margin: 0 250px;
}

.wrapper {
    display: flex;
    justify-content: space-between;
}

.header {
    position: fixed;
    width: 100%;

    font-family: "Gilroy bold";

    background-color: #fff;

    z-index: 1;
}

.header__nav {
    padding: 33px 0;

    border-bottom: 1px solid #828282;
}

.header__list {
    list-style-type: none;
}

.header__link {
    font-size: 18px;
    line-height: 22px;
    text-decoration: none;

    color: #828282;
}

.header__link:hover {
    color: #070707;
}

.header__link:active {
    opacity: 0.65;
}

.home {
    padding-top: 129px;
    padding-bottom: 30px;

    font-family: 'Gilroy bold';

    background-color: #fff;
}

.home__title {
    width: 124px;

    font-size: 47.3392px;
    line-height: 59px;

    color: #070707
}

.home__subtitle {
    width: 156px;
    padding-bottom: 20px;
    align-self: flex-end;

    font-family: 'Gilroy medium';
    font-size: 18px;
    line-height: 22px;

    color: #070707;
}

.home__lang-select {
    padding-top: 70px;

    font-size: 16px;
    line-height: 20px;

    transform: rotate(-90deg);
}

.home__lang-select input {
    display: none;
}

.lang>label {
    cursor: pointer;
}

.lang>input:checked~label {
    color: #070707;
}

.lang>input:not(:checked)~label {
    color: #828282;
}

.home__img {
    width: 100%;
    padding: 30px 0 100px;
}

.about {
    display: flex;
    flex-direction: column;

    padding: 120px 480px 107px;

    background-color: #F6F6F6;
}

.about__title {
    margin-bottom: 18px;

    font-family: 'Gilroy bold';
    font-size: 34px;
    line-height: 42px;
    text-align: center;

    color: #070707
}

.about__subtitle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 218px;
}

.about__subtitle>p {
    font-size: 18px;
    line-height: 22px;
    text-align: center;

    color: #070707;
}

.skills {
    padding: 90px 0 110px;
}

.skills__title {
    margin-bottom: 70px;

    font-family: 'Gilroy bold';
    font-size: 34px;
    line-height: 42px;
    text-align: center;

    color: #070707;
}

.skills__subtitle {
    margin-bottom: 84px;

    font-size: 18px;
    line-height: 22px;
    text-align: center;

    color: #070707;
}

.portfolio {
    padding: 113px 0 96px;

    background-color: #F6F6F6;
}

.portfolio__title {
    margin-bottom: 47px;

    font-family: 'Gilroy bold';
    font-size: 34px;
    line-height: 42px;
    text-align: center;

    color: #070707;
}

.portfolio__card {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 100px;
}

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

.card__img {
    width: 100%;
    margin-bottom: 45px;
}

.card__subtitle {
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    text-decoration-line: underline;

    color: #070707;
}

.footer {
    padding: 115px 0 123px;

    background-color: #fff;
}

.footer__title {
    margin-bottom: 20px;

    font-family: 'Gilroy bold';
    font-size: 34px;
    line-height: 42px;
    text-align: center;

    color: #070707;
}

.footer__subtitle {
    margin-bottom: 30px;

    font-size: 18px;
    line-height: 22px;
    text-align: center;

    color: #070707;
}

.footer__btn {
    display: block;
    margin: 0 auto 86px;

    box-sizing: border-box;

    width: 181px;
    padding: 13px 28px;

    font-family: 'Gilroy bold';
    font-size: 18px;
    line-height: 22px;
    text-align: center;

    color: #FFFFFF;
    background-color: #070707;

    border: 1px solid #070707;
    border-radius: 30px;

    cursor: pointer;
}

.footer__btn:hover {
    color: #070707;
    background-color: #FFFFFF;

    border: 1px solid #070707;
}

.footer__btn:active {
    opacity: 0.65;
}

.footer__icons {
    display: flex;
    justify-content: space-between;

    width: 343px;

    margin: 0 auto 45px;
}

.icon__img {
    cursor: pointer;
}

.icon__img:hover {
    opacity: 0.65;
}

.icons__subtitle {
    font-size: 14px;
    line-height: 17px;
    text-align: center;

    color: #828282;
}