Homework_react/HW1/src/App.css

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

body {
    color: #000;
    font: 400 16px/32px 'Roboto' , Arial;
}

a {
    color: inherit;
    text-decoration: none;
    transition: .4s;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

button {
    display: block;
    border: none;
    font: inherit;
    background-color: transparent;
    cursor: pointer;
    transition: .4s;
}

ul li {
    list-style-type: none;
}

.btn-primary {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    background-color: #34547A;
}

.main1 {
    background-color: #EEEFF1;
}

.main2 {
    background-color: #34547A;
}

.main3 {
    background-color: #EEEFF1;
}

.main4 {
    margin-top: 28px;
}

.main5 {
    background-color: #EEEFF1;
}

.mainfooter {
    background-color: #34547A;
}

.btn-primary:hover {
    color: #94b7e2;
}

header {
    background-color: #EEEFF1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.header__title {
    background-image: url(img/WD.png);
    background-repeat: no-repeat;
    text-align: center;
    font-size: 48px;
    line-height: 60px;
    min-width: 96px;
    height: 60px;
    left: 402px;
    top: 50px;
}

.header-nav__item {
    display: inline-block;
    font-weight: 400;
    margin-right: 42px;
    font-size: 16px;
}

.header-nav__item:hover {
    color:#75b6b9;
}

.header-nav__item:last-child {
    margin-right: 0;
}


.flex__box {
    display: flex;
    flex-wrap: wrap;
}

.conteiner__images__pc {
    margin-top: 20px;
    margin-left: 78px;
}

.banner-wrap {
    padding: 147px 0 146px;
}

.banner {
    width: 541px;
    margin-left: auto;
}

.banner__text {
    margin-bottom: 60px;
    display: block;
    font-size: 48px;
    font-weight: 500;
    line-height: 79px
}

.banner__lorem {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #727272;
    margin-bottom: 60px;
}

.banner-link-wrap {
    min-width: 225px;
    height: 55px;
    margin-top: 85px;  
}

.banner__link {
    padding: 25px 41px;
}


.wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}


.conteiner {
    max-width: 1180px;
    padding: 0 15px;
    margin: 0 auto;
}

.banner_me {
    padding-top: 120px;
    max-width: 540px;
    text-align: center;
    margin: auto;
}

.img__box__work {
    display: flex;
    position: relative;
    flex-wrap: wrap;
}

.img__work {
    position: relative;
    cursor: pointer;
}

.img__play {
    position: relative;
    width: 100px;
    height: 100px;
    left: 520px;
    bottom: 470px;
}

.projects {
    display: flex; 
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 60px;
}

.box {
    display: flex;
    align-items: center
}

.img__analytics {
    width: 46px;
    height: 50px;
    color: #fff;
    margin: 100px 0 100px 0;
}

.projects__text {
    flex-direction: row;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin: 10px;
}



.section-skill {
    padding: 100px 0 100px 0;
}

.skill-row {
    display: flex;
    margin: 0 -75px;
}

.skill-col {
    width: 50%;
    padding: 0 75px;
}

.skill-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.skill-bg {
    background-image: url(img/img.jpg);
    height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 47%;
}

.section-header {
    padding-bottom: 25px;
}

.section-header .title {
    font-size: 32px;
    line-height: 1.18;
    font-weight: 500;
    margin: 0 0 25px;
}

.skill-title {
    color: #727272;
    font-size: 16px;
    line-height: 1.6;
    display: block;
    margin-bottom: 20px;
}

.skills-item:not(last-child) {
    margin-bottom: 30px;
}

.skill-wrap {
    position: relative;
    height: 4px;
    background: #c4c4c4;
}

.skill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #34547a;
    width: 85%;
}

.style123 {
    margin-top: 57px;
    margin-bottom: 100px;
}


.conteiner2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1920px;
    padding: 0 15px;
    margin: 0 auto;
}


.img__box {
    position: relative;
    width: 469px;
    height: 469px;
    cursor: pointer;
}

.img__box:hover::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(52 84 122 /80%);
}

.eye__img {
    position: inherit;
    width: 100px;
    height: 100px;
    bottom: 282px;
    left: 185px;
    opacity: 0;
}

.img__box:hover .eye__img {
    opacity: 1;
}

.microsoft__box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 72px 0 100px 0;
}


input {
    outline: none;
    padding: 3px 0 0 16px;
    border: none;
    margin: 65px 15px 20px 15px;
    width: 100%;
    font-size: 20px;
}

.form__inputs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.last__input {
    padding: 3px 0 125px 16px;
    margin: 20px;
    width: 540px;
    height: 175px;
}

.input {
    width: 255px;
    height: 50px;
}

.button__block {
    display: flex;
    justify-content: center;
}

.btn__form {
    text-align: center;
    padding-top: 14px;
    margin: 50px 0 100px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    background-color: #34547A;
    width: 190px;
    height: 55px;
}


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

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

.myname__text {
    width: 200px;
    margin: 50px 0 20px 0;
    font-weight: 500;
    font-size: 21px;
    line-height: 25px;
    color: #fff;
}

.rights__text {
    width: 200px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #fff;
}

.vk__box {
    margin-top: 56px;
}