/* Setting my list */
*, 
*::after,
*::before{
box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6{
    margin: 0;
}

body{
    margin: 0;
    width: 100%;         
}

/* HEADER */
.header{
    font-size: 20px;    
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    height: 60px;
    background: linear-gradient(rgba(233, 111, 50, 0.2), rgba(101, 101, 233, 0.133));
}

/* NAV */
nav{
    padding: 20px 0;
}

.nav__ul{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style-type: none;
    text-transform: uppercase;    
}

.nav__link{
    text-decoration: none;
    color: brown;
    transition: .2s linear;
}

.nav__link:hover{        
    color: rgb(224, 199, 52);
}

/* Container */
.container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.two__parts{
    display: flex;
    flex-wrap: wrap;  
    max-width: 100%;
}

/* Left column */

.left__column{
    font-size: 20px;    
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    width: 40%;   
    background: linear-gradient(rgba(101, 101, 233, 0.133),rgba(233, 111, 50, 0.2));    
}

.main__card{
    max-width: 100%;
    height: 100%;
    align-items: center;
    height: 500px;

}

.main__card img{
    width: 300px;
    height: 300px;
    margin: 10px 0 0 100px;
    object-fit: cover;
    max-width: 100%;   
    border-radius: 50%;
    border: 14px solid rgb(211, 204, 204);
}

.FIO{
    text-align: center;
    color: rgba(101, 101, 233);
    font-size: 60px;
}

.profession{
    font-size: 30px;
    font-weight: 500;
    color: rgba(101, 101, 233);
    text-align: center;
}

/* Contacts */
.Contacts {
    display: block;      
}

.Tittle__header{
    width: 100%;
    max-width: 220px;
    margin: -20px auto 0;
    padding: 15px;
    border-radius: 15px;

    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    background-color: chocolate;
}

.Subtittle__items{
    list-style-type: none;
    align-items: center;
    margin: 20px auto;
    padding: 0;
    height: 100%;    
}

.Contacts__value{
   display: flex;
   margin-bottom: 35px;
   width: 100%;
   height: 50px;      
}



.Contacts__icons{       
    width: 30%;
    height: 100%;          
}

.Contacts__icons img{
    width: 40px;
    height: 40px;    
    margin: 0 auto;    
}

.Contacts__text{
    font-size: 22px;
    font-weight: bold; 
    text-align: center;
    color: rgba(101, 101, 233);
    
}

.Contacts__text p{
    margin:13px auto;
}



/* Language */
.Languages{
    display: block;
    height: 300px;
}

.Languages__part{
    display: flex;
    width: 100%;
    height: 80px;
    margin-top: 15px;
}

.Languages__img{    
    width: 30%;    
}

.Languages__img img{

    width: 40px;
    height: 40px;    
}

.Languages__text{        
    height: 100%;
    width: 70%; 
    margin-bottom: 20px;
}

.Languages__text p{
    
    padding-top: 10px;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    text-align: left;
    color:rgba(101, 101, 233)
}

/* Skills */

.skill--position{
    margin-top: 15px;
}

.Skills__part{
    display: flex;
    height: 100%;
}

.Skills__wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.Skills__block{
    display: flex;
    align-items: center;
    list-style: none;
    width: 100%;
    height: 50px;
}

.Programm__name{
    width: 50%;
    font-size: 30px;
    font-weight: bold;
    color: slateblue;
}

.level__skill{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    padding-right: 15px
}

.level__skills__list{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(59, 226, 87);
    margin-left: 10px;

}

.list--none{
    background: rgb(236, 94, 165);
}

/* RIGHT  */
.right__column{
    width: 60%;     
    background: linear-gradient(rgba(101, 101, 233, 0.133),rgba(233, 111, 50, 0.2)); 
}

.aside{
    margin: 0;
    width: 100%;
    height: 100%;
    
}

/* tittle selectors */
.tittle__Aboutme,
.tittle__Education,
.tittle__code{
    font-size: 20px;    
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;    
    width: 100%;
}

/* logo */
.Description__logo,
.Education__logo,
.Code__logo{
    padding: 20px ;
}
.Description__logo img,
.Education__logo img,
.Code__logo img{
    max-width: 50px;
    height: 50px;
 }


/* after for parts */
.tittle__Aboutme h3::after,
.tittle__Education h3::after,
.tittle__code h3::after{
    content: "";
    display: block;
    border: 3px solid #421242;
}

/* style text  */
.about_me_text,
.Education,
.Code_example{    
    font-family: 'Permanent Marker', cursive;    
    font-weight: 16px;
    font-weight: 400;
    color: #421242;
    padding: 0 20px;
    font-size: 25px;
    line-height: 1.5;
    font-weight: 500;
    font-style: oblique;
}

/* font-size title */
.Description{    
    font-weight: bold;
    font-style: oblique;
    color: rgb(15, 61, 38);
    order: 2;
}

/* code and colors */
.pre{
    /* font-family: 'Alfa Slab One', cursive;
    font-family: 'Oooh Baby', cursive;
    font-family: 'Permanent Marker', cursive; */
    
    margin: 0;
    background: rgba(12, 12, 107, 0.459);
}
.my_code .pre code{ 
    font-family: 'Alfa Slab One', cursive;  
    font-size: 16px;    
    font-size: 20px;
    
    
}

.blue{
    color: rgb(3, 3, 226);
}
.see__breeze{
    color: rgb(62, 62, 231,0.5);
}

.white{
    color: #ffffff;
}
.purle{
    color: rgb(127, 9, 238);
}

.purle_1{
    color: rgb(127, 9, 238,0.4);
}
.yellow{
    color: rgb(241, 241, 6);
}
.awful{
    color: rgb(145, 145, 95);
}

.green{
    color: rgb(99, 224, 99);
}

/* footer */
.footer{    
    font-family: 'Permanent Marker', cursive; 
    font-weight: 400;
    color: #000 ; 
    display: flex;    
    justify-content: space-around; 
    align-items: center;  
    background: linear-gradient(rgba(233, 111, 50, 0.2), rgba(101, 101, 233, 0.133));    
}

.GitHub{
    margin: 0;
    padding: 0;
    width: 30%;
    max-width: 80px;
    height: auto;
}

.DateCreated{    
    font-size: 20px;
    font-style: italic;    
}

.RSschool{
    width: 30%;
    max-width: 200px;    
    height: 80px;
}


@media(max-width:996px){
   
/* block main card */
.two__parts{
    display: flex;
    width: 100%;
    flex-direction: column;
}

.left__column{
    width: 100%;
    justify-content: center;
    align-items: center;
}

.main__card{
    margin-top: 20px;
    width: 100%;
    text-align: center;
}
.main__card img{
    margin: 0;
    padding: 0;
    
}

/* second block CONTACTS */
.Contacts{
    margin-bottom: 40px;
}
.Contacts__value{
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.Contacts__icons{   
    width: 100%;
    max-width: 50px;    
}
    
/* block Languages */
.Languages__part{
    justify-content: center;
    align-items: center;
}
.Languages__img{
    margin-right: 40px;
    width: 100%;
    max-width: 50px;
    text-align: center;

}

.Languages__text{
    width: 100%;
    max-width: 250px;
}

/* Block skills */
.Skills__wrapper{
   width: auto;
   
    
}

.Skills__block{
    width: 100%;    
    text-align: center;
}

.level__skill{
    width: 250px;
}

/* Right column */

.right__column{
    width: 100%;
}
}