style.css

* {
    margin: 0;
}

body {
    width: 100%;
    color: #FFF;
    
}

html {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.8;
}

.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

.topnav li {
    float: left;
}

.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 24px 28px;
    text-decoration: none;
}

.topnav li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50
}

.pic img{
    width: 400px;
    height: 340px;
    border-radius: 50%;
    display: block;
    margin-left: 160px;
    margin-right: auto;
    margin-top: 180px;
}

.bottomnav ul {
    list-style-type: none;
    background-color: rgb(209, 209, 209)!important;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
    z-index: 2;
}

.bottomnav li {
    float: left;
    margin-top: 5px;
} 

.tool_list{
    list-style-type: none;
    overflow: hidden;
    float: center;
    text-align: center;
}

.tool_list img{
    max-width: 10%;
    object-fit: contain;
    margin-bottom: 100px;
}

#html5{
    max-width: 10%;
    margin-right: 20px;
}

#css3{
    max-width: 7%;
    margin-right: 20px;
}

#visual{
    max-width: 8%;
    margin-right: 20px;
}

#bash{
    max-width: 9%;
    margin-right: 20px;
}

*.fa-github {
    color: #333;
    margin-left: 0;
}

*.fa-linkedin {
    color: #333;
    margin-left: 0;
}

*.fa-envelope {
    color: #333;
    margin-left: 0;
}

*.fa-hackerrank {
    color: #333;
    margin-left: 0;
}

.intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 32px;
    word-wrap: break-word;
    width: 700px;
    font-weight: bolder;
 
}

.describe {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
    word-wrap: break-word;
    width: 700px;
    margin-bottom: 100px;
    margin-top: 275px;
    font-weight: 500;
}

.pic img{
    width: 400px;
    height: 340px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
}   

@media only screen and (max-width: 320px) {
    body {
        width: 200%;
        background: url("assets/website-design-background-1_320x920.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
        
        }

    *.fa-github {
        color: #333;
        margin-left: 1.15em;
    }
    *.fa-linkedin {
        color: #333;
        margin-left: 1.15em;
    }
    *.fa-envelope {
        color: #333;
        margin-left: 1.15em;
    }
    *.fa-hackerrank {
        color: #333;
        margin-left: 1.15em;
    }
    #html5{
        max-width: 20%;
        margin-left: 50px;
    }

    #css3{
        max-width: 14%;
        margin-right: 20px;
    }
    
    #visual{
        max-width: 16%;
        margin-right: 20px;
    }
    
    #bash{
        max-width: 18%;
        margin-right: 20px;
    }

    .pic img{
        width: 400px;
        height: 340px;
        border-radius: 50%;
        display: block;
        margin-left: 160px;
        margin-right: auto;
        margin-top: 180px;
    }   

}

@media only screen and (max-width: 375px) and (min-width: 321px){
    body{
        width: 200%;
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    *.fa-github {
        color: #333;
        margin-left: 1.25em;
    }
    *.fa-linkedin {
        color: #333;
        margin-left: 1.25em;
    }
    *.fa-envelope {
        color: #333;
        margin-left: 1.25em;
    }
    *.fa-hackerrank {
        color: #333;
        margin-left: 1.25em;
    }
    #html5{
        max-width: 20%;
    }
    #css3{
        max-width: 14%;
        margin-right: 20px;
    }
    
    #visual{
        max-width: 16%;
        margin-right: 20px;
    }
    
    #bash{
        max-width: 18%;
        margin-right: 20px;
    }

    .pic img{
        width: 400px;
        height: 340px;
        border-radius: 50%;
        display: block;
        margin-left: 182.5px;
        margin-right: auto;
        margin-top: 180px;
    }   
}

@media only screen and (max-width: 700px) and (min-width: 376px) {
    body{
        width: 200%;
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    
    *.fa-github {
        color: #333;
        margin-left: 1em;
    }
    *.fa-linkedin {
        color: #333;
        margin-left: 2em;
    }
    *.fa-envelope {
        color: #333;
        margin-left: 2em;
    }
    *.fa-hackerrank {
        color: #333;
        margin-left: 2em;
    }
    #html5{
        max-width: 20%;
    }
    #css3{
        max-width: 14%;
        margin-right: 20px;
    }
    
    #visual{
        max-width: 16%;
        margin-right: 20px;
    }
    
    #bash{
        max-width: 18%;
        margin-right: 20px;
    }
    
    .pic img{
        width: 400px;
        height: 340px;
        border-radius: 50%;
        display: block;
        margin-left: 225px;
        margin-right: auto;
        margin-top: 180px;
    }  
}


@media only screen and (max-width: 800px) and (min-width: 701px) {
    body{
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    *.fa-github {
        color: #333;
        margin-left: 1.5em;
    }
    
    *.fa-linkedin {
        color: #333;
        margin-left: 1.5em;
    }
    
    *.fa-envelope {
        color: #333;
        margin-left: 1.5em;
    }
    
    *.fa-hackerrank {
        color: #333;
        margin-left: 1.5em;
    }
    #html5{
        max-width: 10%;
    }
    #css3{
        max-width: 7%;
        margin-right: 20px;
    }
    
    #visual{
        max-width: 8%;
        margin-right: 20px;
    }
    
    #bash{
        max-width: 9%;
        margin-right: 20px;
    }

    .pic img{
        width: 400px;
        height: 340px;
        border-radius: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 180px;
    }   
}

