*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Responsiveness of reusable components like buttons that has the same class and others like nav footer... */
@media (min-width: 1280px) {

    /* The container of navbar and navlinks */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 120px;
        background: #020617;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
    }

    /* The logo of my brand  */
    .logo {
        font-size: 20px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }

    /* The nav container and navbar items removed default backgraund */
    nav,
    a {
        background-color: transparent;
    }

    /* Styles of navigation items */
    nav{
        display: flex;
        flex-wrap: nowrap;
    }
    nav a {
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        margin-left: 35px;
        transition: 0.3s;
    }

    /* Functionality of hovering on navigation items */
    nav a:hover,
    nav a.active {
        color: #EAB308;
        font-weight: 600;
    }

    /* Class of ligin to leave some space btn login item and other items */
    .login {
        padding-left: 5rem;
    }

    /* Styles of sections container */
    .container {
        display: flex;
        flex-direction: column;
        padding: 20px 120px;
        height: 100vh;
    }

    /* styles of all sections */
    section {
        min-height: 100vh;
    }

    /* The contact me button as a reusable button */
    .contactMe {
        color: #fff;
        background-color: #EAB308;
        width: 15%;
        border: none;
        padding: 8px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 5px;
        cursor: pointer;
    }

   
}

/* for the screen size minimum width is 1024 px */
@media (min-width: 1024px) {

    /* The container of navbar and navlinks */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 120px;
        background: #020617;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
    }

    /* The logo of my brand  */
    .logo {
        font-size: 20px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }

    /* The nav container and navbar items removed default backgraund */
    nav,
    a {
        background-color: transparent;
    }

    /* Styles of navigation items */
    nav a {
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        margin-left: 35px;
        transition: 0.3s;
    }

    /* Functionality of hovering on navigation items */
    nav a:hover,
    nav a.active {
        color: #EAB308;
        font-weight: 600;
    }

    /* Class of ligin to leave some space btn login item and other items */
    .login {
        padding-left: 5rem;
    }

    /* Styles of sections container */
    .container {
        display: flex;
        flex-direction: column;
        padding: 20px 120px;
        height: 100vh;
    }

    /* styles of all sections */
    section {
        min-height: 100vh;
    }

   

    /* The contact me button as a reusable button */
    .contactMe {
        color: #fff;
        background-color: #EAB308;
        width: 25%;
        border: none;
        padding: 1rem;
        font-size: 15px;
        font-weight: 600;
        border-radius: 5px;
        cursor: pointer;
    }

    

}

/* for the screensize of minimum width is 768 px */
@media (min-width: 768px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 100px;
        background: #020617;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
        transition: background-color 0.8s ease-in-out;
    }

    header.scrolled {
        background-color: #2965F1;
    }


    nav{
        display: flex;
        flex-wrap: nowrap;
    }

    nav a {
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        margin-left: 20px;
        transition: color 0.3s ease-in-out;
    }

    header.scrolled nav a {
        color: #fff;
    }

    /* Functionality of hovering on navigation items */
    nav a:hover,
    nav a.active {
        color: #EAB308;
        font-weight: 600;
        transition: color 0.3s ease-in-out;
    }

    header.scrolled nav a.active{
        color: #EAB308;
    }

    header.scrolled nav a:hover{
        color: #EAB308;
    }

    .contactMe {
        color: #fff;
        background-color: #EAB308;
        width: 20%;
        border: none;
        padding: .8rem .5rem .8rem .5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 5px;
        cursor: pointer;
    }
}

/* for the screen size of mininimum width of 640 px */
@media (min-width: 640px) {}