@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: 30px; 
    
}

body {
    font-family: 'poppins', sans-serif;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    background-color: #161718;
}

.navigation a {
    padding: 20px;
    text-decoration: none;
    color: white;
    transition: border 1s ease;
    border-bottom: 1px solid transparent;

}

.navigation a:hover {
    border-bottom: 1px solid;
    transition: border 0.5s ease;
}


.hero {
    background-image: url(/Images/coder_image.png);
    background-size: 100% 100%;
    min-height: 600px;
}

.hi,
.name,
.frontend {
    color: white;
    text-align: center;
}

.hi {
    font-size: 60px;
    text-align: center;
    margin-left: 189px;

}

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

.frontend {
    font-size: 50px;
}

.about_section {
    padding: 50px;
    background-color: #161718;
    color: white;
    font-size: 20px;
}

.about_section b {
    font-size: 30px;
}


.html_css_js {
    display: flex;
}

.project_section {
    background-color: #4D667C;
    color: white;
}

.rest_countries,
.clock,
.calculator,
.to_do_list,
.tribute,
.blog,
.landing_page,
.documentation,
.job_application,
.music_webpage,
.the_expanse,
.restaurant,
.youtube {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rest_countries img,
.clock img,
.calculator img,
.to_do_list img,
.tribute img,
.blog img,
.landing_page img,
.documentation img,
.job_application img,
.music_webpage img,
.the_expanse img,
.restaurant img,
.youtube img {
    transition: all 0.5s ease;

}

.rest_countries img:hover,
.clock img:hover,
.calculator img:hover,
.to_do_list img:hover,
.tribute img:hover,
.blog img:hover,
.landing_page img:hover,
.documentation img:hover,
.job_application img:hover,
.music_webpage img:hover,
.the_expanse img:hover,
.restaurant img:hover,
.youtube img:hover {
    transform: scale(1.1);
}

.code {
    text-decoration: none;
    font-size: 20px;
    color: white;
}

.html_css_js img,
.html_css img,
.html_css_second img,
.html_css_third img {
    max-width: 270px;
    max-height: 200px;
}

.html_css,
.html_css_second,
.html_css_third {
    display: flex;
}

.footer {
    display: flex;
    padding: 40px;
    max-width: 100%;
    justify-content: space-around;
}

.contact {
    max-width: 50%;
    background-color: #515702;
    color: white;
    padding: 30px;
}

.contact p {
    margin-bottom: 20px;
}

.contact a {
    text-decoration: none;
    color: white;
}

.social_container {
    display: flex;
    flex-direction: column;
    background-color: #4D667C;

}

.social_container img {
    max-width: 60px;
}

.icons {
    display: flex;
    padding: 20px;
    gap: 100px;
}

@media (max-width: 1100px) {

    .container {
        padding: 0 20px;
    }

    .navigation {
        justify-content: center;
        padding-right: 0;
    }

    .hero {
        min-height: 400px;
    }

    .hi {
        margin-left: 0;
    }

    .name {
        font-size: 20px;
    }

    .about_section {
        font-size: 18px;
        padding: 20px;
    }

    .html_css_js img,
    .html_css img,
    .html_css_second img,
    .html_css_third img {
        max-width: 200px;
        max-height: 150px;
    }

    .html_css_js, .html_css,.html_css_second,.html_css_third {
        display: flex;
        flex-direction: column;
    }
  
    .rest_countries,
    .clock,
    .calculator,
    .to_do_list,
    .tribute,
    .blog,
    .landing_page,
    .documentation,
    .job_application,
    .music_webpage,
    .the_expanse,
    .restaurant,
    .youtube {
        padding: 5px;
        gap: 5px;
    }

    .contact {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .social_container {
        width: 100%;
        background-color: #4D667C;
        padding: 20px;
    }

    .icons {
        justify-content: center;
        gap: 50px;
    }
    .footer {
        flex-direction: column;
        align-items: center;
    }
}