resume1.css

body{
    background-color: #252525;
    margin:0;
    padding:0;
    font-family: 'Poppins', sans-serif;
}

.canvas{
    display:flex;
}
@media screen and (min-width: 992px) {
    .sidebar{
        background-color:#333333;
        width:17%;
        position:fixed;
    }
    .headlogo{
        padding: 1rem 1.5rem 3.5rem 1.5rem;
    }
    .menu{
        text-align:center;
        font-size:1.1rem;
        padding: 0rem 0rem 14.5rem 0rem;
    }
}
@media screen and (max-width: 991px) {
    .sidebar{
        background-color:#333333;
        width:30%;
        position:fixed;
        transition: transform 0.2s linear;
        transform: translateX(-15rem);
        z-index:9999;
    }
    .sidebarv{
        background-color:#333333;
        width:40%;
        position:fixed;
        transition: transform 0.2s linear;
        transform: translateX(0rem);
        z-index:9999;
        height:49.5rem;
    }
    .headlogo{
        padding: 1rem 1.5rem 6rem 1.5rem;
    }
    .headlogo img{
        height:5rem;
        width:10rem;
        transform: translate(-1.5rem,2rem);
    }
    .menu{
        text-align:center;
        font-size:0.8rem;
        padding: 0rem 0rem 14.5rem 0rem;
    }
}
.menuop{
    padding:0.6rem 1.5rem;
    margin-top:0.2rem;
    margin-bottom:0.2rem;
    position:relative;
    line-height: 2.4;
}
.menuop:hover {
    background-color: #aaa;
    /*background-color:#2e7bda;*/
    margin-right:0.5rem;
    margin-left:0.5rem;
    border-radius:0.4rem;
}
.menuop:active {
    background-color: #2e7bda;
}
@media screen and (min-width: 992px) {
    .menuop:after{
        background-color: grey;
        height:0.03rem;
        width: 9rem;
        content:"";
        position:absolute;
        display:block;
        margin:0 12%;
    }
}
@media screen and (max-width: 991px) {
    .menuop:after{
        background-color: grey;
        height:0.03rem;
        width: 6rem;
        content:"";
        position:absolute;
        display:block;
        margin:0 3%;
    }
}
.menutemp{
    transform: translateX(0.5rem);
}
.menutempcv{
    background-color:#2e7bda;
    margin:0 1rem;
    border-radius:0.4rem;
    transform: translateX(0.5rem);
}
.menu i{
    color:white;
}
.menu p{
    display:inline;
    padding:4%;
}
.menu a{
    text-decoration: none;
    color:white;
}
@media screen and (min-width: 992px) {
    .back{
        width:82.9%;
        box-shadow: 0 15px 45px rgba(0,0,0,0.1);
        position:relative;
        left:16.2rem;
    }
    .centlogo{
        display:flex;
        height:0;
        visibility: hidden;
    }
    .descbar{
        background: linear-gradient(0deg, #252525 50%, #0061a7 50%);
        margin:4rem 2rem 1rem 2rem;
    }
    #descbarh1{
        margin:0;
        transform:translateY(2rem);
        color:white;
        text-align:center;
        font-size:2.5rem;
    }
    .desc{
        margin:4rem 2rem;
        color:white;
        box-shadow: 0 15px 45px rgba(0,0,0,0.1);
        background: rgba(255,255,255,0.1);
        backdrop-filter:blur(1rem);
        border-radius:1rem;
        height:50rem;
    }
    .usetemp{
        width:20rem;
        margin:0 30rem;
        display:flex;
    }
    .usetemp button{
        background-color: #2765b0;
        color:white;
        height:2.2rem;
        width:8rem;
        font-size:1.1rem;
        padding:0.3rem;
        border:0.01rem solid black;
        transition: all .2s ease-in-out;
        margin:1rem 0.5rem;
    }
}
@media screen and (max-width: 991px) {
    .back{
        width:100%;
        box-shadow: 0 15px 45px rgba(0,0,0,0.1);
        position:relative;
    }
    .centlogo{
        display:flex;
        width:100%;
        display:flex;
        visibility: visible;
    }
    .centlogo img{
        margin:2rem 2rem 2rem 7rem;
    }
    .vers{
        font-size:1.5rem;
        margin: 4rem 1rem 1rem 1rem;
    }
    .bars{
        color:grey;
    }
    .bars:hover{
        color:white;
    }
    .xmark{
        color:grey;
        transform: translate(160%,0%);
        visibility: hidden;
    }
    .xmark:hover{
        color:white;
    }
    .descbar{
        background: linear-gradient(0deg, #252525 50%, #0061a7 50%);
        margin:2rem 0.2rem;
    }
    #descbarh1{
        margin:0;
        transform:translateY(2rem);
        color:white;
        text-align:center;
        font-size:2rem;
    }
    .desc{
        margin:3rem 0.3rem 1rem 0.3rem;
        color:white;
        box-shadow: 0 15px 45px rgba(0,0,0,0.1);
        background: rgba(255,255,255,0.1);
        backdrop-filter:blur(1rem);
        border-radius:1rem;
        height:37rem;
    }
    .usetemp{
        width:20rem;
        margin:0 3rem;
        display:flex;
    }
    .usetemp button{
        background-color: #2765b0;
        color:white;
        height:2.2rem;
        width:8rem;
        font-size:1.1rem;
        padding:0.3rem;
        border:0.01rem solid black;
        transition: all .2s ease-in-out;
        margin:1rem 0.5rem;
    }
}

