style.css

/* Written By Martangass */
/* GitHub : Martangass */



/* --General-- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}



/* --Body-- */
body {

    /* istem size */
    display: flex;

    /* item position */
    justify-content: center;
    align-items: center;

    /* regulate the size of items */
    min-height: 100vh;

    /* Background Image */
    background: url('img/Background.jpg') no-repeat;

    /* Background size */
    background-size: cover;

    /* Background position */
    background-position: center;
}



/* --NavBar-- */
header {

    /* Navbar Position */
    position: fixed;
    top: 0;
    left: 0;

    /* NavBar size */
    width: 100%;
    padding: 20px 100px;
    display: flex;

    /* item position */
    justify-content: space-between;
    align-items: center;

    /* Background Color */
    background-color: transparent;

    /* static positoion */
    z-index: 99;
}



/* --Font & Logo & Text-- */
.logo {
    
    /* Logo size */
    font-size: 2em;

    /* Logo Color */
    color: #ffffff;

    /* No Cursor when hover active */
    user-select: none;
}



/* --Navigations-- */
.navigation .a {

    /* Navigations Position */
    position: relative;
    margin-left: 40px;

    /* Navigations Size */
    font-size: 1.1em;
    font-weight: 500;

    /* Navigations Color */
    color: #ffffff;

    /* No Underline */
    text-decoration: none;
}


/* --Navigations Hover Right-- */
.navigation .a::after {

    /* Position */
    content: " ";
    position: absolute;
    left: 0;
    bottom: -6px;

    /* Size */
    width: 100%;
    height: 3px;

    /* Background */
    background: #7c7c7c;

    /* Round corners */
    border-radius: 5px;

    /* Animation origin */
    transform-origin: right;

    /* I dont even know */
    /* Just use Google */
    transform: scaleX(0);

    /* Animation Time */
    transition: transform .5s

}



/* --Navigations Hover Left-- */
.navigation .a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}



/* --Login Button-- */
.navigation .btnLogin-popup {
    
    /* Button Size */
    width: 130px;
    height: 50px;

    /* Background */
    background: transparent;

    /* Border & Outline */
    border: 2px solid #fff;
    outline: none;

    /* Button rounded corners */
    border-radius: 6px;

    /* Cursor pointer when hover is active */
    cursor: pointer;

    /* Font size */
    font-size: 1.1em;

    /* Font Color */
    color: #fff;

    /* Font size */
    font-weight: 500;

    /* Button Position */
    margin-left: 40px;

    /* Animation Time */
    transition: .5s;
}



/* --Login Page Hover-- */ 
.navigation .btnLogin-popup:hover {
    
    /* Background color if active */
    background: #fff;

    /* Font color if active */
    color: #7c7c7c;
}