*{
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
canvas{
    position: fixed;
}
.particles-js{
    height: 300vh;
    width: 100%;
    background: linear-gradient(135deg, rgb(0, 0, 46),rgb(0, 0, 30),black);
    position: fixed;
}
.main-about{
    height: 300vh;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
}
.content{
    width: 100%;
    height: 100%;
    display: none;
}
.back{
    width: 40px;
    height: 40px;
    color: white;
    position: fixed;
    transition-timing-function: ease;
    transition-duration: 1s;
    border-radius: 6px;
    background: rgba(97, 97, 223, 0.22);;
}
.back:hover{
    background: rgb(28, 48, 48);
}
.back a{
    color: white;
}
.back i{
    transition-timing-function: ease;
    transition-duration: 1s;
    font-size: 20px;
    margin-top: 9px;
    margin-left: 9px;
}
.back i:hover{
    color: rgb(38, 103, 209);
}
.me{
    color: rgb(38, 103, 209);
}
.mes{
    margin-left: 6px;
    color: rgb(38, 103, 209);
    margin-right: 6px;
}
.backcont{
    height: 80px;
    width: 100%;
}
.title{
    display: flex;
    width: 100%;
    height: 50px;
    align-content: center;
    justify-content: center;
}
.title h2{
    color: white;
    font-size: 40px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.line{
    animation: animate-line 4s linear infinite;
    animation-timing-function: ease;
}
.paragraph{
    height: 300px;
    width: 100%;
    align-items: center;
    margin-top: 60px;
}
.paragraph .pf{
    color: white;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
}
.scroll-more{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    font-family: 'Courier New', Courier, monospace;
}
.p1{
    /* display: flex; */
    display: none;
    align-items: center;
    color: white;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    justify-content: center;
}
.p2{
    /* display: flex; */
    display: none;
    align-items: center;
    color: white;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    justify-content: center;
}
.p3{
    /* display: flex; */
    display: none;
    align-items: center;
    color: white;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    justify-content: center;
}
.p4{
    /* display: flex; */
    display: none;
    align-items: center;
    color: white;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    justify-content: center;
}
.spacer{
    height: 40px;
    width: 100%;
}
.skill-meter-container{
    /* display: flex; */
    display: none;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.skill-meter-container1{
    /* display: flex; */
    display: none;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.skill-meter-container2{
    /* display: flex; */
    display: none;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.skillmeter{
    display: flex;
    height: 60px;
    width: 340px;
    background: white;
    align-items: center;
    border: none;
}
.skill-container{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}
.skill-container .left{
    width: 20%;
    height: 100%;
    align-items: center;
}
.icon{
    display: flex;
    background-image: url('../media/icons8-javascript-48.png');
    background-position: center;
    height: 40px;
    width: 40px;
    margin-left: 14px;
    margin-top: 10px;
    border: 0.5px solid rgb(38, 103, 209);
}
.icon2{
    display: flex;
    background-image: url('../media/icons8-python-50.png');
    background-position: center;
    background-size: 100%;
    height: 40px;
    width: 40px;
    margin-left: 14px;
    margin-top: 10px;
}
.icon3{
    display: flex;
    background-image: url('../media/icons8-html-5-48.png');
    background-position: center;
    background-size: 100%;
    height: 40px;
    width: 40px;
    margin-left: 14px;
    margin-top: 10px;
}
.icon4{
    display: flex;
    background-image: url('../media/icons8-css3-50.png');
    background-position: center;
    background-size: 100%;
    height: 40px;
    width: 40px;
    margin-left: 14px;
    margin-top: 10px;
}
.icon5{
    display: flex;
    background-image: url('../media/icons8-react-64.png');
    background-position: center;
    background-size: 100%;
    height: 40px;
    width: 40px;
    margin-left: 14px;
    margin-top: 10px;
}
.skill-container .right{
    width: 80%;
    height: 100%;
    align-items: center;
}
.bar{
    display: flex;
    width: 260px;
    height: 6px;
    background: white;
    margin-top: 28px;
    border: 0.5px solid gray;
    border-radius: 4px;
    align-items: center;
}
.juice-javascript{
    height: 4px;
    width: 80%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
    animation: animate-juice-javascript 3s linear;
}
.juice-python{
    height: 4px;
    width: 70%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
    animation: animate-juice-python 3s linear;
}
.juice-html{
    height: 4px;
    width: 90%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
    animation: animate-juice-html 3s linear;
}
.juice-css{
    height: 4px;
    width: 90%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
    animation: animate-juice-css 3s linear;
}
.juice-react{
    height: 4px;
    width: 40%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
    animation: animate-juice-react 3s linear;
}
.hire-cont{
    display: none;
    /* display: flex; */
}
.hire{
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
}
.hirebtn{
    display: flex;
    width: 300px;
    align-items: center;
    justify-content: center;
    display: block;
}
.hirebtn a{
    display: block;
    text-decoration: none;
    color: white;
    border: 0.5px solid red;
    padding: 10px;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition-timing-function: ease;
    transition-duration: 1s;
}
.hirebtn a:hover{
    background-color: red;
    text-transform: uppercase;
}
.audio-cont{
    display: flex;
    width: 100%;
    height: 650px;
    align-items: center;
    justify-content: center;
}
.audioplayer{
    display: none;
    /* display: flex; */
    height: 400px;
    width: 400px;
    background-color: rgba(58, 58, 58, 0.508);;
}
.audioplayer-container{
    display: flex;
    width: 100%;
    height: 100%;
}
.audioplayer-content{
    display: block;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.mp3player{
    display: flex;
    height: 40%;
    width: 100%;
}
.songs{
    display: block;
    width: 100%;
    height: 60%;
}
.audio-1-cont{
    display: flex;
    height: 60px;
    width: 340px;
    background: white;
    align-items: center;
    border-radius: 6px;
}
.audio-2-cont{
    display: flex;
    height: 60px;
    width: 340px;
    background: white;
    align-items: center;
    border-radius: 6px;
}
.audio1-container{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}
.audio2-container{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}
.audio1-container .left{
    width: 20%;
    height: 100%;
    align-items: center;
}
.audio2-container .left{
    width: 20%;
    height: 100%;
    align-items: center;
}
.audio1-container .right{
    width: 80%;
    height: 100%;
    align-items: center;
}
.audio2-container .right{
    width: 80%;
    height: 100%;
    align-items: center;
}
.audio-title{
    width: 100%;
    height: 18px;
}
.audio1-container .right h4{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.audio2-container h4{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.playbtn{
    display: flex;
    background-position: center;
    background-size: 100%;
    height: 40px;
    width: 40px;
    margin-left: 20px;
    margin-top: 18px;
    transition-timing-function: ease;
    transition-duration: 1s;
}
.playbtn i{
    color: black;
    transition-timing-function: ease;
    transition-duration: 1s;
    font-size: 20px;
}
.playbtn i:hover{
    color: rgb(38, 103, 209);
}
.bar-audio{
    display: flex;
    width: 260px;
    height: 6px;
    background: white;
    margin-top: 10px;
    border: 0.5px solid gray;
    border-radius: 4px;
    align-items: center;
}
.juice-audio{
    height: 4px;
    width: 100%;
    background: rgb(38, 103, 209);
    border-radius: 4px;
}
.visualizer{
    display: flex;
    width: 100%;
    height: 100%;
}
.percentage{
    height: 20px;
    width: 20px;
}
#percentage5{
    display: none;
}
.footer{
    display: none;
    /* display: flex; */
    align-items: center;
    position: relative;
    width: 100%;
    justify-content: center;
}
.footer h5{
    color: white;
}
@keyframes animate-line {
    0%
    {
        width: 0%;
    }
    50%
    {
        width: 100%;
    }
    100%
    {
        width: 0%;
    }
}
@keyframes animate-juice-javascript{
    0%
    {
        width: 0%;
    }
    100%
    {
        width: 80%;
    }
}
@keyframes animate-juice-python{
    0%
    {
        width: 0%;
    }
    100%
    {
        width: 70%;
    }
}
@keyframes animate-juice-html{
    0%
    {
        width: 0%;
    }
    100%
    {
        width: 90%;
    }
}
@keyframes animate-juice-css{
    0%
    {
        width: 0%;
    }
    100%
    {
        width: 90%;
    }
}
@keyframes animate-juice-react{
    0%
    {
        width: 0%;
    }
    100%
    {
        width: 40%;
    }
}
/* responsive stuff */
@media (max-width: 838px){
    .p1{
        font-size: 24px;
        text-align: center;
    }
    .p2{
        font-size: 24px;
        text-align: center;
    }
    .p3{
        font-size: 24px;
        text-align: center;
    }
    .p4{
        font-size: 24px;
        text-align: center;
    }
}
@media (max-width: 750px){
    .paragraph .pf{
        font-size: 20px;
    }
    .p1{
        font-size: 20px;
    }
    .p2{
        font-size: 20px;
    }
    .p3{
        font-size: 20px;
    }
    .p4{
        font-size: 20px;
    }
}
@media (max-width: 510px){
    .audio-cont{
        display: flex;
        width: 100%;
        height: 600px;
        align-items: center;
        justify-content: center;
    }
    .audioplayer{
        display: flex;
        height: 300px;
        width: 300px;
        background-color: rgba(119, 119, 119, 0.508);;
    }
    .audio-1-cont{
        display: flex;
        height: 60px;
        width: 280px;
        background: gray;
        align-items: center;
        border-radius: 6px;
    }
    .audio-2-cont{
        display: flex;
        height: 60px;
        width: 280px;
        background: gray;
        align-items: center;
        border-radius: 6px;
    }
    .bar-audio{
        display: flex;
        width: 200px;
        height: 6px;
        background: white;
        margin-top: 10px;
        border: 0.5px solid gray;
        border-radius: 4px;
        align-items: center;
    }
    .mp3player{
        display: flex;
        height: 20%;
        width: 100%;
    }
    .songs{
        display: block;
        width: 100%;
        height: 80%;
    }
    .skill-meter-container{
        height: 80px;
    }
    .skill-meter-container1{
        height: 80px;
    }
    .skill-meter-container2{
        height: 80px;
    }
    .skillmeter{
        display: flex;
        height: 60px;
        width: 280px;
        background: white;
        align-items: center;
        border: none;
    }
    .icon{
        height: 34px;
        width: 34px;
        margin-left: 10px;
        margin-top: 14px;
    }
    .icon2{
        height: 34px;
        width: 34px;
        margin-left: 10px;
        margin-top: 14px;
    }
    .icon3{
        height: 34px;
        width: 34px;
        margin-left: 10px;
        margin-top: 14px;
    }
    .icon4{
        height: 34px;
        width: 34px;
        margin-left: 10px;
        margin-top: 14px;
    }
    .icon5{
        height: 34px;
        width: 34px;
        margin-left: 10px;
        margin-top: 14px;
    }
    .bar{
        display: flex;
        width: 200px;
        height: 5px;
        background: white;
        margin-top: 28px;
        border: 0.5px solid gray;
        border-radius: 4px;
        align-items: center;
    }
    .juice-javascript{
        height: 3px;
    }
    .juice-python{
        height: 3px;
    }
    .juice-html{
        height: 3px;
    }
    .juice-css{
        height: 3px;
    }
    .juice-react{
        height: 3px;
    }
}