:root {
    --background-primary: #f9f9f9;
    --text-primary: #010101;
    --text-secondary: #5b5b5b;
}

.material-symbols-outlined {
    margin: 0px 8px 0px 8px;
    color: var(--text-primary);
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24
}

* {
    margin: 0px 0px;
    padding: 0px 0px;
    font-family: "Inter", sans-serif;
}

body {
    background-color: var(--background-primary);
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
}

p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
}

a {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: underline 1.5px solid;
}

button {
    width: fit-content;
    height: fit-content;
    padding: 8px 16px;
    border: 1.5px solid var(--text-primary);
    cursor: pointer;
}

header {
    width: calc(100% - 80px);
    height: fit-content;
    margin: 0px auto 40px;
    padding: 40px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 {
    padding: 10px 15px;
    font-family: 'Trebuchet MS';
    font-size: 18px;
    font-weight: 600;
    border: 1.5px solid var(--text-primary);
    border-left: 20px solid var(--text-primary);
    cursor: pointer;
}

header nav {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
}

header nav #search-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    border-bottom: 1.5px solid var(--text-primary);
}

header nav div .material-symbols-outlined {
    margin: 0px 8px 0px 0px;
    color: var(--text-primary);
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24
}

header nav div input {
    width: calc(300px);
    height: fit-content;
    padding: 10px 0px;
    background-color: transparent;
    color: var(--text-primary);
    outline: none;
    border: none;
}

::placeholder {
    color: var(--text-secondary);
}

header nav a {
    width: fit-content;
    height: fit-content;
    margin: 0px 0px 0px 20px;
    padding: 10px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s all ease;
}

footer {
    width: calc(100% - 80px);
    height: fit-content;
    margin: 40px auto 0px;
    padding: 40px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer div {
    width: fit-content;
    height: fit-content;
}

footer div a {
    width: fit-content;
    height: fit-content;
    margin: 0px 20px 0px 0px;
    font-family: "JetBrains Mono";
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: underline 1px solid var(--text-secondary);
}

footer div a:hover {
    color: var(--text-primary);
    text-decoration: underline 1px solid var(--text-primary);
}