/*Media Queries*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');

@media screen and (max-width: 950px) {
    body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    h3{
        text-align: center;
    }
    #background{
        width: 100%;
        height: auto;
    }
    #background span{
        width: 100%;
        height: 31.25em;
        background-position-x: 50%;
        background-position-y: -5.62em;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #menu{
        width: 100vw;
        left: 0;
        display: block;
        position: fixed;
    }
    #menubar{
        width: 100%; 
        display: none;
        background: inherit;
        text-align: center;
        padding: 20px 0;
        padding-top: 50px;
    }
    #logo{
        font-size: 1.7em;
        padding: 0px 0.6em;
        position: absolute;
        left: 0;
        top: 25px;
    }
    #list_item{
        padding: 5px 0;
    }
    #list_item a{
        font-size: 20px;
        font-weight: 300;
        
    }
    .mNot{
        display: none;
    }
    #list_item a.active::after {
        display: none;
    }
    #hamburger{
        width: 2%;
        height: auto;
        display: block;
        padding: 25px 30px;
        text-decoration: none;
        color: #2E2E2E;
        position: absolute;
        right: 0;
    }
    #hamburger:focus{
        color: #49a660;
    }
    #profile{
        width: 100vw;
    }
    #p-card{
        width: 100%;
        flex-direction: column;
        margin-top: -300px;
        height: auto;
    }
    #image{
        width: 100vw;
        padding: 40px 0px 0px 0px;
    }
    #fb{
        color: #3b5998 !important;
    }
    #ig{
        color: #fa7e1e !important;
    }
    #tw{
        color: #00acee !important;
    }
    #ln{
        color: #0072b1 !important;
    }
    #gh{
        color: #333333 !important;
    }
    
    #details h1{
        text-align: center;
        font-size: 36px;
    }
    #details h4{
        font-size: 16px;
        justify-content: center;
    }
    #buttons{
        display: flex;
        justify-content: center;
    }
    #skills{
        width: 100vw;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #cont-skills{
        width: 100%;
        padding: 0;
        flex-direction: column;
        justify-content: center;
    }
    #T-skills, #S-skills{
        width: 100%;
        height:350px;
        margin-top: 20px;
        padding: 0;
    }
    #T-skills h3, #S-skills h3{
        padding: 0 3%;
        text-align: center;
    }
    #bars{
        width: 90vw;
        padding:3%;
    }
    #bars p{
        text-align: center;
    }

    #way2cont li a{
        font-size: 12px;
    }
    #projects{
        padding-bottom: 20px;
    }
    #project-div{
        width: 90%;
    }
    #project-container{
        width: 90%;
        display: flex;
        flex-wrap: wrap;
    }
    #image-box{
        width: 100%;
        margin-bottom: 20px;
    }
    #img-sec{
        background-position-x: 44%;
    }
    #education{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center ;
        box-sizing: border-box;
    }
    #edu-container{
        width: 100%;
    }
    #timeline{
        position: relative;
        width: 100%;
        margin: 0px auto;
        
    }
    #timeline::after{
        content: "";
        width: 6px;
        position: absolute;
        background-color: #FFF;
        top: 0;
        bottom: 0;
        left: 90%;
        margin: 3px;
    }
    .box{
        padding: 10px 10px;
        width: 65%;
        position: relative;
        background-color: inherit;
    }
    .box::after{
        content: "";
        width: 15px;
        height: 15px;
        border-radius: 50%;
        position: absolute;
        border: 5px solid #49a660;
        background-color: #FFF;
        top: 15px;
        right: -24.5vw;
        z-index: 1;
        box-shadow: 0 0 15px 0 rgba(114, 114, 114, 0.6);
    }
    .left{
        left: 0;
    }
    .right{
        left:0;
    }
    .left::before, .right::before{
        content: "";
        height: 0;
        position: absolute;
        top: 19px;
        width: 0;
        z-index: 1;
        right: -3.75em;
        border: medium solid white;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent white;
    }
    .right::after{
        left: 88.7vw;
    }
    #content{
        padding: 10px 30px;
        background: #FFF;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-shadow: 0 0 15px 0 rgba(114, 114, 114, 0.6);
        border-radius: 2px;
    }
    #content::before{
        content: "";
        width: 100%;
        height: 3px;
        top: 0px;
        background: #49a660;
    }
    #content h4{
        font-family: 'Roboto';
        font-weight: 200px;
        font-size: 18px;
        color: #2E2E2E;
    }
    #content p{
        font-family: 'Roboto';
        font-weight: 200px;
        font-size: 14px;
        color: #2E2E2E;
    }
    #contact{
        width: 100vw;
        margin-top: 30px;
        justify-content: center;
    }
    #cont-container{
        width: 100vw;
        padding: 0;
    }
    #contact-forms{
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    #form{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        background: #FFF;
        border-radius: 2px;
        box-shadow: 0 0 15px 0 rgba(114, 114, 114, 0.6);
    }
    #fsubmit{
        margin: 10px 20px 30px 20px;
    }
    #fsubmit:hover{
        background: #1aa33c;
    }
    #contact-card{
        width: 100vw;
    }
    #way2cont{
        width: 100%;
        list-style: none;
        padding-left: 0;
    }
    #way2cont li i{
        color: #49a660;
        padding-right: 15px;
        width: 30px;
        height: 30px;
        padding: 30px 0;
        padding-top: 50px;
    }
    #way2cont li a{
        font-family: 'Roboto',sans-serif;
        font-size: 25px;
        font-weight: 400;
        color: #2E2E2E;
        letter-spacing: 0%;
        text-decoration: none;
        text-align: center;
        transition: 0.3s ease;
        padding: 5px 10px;
    }
    #way2cont li a:hover{
        font-size: 25px;
        font-weight: 400;
        color: #1aa33c;
    }
    #social{
        padding-top: 20px;
    }
    #Footer{
        padding: 30px 0;
    }
    #foot{
        width:90%;
    }
    #to-edit{
        width: 30%;
        left: 52%;
        top: 60%;
    }
    
}