.usetemp button:hover{
    background-color: #2e7bda;
}
.usetemp button:active{
    transform: scale(1.1);
}

@media screen and (min-width: 992px) {
    /*-------------------------------------cv----------------------------------*/
    .backk{
        display:flex;
        width:34rem;
        margin: auto;
        position:relative;
        top:1rem;
    }
    
    /*--------------------------------left side---------------------------------*/
    .ylw-blk{
        height:47rem;
        width:45%;
    }
    .ylww{
            background-color: rgb(244,214,68);
            height:12%;
    }
    .ylww img{
        z-index:-1;
    }
    .blk{
        background-color: rgb(41,45,45);
        height:88%;
        color:white;
    }
    .cont{
        padding:9rem 1.2rem 0 1.2rem;
    }
    .cont h1{
        font-size:1rem;
    }
    .cont i{
        height:1.7rem;
        line-height: 1.7rem;
        width:1.35rem;
        color: rgb(41,45,45);
        background-color: rgb(244,214,68);
        border-left: 0.35rem solid rgb(244,214,68);
        border-radius: 50%;
        margin:0.2rem 0;
    }
    .cont p{
        font-size: 0.8rem;
        display:inline;
        color: white;
        padding: 0 0.2rem;
    }
    .cont a{
        text-decoration: none;
        color:white;
    }
    .per-skil{
        font-size:0.5rem;
        padding: 1rem 1.2rem 0 1.2rem;
    }
    .per-skil li{
        position:relative;
        font-size:0.9rem;
        padding: 0.2rem 0;
        left:-0.7rem;
    }
    .langu{
        font-size:0.5rem;
        padding: 1rem 1.2rem 0 1.2rem;
    }
    .langu p{
        font-size:0.9rem;
    }
    .bar1{
        /*background-color: pink;*/
        display:flex;
        margin:-15px 1rem;
    }
    .ybar1{
        position:relative;
        height:0.3rem;
        width:5.5rem;
        background-color:rgb(244,214,68);
        left:1.4rem;
        top:1.3rem;
        border-radius:20%;
    }
    .wbar1{
        position:relative;
        height:0.2rem;
        width:1.5rem;
        background-color:white;
        left:1.4rem;
        top:1.35rem;
    }
    .bar2{
        /*background-color: grey;*/
        display:flex;
        margin:-15px 1rem;
    }
    .ybar2{
        position:relative;
        height:0.3rem;
        width:6rem;
        background-color:rgb(244,214,68);
        left:1.5rem;
        top:1.3rem;
        border-radius:20%;
    }
    .wbar2{
        position:relative;
        height:0.2rem;
        width:1rem;
        background-color:white;
        left:1.5rem;
        top:1.35rem;
    }
    .bar3{
        display:flex;
        margin:-15px 1rem;
    }
    .ybar3{
        position:relative;
        height:0.3rem;
        width:5rem;
        background-color:rgb(244,214,68);
        left:2.3rem;
        top:1.3rem;
        border-radius:20%;
    
    }
    .wbar3{
        position:relative;
        height:0.2rem;
        width:2rem;
        background-color:white;
        left:2.3rem;
        top:1.35rem;
    }
    .ref{
        font-size:0.5rem;
        padding: 1rem 1.2rem;
    }
    
    /*-------------------------------right side---------------------------*/
    .ylw-wht{
        height:47rem;
        width:55%;
        margin:0;
        position:relative;
        left:-0.1rem;
        color:black;
    }
    .ylw{
        background-color:rgb(244,214,68);
        height:43%;
       
    }
    #fname{
        text-transform: capitalize;
        padding:4.6rem 1.2rem 0 1.2rem;
        font-size:2.2rem;
        font-weight: 900;
    }
    #fname h1{
        font-size:2.3rem;
        font-weight:normal;
        margin-top:0;
        margin-bottom:0.5rem;
    }
    #dprof{
        padding:0 1.2rem;
        margin-top:0;
    }
    #dprof p{
        font-size:0.75rem;
        font-weight:600;
    }
    #abt{
        /*position:relative;
        top:-0.5rem;*/
        padding:0.1rem 1.2rem;
    }
    #abt h1{
        font-size:0.9rem;
    }
    #abt p{
        font-size:0.8rem;
        color:rgb(85, 83, 83);
    }
    .wht{
        background-color: whitesmoke;
        height:57%;
        padding:0 1.2rem;
        position:relative;
        top:-0.67rem;
    }
    .educ{

    }
    .educ h1{
        padding-top:1rem;
        font-size:1rem;
    }
    .educ h2{
        font-size:0.8rem;
    }
    .educ ul{
        margin:0;
    }
    .educ li{
        margin-top:0;
        font-size:0.7rem;
        position:relative;
        left:-1rem;
        top:-0.7rem;
    }
    .proj h1{
        font-size:1rem;
    }
    .proj h2{
        margin-top:0rem;
        font-size:0.8rem;
    }
    .proj ul{
        margin:0;
    }
    .proj li{
        margin-top:0;
        font-size:0.7rem;
        position:relative;
        left:-1rem;
        top:-0.5rem
    }   
}

