/* Allgemeine Stile */
body {
    background-color: #CECECE2E;
    font-family: 'Futura-Light';
    font-size: 14px;
    margin: 20px 0px 0px 0px;
}
h1 {
    font-size: 30px;
}
h2, h5 {
    font-size: 14px;
    letter-spacing: 0em;
    text-transform: uppercase;
}
h3 {
    font-size: 24px; 
}
h4 {
    font-size: 18px;
}
a {
    text-decoration: none; 
    transition: 0.6s;
}
a:hover {
    transition: 0.6s;
}
/*p {
}
ul {
}
ul > li {
}
ol {
}
ol > li {
}*/
img {
    display: block;
    margin: auto;
}

/* main */
.main {
    width: 80%;
    margin: auto;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateX(-150%);
    animation: ani2 1.5s forwards;
    min-height: 1440px;
    display: flex;
    flex-direction: row-reverse;
}

/* Sidebar Style */
.photo {
    width: 74.8%;
    border-radius: 150px;
    padding: 3% 3% 3.2% 3%;
    border: 2px solid transparent;
    background: linear-gradient(#181A1D,#181A1D) padding-box, linear-gradient(to top right, #1F2226 0%, #181A1D 100%) border-box;
    box-shadow: -3px 6px 5px #000;
    transition: 0.5s;
}
.photo:hover {
    width: 75%;
    border-radius: 150px;
    padding: 3%;
    border: 2px solid transparent;
    background: linear-gradient(#181A1D,#181A1D) padding-box, linear-gradient(to top right, #181A1D 0%, #181A1D 100%) border-box;
    box-shadow: 0px 0px 0px #000;
    transition: 0.3s;
}
.sidebar {
    width: 25%;
    background: #181A1D;
    padding: 2% 0 0 0;
    min-height: 1430px;
}
.sidebar-content {
    width: 71%;
    display: block;
    padding: 5% 0 0% 0;
    margin: auto;
    color: #ffffff;
}
.sidebar-skills-tittle {
    padding-left: 10px;
}
.pod-skills {
    color: #1930e4;
    letter-spacing: .2em;
    font-size: 11px;
    text-transform: uppercase;
    margin-left: -25px;
    font-family: 'Futura-Bold';
}
.pod-skills-li {
    list-style-type: none;
    margin: 20px 0px 20px 0px;
}
.side-li-44 {
    margin-bottom: 50px !important;
}
.contacts, .tech-skills, .design-skills, .website-building-skills, .marketing-skills, .soft-skills {
  opacity: 0;
  animation: ani 2s forwards;
}
.contacts {
    animation-delay: 1.5s;
  }
.tech-skills {
    animation-delay: 2s;
}
.design-skills {
    animation-delay: 2.5s; 
}
.website-building-skills {
    animation-delay: 3s;  
}
.marketing-skills {
    animation-delay: 3.5s; 
}
.soft-skills {
    animation-delay: 4s; 
}
.sidebar-li, .contacts-p, .contacts-a {
    color: #CECECE;
    margin: 2%;
    font-weight: normal;
}
.sidebar-li::marker {
color: #1930e4;
}
.pro-contacts-in {
    padding-left: 11%;
}
.contacts-a:hover {
    color: #ffffff;
}
.contacts-p {
    color: #1930e4;
    font-weight: bold;
}

/* Content Stile */
.content {
    width: 56%;
    padding: 2% 9% 0 10%;
    min-height: 1430px;
    background: #ffff;
}
.content-a {
    color: #000;
}
.content-a:hover {
     color: #1930e4;
}
.content-li {
    font-size: 13px;
}
.content-li::marker {
    color: #1930e4;
}
.content-li span{
    color: #CECECE;
}
.name {
    background: linear-gradient(20deg, #1930e4 10%, #000000 20%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    display: block;
}
.description {
    font-size: 18px;
}
.about, .projects, .experience {
margin-bottom: 50px;
}
.exp-tittle {
    margin-bottom: 15px;
}
.exp-tittle-span {
    color: #1930e4;
}
.tittle-edu {
    color: #1930e4;
}
.short-text {
    color: #CECECE;
    letter-spacing: .2em;
    font-size: 11px;
    text-transform: uppercase;
}
.tittle-5 {
    border-top: solid 1px #CECECE;
    padding-top: 20px;
}
.ul-li-44 {
    margin-bottom: 50px;
}

 /* Buttons Style */
 /* #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #1e2939;
    color: #fff;
    cursor: pointer;
    padding: 15px;
    border-radius: 0px;
    letter-spacing: .2em;
    font-size: 11px;
    text-transform: uppercase;
} */
#toTop {
    width: 70px;
    background: #fff;
    text-align: center;
    padding: 7px;
    position: fixed;
    bottom: 25px;
    right: 30px;
    cursor: pointer;
    display: none;
    color: #000;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.2);
    }

@media (max-width: 1280px) {
    body {
    }
    .main {
        width: 82%;
    }
}
@media (max-width: 1200px) {
    body {
    font-size: 12px;
    }
    .main {
        width: 85%;
    }
    .name {
        background: linear-gradient(70deg, #1930e4 10%, #000 20%);
          background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
@media (max-width: 1080px) {
    h4 {
        font-size: 14px;
      }
    .main {
        width: 90%;
    }
    .description {
        font-size: 17px;
    }
    .sidebar-content {
        width: 78%;
    }
    .pro-contacts-in {
        padding-left: 5%;
      }
}

/* Закончил здесь */
@media (max-width: 860px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 25px;
    }
    h3 {
        font-size: 20px;
      }
    h2, h5 {
        font-size: 13px;
    }
    .main {
        width: 90%;
    }
    .content {
        width: 47%;
        padding: 2% 7% 0 8%;
      }
    .sidebar {
        width: 38%;
    }
    .short-text {
        letter-spacing: .1em;
        font-size: 10px;
    }
}
@media (max-width: 632px) {
    body {
        font-size: 12px;
        margin-top: 20px;
    }
    h1 {
        font-size: 22px;
    }
    h3 {
        font-size: 18px;
      }
    h2, h5 {
        font-size: 13px;
    }
    .main {
        width: 95%;
    }
    .pro-contacts-in {
        padding-left: 5%;
    }
    .sidebar-content {
        width: 80%;
    }
    .description {
        font-size: 14px;
    }
    .sidebar {
        width: 42%;
    }
    .content {
        width: 50%;
        padding: 2% 4% 0 4%;
    }
    .content-li {
        font-size: 12px;
    }
    .short-text {
        letter-spacing: 0em;
        font-size: 10px;
    }

}
@media (max-width: 430px) {
    body {
       font-size: 10px;
    }
    h1 {
        font-size: 18px;
        margin: 30px 0px 30px 0px;
      }
    h2, h5 {
        font-size: 12px;
    }  
    h3 {
        font-size: 16px;
      }
    .main {
        width: 95%;
    }
}