*{
    margin: 0;
    padding: 0;
    font-family: Poppins, sans-serif;
}

body {
    margin: 0;
}

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(50, 50, 50, 0.2), rgba(50, 50, 50, 0.2)), url(https://ik.imagekit.io/CoffeeLatteShop/wp7486978-genshin-impact-wallpapers_2WuNliowE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1657225292890);
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    background-color: #fff;
    height: 7vh;
    display: flex;
    box-shadow: 0px 0px 15px rgb(50, 50, 50);
}

nav div {
    display: flex;
    align-items: center;
}

.left {
    flex: 50%;
    padding-left: 90px;
}

.left a img {
    width: 75px;
}

.left ul {
    list-style: none;
    margin-left: 40px;
}

.left ul li {
    display: inline-block;
    padding-right: 12px;
    position: relative;
}

.left ul li a {
    color:rgb(50, 50, 50);
    text-decoration: none;
}

.left ul li a.active {
    color: rgb(255, 70, 70);
    font-weight: 700;
}

.left ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(50, 50, 50);
    display: block;
    transition: 0.15s;
}
.left ul li:hover::after{
    width: 100%;
}

.right {
    flex: 50%;
    justify-content: flex-end;
    padding-right: 90px;
}

.right a {
    text-decoration: none;
    color: white;
    background-color: rgb(50, 50, 50);
    font-size: 15px;
    padding: 7px 15px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.15s;
}

.right a:hover {
    transition: 0.15s;
    box-shadow: 0px 0px 10px rgb(50, 50, 50);
}