/* For more than 600px  */
@media screen and (min-width: 600px) {
    body{
        background-color: #00021D;
        font-family: 'Roboto', sans-serif;
        color: white;
        margin: 0%;
    }

    p{
        margin: 0%;
    }

    .header{
        padding: 2px;
        background-color: #030746;
        position: fixed;
        width: 100%;
    }

    .header p{
        text-align: center;
        width: 100%;
    }

    #profilePic img{
        display: block;
        margin: auto;
        width: 250px;
        padding-top: 25px;
    }

    .name{
        text-align: center;
        font-size: 35px;
    }

    .social{
        text-align: center;
    }

    .social img{
        width: 15px;
        margin: 7px;
    }

    .social a{
        text-decoration: none;
    }

    #about{
        background-color: #030746;
        color: rgb(212, 212, 247);
        padding: 10px 20%;
        margin-top: 5px;
    }

    .aboutContent{
        margin: 10px;
        font-size: 15px;
    }

    .skills{
        display: flex;
    }

    #tools, #lang{
        background-color: #030746;
        margin: 20px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px black;
        width: 100%;
    }

    .secTitles{
        text-align: center;
        color: #F28972;
    }

    .secContent{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 15px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: rgb(212, 212, 247);
    }

    .secContent .col{
        margin: auto;
    }

    .secContent p{
        margin: 5px;
    }

    .designBy{
        font-size: 10px;
        color: #345EFF;
        text-align: center;
    }

    footer{
        bottom: 0px;
        width: 100%;
        height: auto;
        background-color: #000110;
        text-align: center;
        font-size: 18px;
      }
    
      footer p{
        color: white;
        margin: 4px;
        font-size: 15px;
      }
}

/* Upto 600px */
@media screen and (max-width: 600px) {
    body{
        background-color: #00021D;
        font-family: 'Roboto', sans-serif;
        color: white;
        margin: 0%;
    }

    p{
        margin: 0%;
    }

    .header{
        padding: 2px;
        background-color: #030746;
        position: fixed;
        width: 100%;
    }

    .header p{
        text-align: center;
        width: 100%;
    }

    #profilePic img{
        display: block;
        margin: auto;
        width: 250px;
        padding-top: 25px;
    }

    .name{
        text-align: center;
        font-size: 25px;
    }

    .social{
        text-align: center;
    }

    .social img{
        width: 15px;
        margin: 7px;
    }

    .social a{
        text-decoration: none;
    }

    #about{
        background-color: #030746;
        color: rgb(212, 212, 247);
        padding: 10px;
        margin-top: 5px;
    }

    .aboutContent{
        margin: 10px;
        font-size: 15px;
    }

    #tools, #lang{
        background-color: #030746;
        margin: 20px;
        padding: 10px 0px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px black;
    }

    .secTitles{
        text-align: center;
        color: #F28972;
    }

    .secContent{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 15px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: rgb(212, 212, 247);
    }

    .secContent .col{
        margin: auto;
    }

    .secContent p{
        margin: 5px;
    }

    .designBy{
        font-size: 10px;
        color: #345EFF;
        text-align: center;
    }

    footer{
        bottom: 0px;
        width: 100%;
        height: auto;
        background-color: #000110;
        text-align: center;
        font-size: 18px;
      }
    
      footer p{
        color: white;
        margin: 4px;
        font-size: 15px;
      }
}