html {
    box-sizing: border-box;
}

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

:root {
    font-family: Avenir, Inter, system-ui, Helvetica, Arial, sans-serif;
    font-weight: 400;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    /* set colors as vars */
    --color-bg: #1f252b;
    --color-pri: #effbff;
    --color-acc: #52dcff;

    --module-spacing: 8px;
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    place-content: center;
    min-height: 100vh;

    background-color: var(--color-bg);
    color: var(--color-pri);
}

.app {
    flex: 20;
    max-width: 1200px;
    padding-top: var(--module-spacing);
    padding-bottom: var(--module-spacing);
}

.hspacer {
    flex: 1;
}

h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: normal;
}

h2 {
    margin: 0;
    font-size: 3em;
}

a {
    color: var(--color-pri);
}

section {
    padding-bottom: var(--module-spacing);
}

h3 {
    margin: 0;
    font-size: 2em;
}

section h3 {
    margin-bottom: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
}

.app_list {
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: var(--module-spacing);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 80%), 1fr));
    width: 100%;
}

.app_item {
    padding: 2px;
    margin: 2px;
    display: flex;
    border: 1px solid var(--color-bg);
    border-radius: 8px;
    transition: border 0.4s ease-in-out;
    justify-content: center;
    flex: 1;
}

.app_item:hover {
    border: 1px solid var(--color-acc);
}

.app_list a {
    text-decoration: none;
}

.app_icon {
    margin-left: 1em;
    margin-right: 1em;
}

.app_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 10ch;
    text-align: center;
}

.links_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-column-gap: 8px;
    grid-row-gap: 8px;
}

.link_category_header {
    width: 100%;
    border-bottom: 1px solid var(--color-acc);
    margin-bottom: 0.25em;
}

.link_category_header h4 {
    color: var(--color-acc);
    margin-bottom: 0.25em;
    margin-top: 0.25em;
}

.links_item {
    flex-direction: column;
    text-align: center;
    min-width: 230px;
}

.links_item a {
    color: var(--color-pri);
    display: block;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    margin-bottom: 0.25em;
}

.links_item a:hover {
    color: var(--color-acc);
    text-decoration: underline;
    text-decoration-color: var(--color-acc);
}

section.search {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

form#searchform {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

input#searchbar {
    padding: 0.5em;
    margin: 0.5em;
    border: 1px solid var(--color-acc);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-pri);
    width: 80%;
    max-width: 50ch;
    font-size: larger;
}

button#searchbtn {
    padding: 0.8em;
    margin: 0.5em;
    border: 1px solid var(--color-acc);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-pri);
    transition: background 0.3s ease-in-out;
}