@import "./base.css";
@import "./container.css";

html{
    scroll-behavior: smooth;
}

.header{
    padding: 32px 0;
    background-color: #27AE60;
    position:sticky;
    width:100%;
    top:0;
    z-index: 100;
}

.header__wrapper{
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    font-weight: 700;
    font-size: 36px;
    color: #fff;
    text-transform: uppercase;
}

.navigation{
    display:flex;
    gap: 32px;
}

.navigation__link{
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    transition: color 0.4s ease-out;
}

.navigation__link::before{
    content: "";
    margin-right:8px;
    display: inline-block;
    background-color:lightgreen;
    width:10px;
    height:10px;
    border-radius:70%;
    transform: scale(0);
    transition:transform 0.4s ease-out;
}

.navigation__link:hover::before{
   content: "";
   transform: scale(1);
}

.navigation__link:hover{
    color:lightgreen;
}

.hero{
  padding: 72px 0;
}

.hero_title{
  font-weight: 500;
  font-size: 18px;
  color: #828282;
}

.hero_subtitle{
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  color: #fff;
}

.hero__description{
    margin-top: 32px;
    font-weight: 500;
    font-size: 18px;
    color: #828282;
    width:540px;
}

.hero-actions{
    margin-top: 62px;
    display: flex;
    gap:16px;
}

.hero-actions__link{
    height: 40px;
    padding: 12px 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    border-radius: 8px;
    background-color: #27ae60;
    transition: background-color 0.4s ease-out;
}

.hero-actions__link-secondary{
    background-color: transparent;
    outline: 1px solid white;
}

.hero-actions__link:hover{
    background-color: darkgreen;
}

.status::before{
    content:"";
    position:absolute;
    display:inline-block;
    width:32px;
    height:32px;
    bottom:58px;
    border-radius: 100%;
    background-color: #34c759;
    right:65px;
    border: 2px solid white;
}

.status::after{
    content:"#open_to_work 👨‍💻";
    position:absolute;
    font-weight: 500;
    font-size: 14px;
    color: #000;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #ebebeb;
    width:160px;
    height:56px;
    bottom:70px;
    right:340px;
}

.hero__ava{
    border-radius: 50%;
    border: 5px solid #27ae60;
    padding: 15px;
}

.hero__wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button_up{
    display:flex;
    align-items: center;
    justify-content: center;
    width:40px;
    height:40px;
    border-radius: 50%;
    background-color: #27AE60;
    position:fixed;
    bottom:6%;
    right:6%;
    z-index: 50;
    transition: background-color 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.button_up:hover{
    background-color: darkgreen;
    transform:scale(1.15);
}

.about{
    padding: 72px 0;
}

.second-img{
    border-radius: 16px;
}

.second_title{
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    color: #fff;
    margin-bottom:30px;
}

.centered-text{
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #fff;
    width:576px;
    margin:0 auto;
    margin-bottom:56px;
}

.about_wrapper{
    display: flex;
    justify-content: space-between;
    align-items:center;
    gap:80px;
}

.main_text{
    font-weight: 600;
    font-size: 18px;
    text-align: justify;
    color: #fff;
}

.main_text2{
    margin-top:32px;
    font-weight: 400;
}

.about_but{
    background-color: transparent;
    outline: 1px solid white;
    border-radius: 8px;
    padding: 12px 34px;
    margin-top: 65px;
    display:inline-block;
}

.skill_list{
    margin-top: 64px;
    display:flex;
    align-items: center;
    justify-content: space-around;
}

.img_bg{
    display:flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background-color: #212121;
}

.programing_name{
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: #fff;
  margin-top: 8px;
}

.programing_charactr{
    width:200px;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #fff;
    margin-top: 15px;
}

.portfolio_class{
    margin:50px auto;
}

.portfolio-title{
    font-weight: 700;
    font-size: 48px;
    color: #fff;
}

.portfolio-text{
    width:650px;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    padding-top: 35px;
    padding-bottom: 60px;
}

.portfolio_list{
    display: flex;
    gap:100px;
}

.portfolio_item{
    border-radius: 16px;
    display:flex;
    width:330px;
    flex-wrap: wrap;
    background: #fff;
    overflow:hidden;
}

.portfolio_inside{
    padding:18px 24px;
}

.portfolio_img{
    position: relative;
}

.portfolio-item-name{
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #132238;
}

.portfolio-item-text{
    font-weight: 400;
    font-size: 12px;
    text-align: justify;
    color: #556070;
}

.portfolio_link{
    transform: scale(1);
    text-transform: uppercase;
    position:absolute;
    left:45%;
    top: 54%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 117px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    border-radius: 8px;
    background-color: #27ae60;
    transition: background-color 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.portfolio_link:hover{
    background-color: darkgreen;
    transform:scale(1.15);
}

.portf_link1{
    left:10%;
}

.portf_link2{
    left:80%;
}

.contacts{
    margin:70px auto;
}

.contacts-container{
    width:441px;
}

.contacts-title{
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    color: #fff;
}

.contacts-text{
    margin-top:10px;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #fff;
}

.contacts-list{
    margin-top:25px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 25px;
    align-items:flex-start;
    margin-left:100px;
}

.contacts-img{
    list-style:inside;
}


.contacts-list_item{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:8px;
}

.contacts-list_text{
    font-weight: 400;
    font-size: 20px;
    color: #fff;
}

.footer_class{
    margin:30px auto;
}

.footer_div{
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.footer_list{
    display:flex;
    gap:8px;
}

.footer-list-it-bg{
    transform: scale(1);
    display: flex;
    width: 40px;
    height: 40px;
    background-color: #27ae60;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.footer-list-it-bg:hover{
    background-color: darkgreen;
    transform:scale(1.15);
}

.footer_text{
    font-weight: 500;
    font-size: 14px;
    color: #e5e5ea;
}