html {
    height: 100%;
}

body {
    background-color: #222831;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}


/* css for smaller screens */

@media screen and (max-width: 780px) {
    /* hedaer containing hamburger menu and logo wriiten leon gongola */
    .first-section {
        width: 100vw;
        margin: 0 auto;
    }
    .header {
        display: flex;
        justify-content: space-between;
        padding: 25px 15px 0 15px;
    }
    /* creating hamburger menu from the span in the html file */
    .menu-burger-1,
    .menu-burger-3 {
        background-color: #00ADB5;
        width: 40px;
        height: 2.5px;
        margin: 10px 0;
    }
    .menu-burger-2 {
        background-color: #00ADB5;
        width: 30px;
        height: 2.7px;
    }
    /* putting padding on top of hamburger menu to lower it a bit */
    .menu-container {
        padding-top: 9px;
        z-index: 20;
    }
    .intro {
        width: 85vw;
        margin: 0 auto;
    }
    /* changing color and font for intro hie class */
    .intro-hie {
        color: #00ADB5;
        font-family: 'Roboto Mono', monospace;
    }
    /* changing name to white from black */
    .name {
        color: #EEEEEE;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 30px;
        font-weight: 900;
        margin: 0;
    }
    .what-i-do {
        color: #EEEEEE;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 30px;
        font-weight: 900;
        margin: 10px 0 0;
    }
    .about-me {
        color: #8892b0;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 22px;
        width: 85vw;
        margin: 0 auto;
        margin-top: 20px;
    }
    /* rotating hamburger menu into an x */
    /* Rotate first bar */
    .change .menu-burger-1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
        transition: transform 0.65s ease-in-out;
    }
    /* Fade out the second bar */
    .change .menu-burger-2 {
        opacity: 0;
    }
    /* Rotate last bar */
    .change .menu-burger-3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
        margin: 6px 0 0;
        transition: transform 0.65s ease-in-out;
    }
    #menu-dropdown {
        width: 70vw;
        background-color: #2E3342;
        color: white;
        display: none;
        margin: 0;
        z-index: 19;
        position: fixed;
        right: 0px;
        top: 0px;
        bottom: 0px;
        padding-top: 20vh;
        animation-name: menuspeed;
        animation-duration: 1.35s;
    }
    #menu-dropdown>ul {
        line-height: 400%;
        text-align: center;
        list-style: none;
        padding: 0;
    }
    /* change speed of menu dropdown pop up */
    @keyframes menuspeed {
        from {
            width: 0vw;
        }
        to {
            width: 70vw;
        }
    }
    /* changing color and font for menu-items on the dropdown menu */
    .menu-item {
        color: #EEEEEE;
        font-family: 'Roboto Mono', monospace;
        text-decoration: none;
        list-style: none;
        font-size: 14.4px;
    }
    /* editing color and border lines to resume section on dropdown menu */
    .resume {
        font-size: 14.4px;
        display: block;
        color: #00ADB5;
        text-align: center;
        margin: 0 auto;
        padding: 14px;
        border-radius: 5px;
        width: 50%;
        text-decoration: none;
        border: 1px solid #00ADB5;
    }
    /* editing images icon width and placement */
    .icon {
        width: 20px;
        height: 20px;
    }
    /* changing footer position */
    footer {
        margin-top: auto;
    }
    /* removing list style */
    footer>ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        padding: 0;
    }
    /* credit section changing color, font size and position */
    .credit {
        color: #00ADB5;
        font-size: 12px;
        text-decoration: none;
        text-align: center;
        padding-bottom: 10px;
        font-family: 'Roboto Mono', monospace;
    }
    /* starting the about me page css code */
    .about-me-header {
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 40px;
        color: #EEEEEE;
        text-align: center;
    }
    .my-image {
        width: 40vw;
        margin: 0 auto;
        display: block;
        border-radius: 15px;
    }
    .about-me-section {
        width: 90%;
        margin: 0 auto;
        color: #8892b0;
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 20px;
        line-height: 25px;
    }
    .languages {
        width: 90vw;
        padding: 20px 0 0 18px;
        color: #8892b0;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .html,
    .css,
    .js,
    .github {
        color: #00ADB5;
        padding-bottom: 5px;
    }
    .youtube {
        color: #00ADB5;
        text-decoration: none;
    }
    .languages-more {
        width: 90vw;
        margin: 0 auto;
        padding-top: 15px;
        color: #8892b0;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .languages-linkedin,
    .languages-contact {
        color: #00ADB5;
        text-decoration: none;
    }
    /* contact page css */
    .get-in-touch-header {
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 40px;
        color: #EEEEEE;
        text-align: center;
    }
    .get-in-touch-section {
        width: 90%;
        margin: 0 auto;
        color: #8892b0;
        padding-top: 15px;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 22px;
    }
    .link-to-email {
        font-family: 'Nanum Gothic', sans-serif;
        display: block;
        text-align: center;
        text-decoration: none;
        color: #00ADB5;
        border: 2px solid #00ADB5;
        width: 45vw;
        margin: 0 auto;
        margin-top: 65px;
        padding: 20px;
        border-radius: 10px;
    }
    /* Projects PAGE CSS */
    /* PROJECTS HEADER  center it and chang color and font */
    .projects-header {
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 10px;
        color: #EEEEEE;
        text-align: center;
    }
    .first-calculator-description {
        width: 90%;
        margin: 0 auto;
        color: #8892b0;
        padding-top: 15px;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 22px;
    }
    .first-calculator-image {
        width: 200px;
        height: 270px;
        margin: 0 auto;
        display: block;
        border-radius: 15px;
        margin-top: 20px;
    }
    .weather-app-image {
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 270px;
        border-radius: 15px;
        margin-top: 30px;
    }
    .first-calculator-link {
        color: #00ADB5;
        text-decoration: none;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .lasmoving-description {
        width: 90%;
        margin: 0 auto;
        color: #8892b0;
        padding-top: 30px;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 22px;
    }
    .lasmoving-link,
    .weather-link {
        color: #00ADB5;
        text-decoration: none;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .lasmoving-image {
        width: 85vw;
        /* height: 170px; */
        margin: 0 auto;
        display: block;
        margin-top: 20px;
        border-radius: 10px;
    }
    /* contact form css */
    .contact-form {
        text-align: center;
    }
    .contact-form-email,
    .contact-form-name {
        padding-left: 13px;
        width: 65vw;
        height: 38px;
        border-radius: 10px;
        border: none;
        margin: 10px;
        background-color: #222831;
        box-shadow: 5px 5px 18px rgba(136, 146, 176, 0.3);
        color: #8892b0;
    }
    .contact-form-email::placeholder,
    .contact-form-name::placeholder {
        color: #8892b0;
    }
    .contact-form-message {
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 10px;
        padding-left: 13px;
        width: 65vw;
        height: 150px;
        border-radius: 10px;
        border: none;
        margin: 10px;
        background-color: #222831;
        box-shadow: 5px 10px 18px rgba(136, 146, 176, 0.3);
        resize: vertical;
        color: #8892b0;
        overflow: auto;
    }
    .contact-form-message::placeholder {
        color: #8892b0;
    }
    .contact-form-submit {
        margin-top: 20px;
        background-color: #8892b0;
        border-style: none;
        border-radius: 8px;
        width: 30vw;
        height: 40px;
    }
    .contact-form-submit:hover {
        background-color: #222831;
        color: #8892b0;
        border: 2px solid #8892b0;
    }
    /* css for small screen code end */
}


/* css for bigger screens start */

@media screen and (min-width:780px) {
    body {
        overflow-x: hidden;
    }
    .menu-container {
        display: none;
    }
    .main-header {
        display: flex;
        justify-content: space-between;
    }
    #menu-dropdown>ul {
        display: flex;
        justify-content: space-between;
        padding: 40px 20px 0 0;
        justify-content: space-around;
        list-style: none;
    }
    .logo {
        padding: 20px 0 0 40px;
        width: 80px;
        height: 80px;
    }
    .menu-item {
        padding: 0 80px 0 0;
        text-decoration: none;
        color: #00ADB5;
        font-family: 'Roboto Mono', monospace;
    }
    .intro-hie {
        color: #00ADB5;
        padding-top: 75px;
        margin: 0 auto;
        width: 70vw;
        font-family: 'Roboto Mono', monospace;
    }
    .name {
        color: white;
        font-size: 80px;
        font-family: 'Nanum Gothic', sans-serif;
        font-weight: 900;
        margin: 0 auto;
        width: 70vw;
        padding-top: 20px;
    }
    .what-i-do {
        color: #8892b0;
        font-size: 80px;
        font-family: 'Nanum Gothic', sans-serif;
        font-weight: 900;
        margin: 0 auto;
        width: 70vw;
        padding-top: 20px;
    }
    .about-me {
        color: #8892b0;
        font-family: 'Nanum Gothic', sans-serif;
        margin: 0 auto;
        width: 70vw;
        padding-top: 20px;
        line-height: 30px;
    }
    footer {
        margin-top: auto;
        display: block;
        width: 100vw;
        text-align: center;
    }
    .footer-contact-page {
        position: absolute;
        bottom: 0;
    }
    footer>ul {
        display: flex;
        list-style: none;
        text-align: center;
        justify-content: space-evenly;
        margin: 0 auto;
        width: 30vw;
        padding: 12px;
    }
    .icon {
        width: 20px;
    }
    .credit {
        text-align: center;
        color: #00ADB5;
        text-decoration: none;
        line-height: 20px;
        padding-bottom: 10px;
    }
    /*  big screen about me page */
    .about-me-header {
        text-align: center;
        color: #8892b0;
        font-size: 50px;
        font-family: 'Nanum Gothic', sans-serif;
        font-weight: 900;
        padding-top: 10px;
    }
    .my-image {
        display: block;
        margin: 0 auto;
        width: 20vw;
        border-radius: 15px;
    }
    .about-me-flex-second-part {
        margin-left: 50px;
        padding-top: 40px;
    }
    .about-me-section {
        color: #8892b0;
        font-size: 18px;
        font-family: 'Nanum Gothic', sans-serif;
        line-height: 25px;
    }
    .languages {
        color: #8892b0;
        font-size: 18px;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .html,
    .css,
    .js,
    .github {
        color: #00ADB5;
    }
    .youtube {
        color: #00ADB5;
        text-decoration: none;
    }
    .languages-more {
        padding-top: 30px;
        color: #8892b0;
        font-size: 18px;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .languages-linkedin,
    .languages-contact {
        color: #00ADB5;
        text-decoration: none;
    }
    /* big screens projects page */
    .projects-header {
        text-align: center;
        color: #8892b0;
        font-size: 50px;
        font-family: 'Nanum Gothic', sans-serif;
        font-weight: 900;
        padding-top: 10px;
    }
    .first-calculator-link,
    .weather-app-link {
        color: #00ADB5;
        text-decoration: none;
        font-family: 'Nanum Gothic', sans-serif;
    }
    .first-calculator-description,
    .lasmoving-description {
        padding-top: 30px;
        color: #8892b0;
        font-size: 18px;
        font-family: 'Nanum Gothic', sans-serif;
        margin: 0 auto;
        width: 70vw;
    }
    .lasmoving-link,
    .weather-link {
        color: #00ADB5;
        text-decoration: none;
    }
    .first-calculator-link {
        color: #00ADB5;
        text-decoration: none;
    }
    .first-calculator-image {
        display: block;
        margin: 0 auto;
        width: 20vw;
        margin-top: 50px;
        border-radius: 15px;
    }
    .lasmoving-image {
        display: block;
        margin: 0 auto;
        width: 60vw;
        margin-top: 50px;
        margin-bottom: 40px;
        border-radius: 8px;
    }
    /* big screen contact page */
    .get-in-touch-header {
        text-align: center;
        color: #8892b0;
        font-size: 50px;
        font-family: 'Nanum Gothic', sans-serif;
        font-weight: 900;
        padding-top: 10px;
    }
    .get-in-touch-section {
        padding-top: 30px;
        color: #8892b0;
        font-size: 18px;
        font-family: 'Nanum Gothic', sans-serif;
        text-align: center;
    }
    .link-to-email {
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-top: 80px;
        width: 60px;
        text-decoration: none;
        padding: 7px 50px;
        border-radius: 8px;
        color: #00ADB5;
        border: 2px solid #00ADB5;
    }
    .link-to-email:hover {
        background-color: #00ADB5;
        color: #0a192f;
    }
    /* contact form css  */
    .contact-form {
        text-align: center;
    }
    .contact-form-email,
    .contact-form-name {
        padding-left: 13px;
        width: 30vw;
        height: 38px;
        border-radius: 10px;
        border: none;
        margin: 10px;
        background-color: #222831;
        box-shadow: 5px 5px 18px rgba(136, 146, 176, 0.3);
        color: #8892b0;
    }
    .contact-form-email::placeholder,
    .contact-form-name::placeholder {
        color: #8892b0;
    }
    .contact-form-message {
        font-family: 'Nanum Gothic', sans-serif;
        padding-top: 10px;
        padding-left: 13px;
        width: 30vw;
        height: 150px;
        border-radius: 10px;
        border: none;
        margin: 10px;
        background-color: #222831;
        box-shadow: 5px 10px 18px rgba(136, 146, 176, 0.3);
        resize: vertical;
        color: #8892b0;
        overflow: auto;
    }
    .contact-form-message::placeholder {
        color: #8892b0;
    }
    .contact-form-submit {
        margin-top: 20px;
        background-color: #8892b0;
        border-style: none;
        border-radius: 8px;
        width: 10vw;
        height: 40px;
    }
    .contact-form-submit:hover {
        background-color: #222831;
        color: #8892b0;
        border: 2px solid #8892b0;
    }
}