@font-face {
    font-family: 'DMSans';
    src: url('../assets/fonts/DMSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'DMSans', sans-serif;
}

body {
    /* font-family: Arial, sans-serif; */
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
    overflow-x: hidden;
}

h1 {
    color: #007bff;
}

/* navbar here */
.navbar {
    display: flex;
    max-width: 100%;
    height: 10vh;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

}

/* content here */
.content {
    display: flex;
    min-width: 80vw;
    max-width: 80vw;
    flex-direction: column;
    height: 90vh;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
    padding: 104px;
}

#menu {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
}

#menu li {
    list-style-type: none;
    margin-right: 44px;
}

#menu li a {
    color: #000;
    text-decoration: none;
}

#menu li a.active {
    text-decoration: underline;
    text-decoration-color: #ffc924;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#menu li:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #ffc924;
    text-decoration-thickness: 2px;
    /* color: #ffc924; */
    text-underline-offset: 4px;
    /* font-weight: bold; */
}

#logo img {
    margin-left: 110px;
    max-width: 62px;
    max-height: 62px;
}

#search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 273px;
    height: 52px;
    background-color: #efefef;
    border-radius: 12px;
    color: #6C6C87;
    border: 0px;
    padding: 0px 16px;
    /* margin-right: 45px; */
    /* the search icons */
    background-image: url("assets/search.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) 50%;
    /* Position from right and center vertically */
    background-size: 18px 18px;
}

#search:focus {
    outline: none;

}

#daynight {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
    border-radius: 40px;
    border: 0;
    padding: 8px;
    width: 88px;
    gap: 20px;
    /* margin-right: 96px; */
}

#daynight img {
    max-height: 24px;
    max-width: 24px;
}

#daynight img:hover {
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
}


#menunsearchndaynight {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-right: 96px;
    gap: 45px;
}