:root {
    --size-01: 4px;
    --size-02: 8px;
    --size-03: 12px;
    --size-04: 16px;
    --size-05: 24px;
    --size-06: 768px;

    --font-size-01: 14px;
    --font-size-02: 16px;

    --font-weight-light: 300;
    --font-weight-medium: 400;
    --font-weight-bold: 700;

    --primary-color: #2f878c;

    --grey-01: hsl(210, 4%, 98%);
    --grey-02: hsl(190, 20%, 97%);
    --grey-03: hsl(196, 15%, 85%);
    --grey-04: hsl(190, 15%, 70%);
    --grey-05: hsl(186, 7%, 37%);
    --grey-06: hsl(186, 8%, 13%);

    --border-01: 1.5px solid var(--grey-03);
    --border-02: 1.5px solid var(--grey-04);

    --border-radius-01: var(--size-01);
}

*,
::before,
::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    width: var(--size-06);
    margin: 0 auto;
}

h2 {
    margin: 0 0;
    font-size: var(--font-size-02);
    font-weight: var(--font-weight-bold);
}

h4 {
    margin: 0px;
}

.sub-heading,
.secondary {
    color: var(--grey-05);
}

.sub-heading {
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--size-03) 0;
}

nav {
    border-bottom: var(--border-01);
    background: var(--grey-01);
    padding-top: var(--size-03);
    margin-bottom: var(--size-03);
}

nav ul {
    list-type-style: none;
    padding-left: var(--size-02);
    margin: 0;
}

nav a {
    color: var(--grey-06);
    text-decoration: none;
}

nav div {
    box-sizing: border-box;
    padding: var(--size-02) var(--size-02);
    display: inline-block;
    border-bottom: var(--size-01) solid var(--grey-01);
}

nav div:hover {
    border-bottom: var(--size-01) solid var(--primary-color);
}

a {
    color: inherit;
}

button,
select {
    padding: 5px;
}

input {
    line-height: 2;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

#main-search {
    display: block;
    margin-bottom: var(--size-03);
}

#main-search input {
    width: 100%;
    display: block;
}

#main-search button {
    width: 10%;
    float: right;
    margin: 2px 0 2px 2px;
}

.main-content {
    margin-top: var(--size-05);
}

.flex {
    display: flex;
    justify-content: space-between;
}

.flex-grid {
    display: flex;
    flex-flow: row wrap;
    gap: var(--size-04);
}

.item {
    border-top: 1px solid var(--grey-02);
    padding: var(--size-03) 0;
}

.content-box {
    display: block;
    text-decoration: inherit;
    border: var(--border-02);
    border-radius: var(--border-radius-01);
    margin-bottom: var(--size-03);
}

.box-header,
.box-internal,
.box-bottom {
    padding: var(--size-02);
    display: block;
}

.box-header {
    background-color: var(--grey-02);
    border-radius: var(--border-radius-01) var(--border-radius-01) 0 0;
    border-bottom: var(--border-02);
    display: flex;
    justify-content: space-between;
}

.box-title {
    font-size: var(--font-size-01);
    font-weight: var(--font-weight-bold);
    color: var(--grey-06);
    text-decoration: none;
}

.box-internal {
    border-bottom: var(--border-01);
}

.secondary {
    font-size: var(--font-size-01);
    gap: var(--size-01);
}

.note {
    font-style: italic;
    min-height: var(--size-03);
}

form {
    width: 100%;
}

form div {
    margin-top: 10px;
    display: block;
}

textarea {
    width: 100%;
}