*{margin:0px;box-sizing:border-box;font-family:Roboto, sans-serif;}

body{height:100vh;background-image:url(./photos/back.gif);display:flex;align-items: center;}
#leftPart{
    position:fixed;
    top:0px;
    width:fit-content; height: 105%;
        display:flex;flex-direction: row;   
 }
.leftMenu{
    height: 105%;
    width:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color: #2A2438;
    transition:ease all 0.5s;
    
}
.leftMenu:hover{width:100px;}
.leftMenu:hover #options{display:flex;flex-direction:column;}
.leftMenu:hover #options-icon{display:none;}
#options{
    list-style-type: none;
    padding:0px;
    margin:4px;
    display:none;
}
#options li{
    border-radius:8px;
    padding:5px;
    margin:3px;
    margin-top:20px;
    background-color: #189214;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    transition:all ease 0.5s;
}
#options li *{color:#2A2438;}
#options li:hover{cursor:pointer;background-color: #1c152d;}
#options li:hover *{color:#189214;}

#options-icon{margin:5px;}
#options-icon div{
    margin:2px;
    width:25px;
    height:6px;
    background-color:#189214;
    border-radius:5px;
}
#options-icon div:last-of-type{
    width:15px;
}
#decoration{height: 105%;width:20px;
    background-color: #189214;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

#inside{
    display:flex;flex-direction: column;
    margin:30% auto;
    justify-content: center;
    height:480px;width:660px;
    position:relative;
    height: 300px;
    transition: ease all 0.5s;
}
#inside> div{display:flex;position:absolute;padding:20px;border-radius: 20px;}
#inside *{text-decoration: none;font-weight: bold;vertical-align: middle;}


#contactme{background-color: #2A2438;left:0px;display:none;}
#contactme ul img{
    filter: invert(34%) sepia(72%) saturate(995%) hue-rotate(81deg) brightness(103%) contrast(92%);
    border-radius: 10px;
}
#contactme ul{padding:20px}
#contactme ul li{margin:10px auto;display: flex;}
#contactme ul a{display: flex;}
#contactme ul a p{ transform: rotateY(90deg);
                 transform-origin: 0% 100%;
                 transition:ease all 0.5s;}
#contactme ul a:hover p{transform: rotateY(0deg);}
#contactme ul p{color:#189214;padding-left:5px;line-height: 30px;}
#inside #mailform{padding:20px 50px 20px 50px;background-color:#189214;left:250px;height:288px;margin:2px;transition: ease all 0.5s;justify-content:center}
#inside #mailform *{color:#1d0c40;text-indent: 20px;}
#btn2{
    display:flex;
    background-color: #189214;
     border-radius:5px;
     width:80px !important;
     height: fit-content;
     justify-content: center;
     padding:5px;
     margin-left:20px;
     margin-top:10px;
     overflow: hidden;
    }

#btn2 p{
    color:#1c152d;
    width:fit-content;
    text-indent: 0px !important;
}
#btn2:hover{background-color: #1c152d;cursor:pointer;transition:all ease 0.5s;}
#btn2:hover p{color: #189214 !important;}

#mailform form{overflow:hidden;}
#mailform form *{border-radius: 10px;}

#mailform textarea{
    overflow-y: scroll;
    overflow-x: hidden;
    resize:none;
}


#btn{background-color: #189214; border-radius:5px;width:fit-content;height: fit-content;align-items: center;padding:5px;}
#contactme ul #btn p{color:#1d0c40;}
#btn:hover{background-color: #1c152d;cursor:pointer;transition:all ease 0.5s;}
#contactme ul #btn:hover p{color:#189214;}


#inside img{ width:250px;border-radius: 20px;}