@media screen and (max-width: 991px) {
    /*-------------------------------------cv----------------------------------*/
    .backk{
        display:flex;
        width:23rem;
        margin: auto;
        position:relative;
        top:1rem;
        background-color: #aaa;
    }
    
    /*--------------------------------left side---------------------------------*/
    .ylw-blk{
        height:35rem;
        width:45%;
    }
    .ylww{
        background-color: rgb(244,214,68);
        height:12%;
    }
    .ylww img{
        z-index:-1;
        height:9rem;
        width:9rem;
    }
    .blk{
        background-color: rgb(41,45,45);
        height:88%;
        color:white;
    }
    .cont{
        padding:5.5rem 0.5rem 0 0.5rem;
    }
    .cont h1{
        font-size:0.8rem;
    }
    .cont i{
        height:1.2rem;
        line-height: 1.2rem;
        width:1rem;
        color: rgb(41,45,45);
        background-color: rgb(244,214,68);
        border-left: 0.3rem solid rgb(244,214,68);
        border-radius: 50%;
        margin:0.15rem 0;
        font-size:0.7rem;
    }
    .cont p{
        font-size: 0.6rem;
        display:inline;
        color: white;
        padding: 0 0rem;
    }
    .cont a{
        text-decoration: none;
        color:white;
    }
    .per-skil h1{
        font-size: 0.8rem;
        margin:1rem 0.5rem;
    }
    .per-skil li{
        position:relative;
        font-size:0.6rem;
        padding: 0.18rem 0;
        left:-0.7rem;
    }
    .langu h1{
        font-size: 0.8rem;
        margin:1rem 0.5rem;
    }
    .langu p{
        font-size:0.7rem;
        margin:0.7rem 0.5rem;
    }
    .bar1{
        /*background-color: pink;*/
        display:flex;
        margin:-15px 1rem;
    }
    .ybar1{
        position:relative;
        height:0.3rem;
        width:4rem;
        background-color:rgb(244,214,68);
        left:0.5rem;
        top:1rem;
        border-radius:20%;
    
    }
    .wbar1{
        position:relative;
        height:0.2rem;
        width:1rem;
        background-color:white;
        left:0.5rem;
        top:1.05rem;
    }
    .bar2{
        /*background-color: grey;*/
        display:flex;
        margin:-15px 1rem;
    }
    .ybar2{
        position:relative;
        height:0.3rem;
        width:5rem;
        background-color:rgb(244,214,68);
        left:0.6rem;
        top:1rem;
        border-radius:20%;
    }
    .wbar2{
        position:relative;
        height:0.2rem;
        width:1rem;
        background-color:white;
        left:0.5rem;
        top:1.05rem;
    }
    .bar3{
        display:flex;
        margin:-15px 1rem;
    }
    .ybar3{
        position:relative;
        height:0.3rem;
        width:3.5rem;
        background-color:rgb(244,214,68);
        left:1.2rem;
        top:1rem;
        border-radius:20%;
    
    }
    .wbar3{
        position:relative;
        height:0.2rem;
        width:1.5rem;
        background-color:white;
        left:1.2rem;
        top:1.05rem;
    }
    /*-------------------------------right side---------------------------*/
    .ylw-wht{
        height:35rem;
        width:55%;
        margin:0;
        position:relative;
        left:-0.1rem;
        color:black;
    }
    .ylw{
        background-color:rgb(244,214,68);
        height:39%;
       
    }
    #fname{
        text-transform: capitalize;
        font-size:1.4rem;
        font-weight: 900;
        padding:3.5rem 0.3rem 0 0.3rem;
    }
    #fname h1{
        font-size:1.4rem;
        font-weight:normal;
        margin-top:0;
        margin-bottom:0.2rem;
    }
    #dprof{
        padding:0 0.3rem;
        margin-top:0;
    }
    #dprof p{
        font-size:0.6rem;
        font-weight:600;
    }
    #abt{
        /*position:relative;
        top:-0.5rem;*/
        padding:0rem 0.3rem;
    }
    #abt h1{
        font-size:0.7rem;
    }
    #abt p{
        font-size:0.6rem;
        color:rgb(85, 83, 83);
        position:relative;
        top:-0.4rem;
    }
    .wht{
        background-color: whitesmoke;
        height:61%;
        padding:0 0.3rem;
        position:relative;
        top:-0.5rem;
    }
    .educ h1{
        padding-top:0.2rem;
        font-size:0.8rem;
        margin-bottom: 0.2rem;
    }
    .educ h2{
        font-size:0.7rem;
        margin-bottom:0.8rem;
        margin-top:0rem;
    }
    .educ ul{
        margin:0;
    }
    .educ li{
        margin-top:0;
        font-size:0.55rem;
        position:relative;
        left:-1rem;
        top:-0.7rem;
    }
    .proj h1{
        font-size:0.8rem;
        margin-top:0;
        padding-top:0;
        margin-bottom: 0.2rem;
    }
    .proj h2{
        margin-top:0rem;
        font-size:0.7rem;

    }
    .proj ul{
        margin:0;
        
    }
    .proj li{
        margin-top:0;
        font-size:0.55rem;
        position:relative;
        left:-1rem;
        top:-0.5rem;
    }
}
.footer{
    text-align:center;
    padding:0.5rem;
    transform:translateY(-0.25rem);
}
.ficons a{
    text-decoration: none;
    height:2.5rem;
    width:2.5rem;
    line-height:2.5rem;
    margin:0.6rem 0.3rem;
    color:white;
    background-color: #0061a7;
    font-size: 1.2rem;
    border:1px solid white;
    border-radius:50%;
    transition:transform 0.2s;
}
.ficons a:hover{
    transform: translate(0, -0.6rem);
}