/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

html,
body {
    height: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* Global */
:root {
    --color-text-primary: #747474;
    --color-text-secondary: #0a0a0a;
}

body {
    background-color: #fff;
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    font: normal normal 400 2.4rem/1.5 'DM Sans', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Background Lines */
.background-lines {
    display: flex;
    height: 100%;
    justify-content: space-between;
    left: 0;
    padding: 0 21%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.background-line {
    background: linear-gradient(to bottom, #d4d4d4e5, #d4d4d433);
    height: 100%;
    width: 0.1rem;
}

/* Navbar */
.navbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2.4rem 15.2rem;
}

.navbar-logo {
    height: 12.7rem;
    object-fit: contain;
    width: 9.7rem;
}

.navbar-link-list {
    display: flex;
    list-style: none;
}

.navbar-link-item:not(:last-child) {
    margin-right: 6.6rem;
}

.navbar-link {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.navbar-link .navbar-link-text {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.8rem;
    transition: all 400ms;
}

.navbar-link.is-active .navbar-link-text {
    color: var(--color-text-secondary);
}

.navbar-link .navbar-link-underline {
    background-color: var(--color-text-secondary);
    border-radius: 30%;
    height: 0.3rem;
    transition: all 400ms;
    width: 0;
}

.navbar-link.is-active .navbar-link-underline {
    width: 1.8rem;
}