#works{
    display:none; flex-direction: column;
    margin:180px auto;
    justify-content: center;
    position:relative;
    transition: ease all 0.5s;
    width: 1050px;height:fit-content;
}
#works> div{display:flex;padding:20px;border-radius: 20px; align-items: center;}
#works *{text-decoration: none;font-weight: bold;vertical-align: middle;color:rgb(158, 158, 158);}
.topInfo{background-color: #2A2438;height:340px;width:1050px;position:relative;}
.topInfo >*{margin: 50px 15px 0px 10px;}
.topInfo> img{width:200px;height:200px;border-radius: 15px;}
.topInfo .text{height: 60%;width: 480px;padding:10px; background-color:#352F44;display:flex;align-items: center;text-align: center;border-radius: 20px;}
.topInfo .text p{height: fit-content;width:450px;}
.miniIcons{position:absolute;top:0px;left:0px;}
.skillsSmall{position:absolute;
            transition:all ease 0.5s;
            border-radius: 50px;
            padding:8px;
            background-color:#352F44;
            top:95px;left:230px;
            transform-origin: 50% 50%;
        }
.skillsSmall img{width: 35px; transform-origin: 50% 50%;transition:all ease 0.5s;}
.skillsSmall:hover img{transform:scale(1.2) ;}
.skillsSmall:hover{transform:scale(1.2);}
.skills{padding:10px; background-color:#352F44;}

#works #containworks{width: 100%;height: fit-content;display: grid;}
#containworks .work{display:none;position:relative;padding:20px;border-radius: 20px; align-items: center;background-color:#352F44;width:500px;height:200px;margin:20px 10px 10px 0px; }
#containworks .work>div{width: 300px;}
#containworks .work .btn{display: flex;width:fit-content;height:fit-content;margin-top:10px;background-color:#189214;border-radius: 20px;padding:10px;}
#containworks .work .btn p{color:black;}
#containworks .work img{width:150px;border-radius: 20px;}
#containworks .work div div{display: flex;height:120px;border-radius: 20px;align-items: center;}

@media (max-width: 1250px){

    body {align-items:center;height:fit-content !important }
    #inside>div{height: fit-content !important;}
    .skills{display:none}
    .topInfo{width:820px;}
    #works{width:fit-content}
    #containworks{width:fit-content !important;margin:2px auto}
}

@media (max-width: 960px) {
   
    body { flex-direction: column;align-items:center;height:fit-content !important }
    #leftPart { width: 100%; height: fit-content; position: relative; flex-direction: column;margin-top:10px }
    .leftMenu { width: 100%; height: 50px; flex-direction: row;padding:20px 0px 20px 0px!important }
    #options-icon { display: none; }
    #options { display: flex; height: fit-content; width: fit-content; padding: 0px; }
    #options li { margin: 0px 10px; }
    #decoration { width: 100%; height: 20px; }
    .leftMenu:hover { width: 100%; height: 50px;}
    .leftMenu:hover #options { flex-direction: row;}

    #inside{position:relative;margin:50px auto;flex-direction:column-reverse;align-items:center;height:fit-content !important;width:fit-content !important;}
    #inside div{position:static;height:fit-content;width:350px;margin:10px auto;}
    #inside #mailform{padding:10px;height:fit-content;width:350px !important;}
    #inside #mailform form{width:fit-content;}
    #contactme{display:flex;flex-direction:column;align-items:center}
    #contactme #btn{display:none;}
    #contactme ul a p{ transform: rotateY(0deg);}

    #works{margin-top:20px !important;padding:0px !important;position:relative;margin:5px auto;flex-direction:column;align-items:center;height:fit-content;width:fit-content;}
    #works div{position:static;height:fit-content;width:fit-content;margin:10px auto;padding:5px;}
    #works .text p{width:300px !important;}
    #containworks{margin:1px auto !important;}
    #containworks .work{flex-direction:column-reverse;width:fit-content;height:fit-content;margin:10px auto;}
    .topInfo{flex-direction:column;width:fit-content;height:fit-content;justify-content:center;align-items:center;}
    .topInfo img{margin:auto !important;}
    .skills{display:none}
    .miniIcons{position:static;display:flex}
    .skillsSmall{position:static;}
    .work{position:static !important;}
  }