<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Me</title>

        <style>
            html {
                height: 100%;
            }
            body {
                margin: 0;
                height: 100%;
                background-color: #1d1d1d;
                color: white;
                font-family: sans-serif;
                overflow: hidden;
                user-select: none;
            }

            img {
                -webkit-user-drag: none;
            }

            @media screen and (max-width:550px) {
                header {
                    display:  flex;
                    justify-content: center;
                    align-items: center;
                    width: 100vw;
                    height: 100vh;
                }

                .header-container {
                    margin-top: 50px;
                }
                .imageHolder {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
                .imageHolder img {
                    width: 150px;
                    border-radius: 10px;
                }
                .name {
                    text-align: center;
                    font-size: 24px;
                }
                .languages {
                    margin-top: 10px;
                    text-align: center;
                }
                .languages img {
                    width: 20px;
                }
                span > img {
                    width: 25px;
                }

                .description-container {
                    display: flex;
                    justify-content: center;
                }
                .description {
                    margin-top: 10px;
                    font-size: 15px;
                    width: 90%;
                }

                .contacts {
                    margin-top: 30px;
                    display: flex;
                    justify-content: center;
                }

                span {
                    border: #9c9c9c solid 1px;
                    font-size: 20px;
                    padding: 5px;
                    border-radius: 5px;
                }
            }

            @media screen and (min-width:551px) {
                header {
                    display: flex;
                    margin-left: 50px;
                    align-items: center;
                    height: 100%;
                    width: 100%;
                }

                .header-container {
                    display: inline-flex;
                }

                .header-info {
                    display: flex;
                    align-items: center;
                    margin-left: 15px;
                    width: 70%;
                }

                .name {
                    width: 100%;
                    font-size: 50px;
                }

                .imageHolder {
                    width: 30%;
                }

                .imageHolder > img {
                    width: 100%;
                    border-radius: 10px;
                }

                .languages {
                    width: 50%;
                }
                .languages > img {
                    width: 10%;
                }

                .description {
                    margin-top: 10px;
                    width: 100%;
                    font-size: 20px;
                }

                .contacts {
                    margin-top: 20px;
                }
                span {
                    border: #9c9c9c solid 1px;
                    font-size: 20px;
                    padding: 5px;
                    border-radius: 5px;
                }
                span > img {
                    width: 25px;
                }
            }

            

        </style>
    </head>

    <body>
        <header>
            <div class="header-container">
                <div class="imageHolder">
                    <img src="pfp.jpg">
                </div>
                <div class="header-info">
                    <div class="inner-header-info">
                        <div class="name">Safeer Mamun</div>

                        <div class="languages">
                            <img src="Python-logo-notext.svg.png">
                            <img src="html.png">
                            <img src="css.png">
                            <img src="js.png">
                            <img src="C++.svg.png">
                            <img src="695px-C_Programming_Language.svg.png">
                            <img src="assembly.png">
                        </div>

                        <div class="description-container">
                            <div class="description">
                                Wealth, fame, power
                            </div>
                        </div>
                        <div class="contacts">
                            <span>
                                <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6cc3c481a15a141738_icon_clyde_white_RGB.png">
                                siientbeast
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </body>
</html>