@media only screen and (max-width: 1024px) and (min-width: 801px) {
    #who{
        margin-bottom: 100px;
    }
    
    body{
        width: 120%;
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    .intro {
        text-align: center;
        margin-left: 20px;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 1200px;
        font-weight: bolder;
     
    }

    .describe {
        text-align: center;
        margin-left:  10px;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 1200px;
        margin-bottom: 100px;
        margin-top: 275px;
        font-weight: 500;
    }

    *.fa-github {
        color: #333;
        margin-left: 2.75em;
    }
    
    *.fa-linkedin {
        color: #333;
        margin-left: 2.75em;
    }
    
    *.fa-envelope {
        color: #333;
        margin-left: 2.75em;
    }
    
    *.fa-hackerrank {
        color: #333;
        margin-left: 2.75em;
    }
    #html5{
        max-width: 17%;
        margin-left: 60px;
    }
    #css3{
        max-width: 12%;
        margin-left: 100px;
    }
    
    #visual{
        max-width: 14%;
        margin-left: 100px;
    }
    
    #bash{
        max-width: 16%;
        margin-left: 100px;
    }

    .pic img{
        width: 600px;
        height: 510px;
        border-radius: 50%;
        display: block;
        margin-left: 340px;
        margin-right: auto;
        margin-top: 180px;
    }   
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    body{
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    #who{
        margin-bottom: 100px;
    }
    .intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 950px;
        font-weight: bolder;
     
    }

    .describe {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 1200px;
        margin-bottom: 150px;
        margin-top: 275px;
        font-weight: 500;
    }

    
    *.fa-github {
        color: #333;
        margin-left: 2em;
    }
    
    *.fa-linkedin {
        color: #333;
        margin-left: 2em;
    }
    
    *.fa-envelope {
        color: #333;
        margin-left: 2em;
    }
    
    *.fa-hackerrank {
        color: #333;
        margin-left: 2em;
    }
    #html5{
        max-width: 10%;
    }
    #css3{
        max-width: 7%;
        margin-right: 60px;
    }
    
    #visual{
        max-width: 8%;
        margin-right: 60px;
    }
    
    #bash{
        max-width: 9%;
        margin-right: 60px;
    }

    .pic img{
        width: 600px;
        height: 510px;
        border-radius: 50%;
        display: block;
        /* margin-left: 1150px; */
        margin-left: auto;
        margin-right: auto;
        margin-top: 180px;
    }   
}

@media only screen and (max-width: 2000px) and (min-width: 1441px) {

    body{
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    #who{
        margin-bottom: 100px;
    }
    .intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 950px;
        font-weight: bolder;
     
    }

    .describe {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 1200px;
        margin-bottom: 150px;
        margin-top: 275px;
        font-weight: 500;
    }

    
    *.fa-github {
        color: #333;
        margin-left: 5em;
    }
    
    *.fa-linkedin {
        color: #333;
        margin-left: 5em;
    }
    
    *.fa-envelope {
        color: #333;
        margin-left: 5em;
    }
    
    *.fa-hackerrank {
        color: #333;
        margin-left: 5em;
    }
    #html5{
        max-width: 10%;
    }
    #css3{
        max-width: 7%;
        margin-right: 60px;
    }
    
    #visual{
        max-width: 8%;
        margin-right: 60px;
    }
    
    #bash{
        max-width: 9%;
        margin-right: 60px;
    }

    .pic img{
        width: 600px;
        height: 510px;
        border-radius: 50%;
        display: block;
        /* margin-left: 625px; */
        margin-left: auto;
        margin-right: auto;
        margin-top: 180px;
    }   
}

@media only screen and (min-width: 2001px) and (max-width: 4000px){
    body{
        background: url("assets/website-design-background-1.jpg") repeat 0 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100% 100%;
    }
    #who{
        margin-bottom: 100px;
    }
    .intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 950px;
        font-weight: bolder;
     
    }

    .describe {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 48px;
        word-wrap: break-word;
        width: 1200px;
        margin-bottom: 150px;
        margin-top: 275px;
        font-weight: 500;
    }

    
    *.fa-github {
        color: #333;
        margin-left: 6.5em;
    }
    
    *.fa-linkedin {
        color: #333;
        margin-left: 6.5em;
    }
    
    *.fa-envelope {
        color: #333;
        margin-left: 6.5em;
    }
    
    *.fa-hackerrank {
        color: #333;
        margin-left: 6.5em;
    }
    #html5{
        max-width: 10%;
    }
    #css3{
        max-width: 7%;
        margin-right: 60px;
    }
    
    #visual{
        max-width: 8%;
        margin-right: 60px;
    }
    
    #bash{
        max-width: 9%;
        margin-right: 60px;
    }

    .pic img{
        width: 600px;
        height: 510px;
        border-radius: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 180px;
    }   
}