* {
    margin: 0;
    font-family: 'Trebuchet MS', sans-serif;
}

body {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-wrap: break-word;
    background-color: #e2f8ff;
}

a {
    color: black;
}

header {
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem;
    min-width: 100vw;
    align-items: center;
}

header *:not(div) {
    margin: 0.5rem;
}

header #title {
    font-size: 2rem;
}

header #title a {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

header #headerfill {
    flex-grow: 1;
}

header #buttonrow a {
    transition: 0.2s;
    font-size: 1.2rem;
    padding: 0.4rem;
    margin-left: 0;
    text-decoration: none;
    background-color: #10a9eb;
    border: 1.5px solid #0f90c7;
    border-radius: 8px;
}

header #buttonrow a:hover {
    transition: 0.2s;
    padding: 0.6rem;
}

main {
    flex-grow: 1;
    padding: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-color: #e2f8ff;
}

main #tagline {
    font-size: 1.1rem;
}

main h2 {
    margin-bottom: 0.3rem;
    margin-top: 0.3rem;
}

footer {
    background-color: skyblue;
    display: flex;
    flex-direction: row;
    min-width: 100vw;
    align-items: center;
}

footer *:not(a) {
    margin: 0.5rem;
    margin-right: 1rem;
}

footer #startrow {
    flex-grow: 0.85;
}

footer #middlerow {
    flex-grow: 1;
}

footer img {
    height: 2rem;
}

form #formcontent {
    font-size: 1.3rem;
}

#smallform #formcontent {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.6rem;
    align-items: center;
}

#smallform #formcontent div {
    display: contents;
}

#smallform #formcontent label {
    justify-self: left;
}

form #formcontent button, form #formcontent textarea, form #formcontent input:not([type="checkbox"]) {
    font-size: 1.2rem;
    padding: 0.2rem;
    margin-top: 0.6rem;
    border: 1.5px solid #10a9eb;
    border-radius: 8px;
}

form #formcontent button {
    padding: 0.5rem;
    cursor: pointer;
}

textarea {
    resize: vertical;
    min-height: 5rem;
    max-height: 35rem;
}

form #formcontent textarea, form #formcontent input:not([type="checkbox"]):not([type="number"]) {
    width: 99%;
}

form #formcontent input[type="number"] {
    width: 25% !important;
    min-width: 10rem;
}

#smallform #formcontent input:not([type="checkbox"]) {
    width: 35% !important;
    min-width: 20rem;
}

#smallform #formcontent select {
    font-size: 1.2rem;
    padding: 0.2rem;
    border: 1.5px solid #10a9eb;
    border-radius: 8px;
    width: 36%;
    min-width: 20rem;
    cursor: pointer;
}

form #conditions {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    padding: 0.2rem;
    margin-top: 1rem;
    border-radius: 8px;
}

form #conditions a {
    margin-right: 0.8rem;
}

input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    border: 1.5px solid #10a9eb;
    border-radius: 4px;
    cursor: pointer;
}


form input[type="submit"]:not(#submit-search), #back-home {
    transition: 0.2s;
    font-size: 1.2rem;
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1.5px solid #10a9eb;
    border-radius: 8px;
    cursor: pointer;
}

#back-home {
    margin-left: 0.5rem;
}

#back-home a {
    text-decoration: none;
}

form input[type="submit"]:not(#submit-search):hover, #back-home:hover {
    transition: 0.2s;
    padding: 0.6rem;
}

#passwordsecurity {
    font-size: 1.1rem;
    margin-top: 0.8rem;
}

a img.ext-inline {
    height: 0.5rem;
    margin-right: 0.2rem;
    align-items: bottom;
}

#buttonlinks {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

#buttonlinks a {
    transition: 0.2s;
    font-size: 1.5rem;
    text-decoration: none !important;
    padding: 0.65rem;
    margin-right: 2rem;
    border-radius: 8px;
    background-color: skyblue;
    border: 3px solid #10a9eb;
}

#buttonlinks a:hover {
    transition: 0.2s;
    background-color: #55c1ef;
}

#checkboxdiv {
    display: flex;
    align-items: center;
}

#checkboxdiv label {
    padding-right: 0.7rem;
}

#moodsdiv {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 0;
}

#moodsdiv label {
    flex-grow: 1;
    padding: 0.4rem;
    font-size: 2.5rem;
    cursor: pointer;
}

#moodsdiv input[type="radio"]:checked + label {
    background-color: skyblue !important;
    border: 3px solid #10a9eb !important;
    border-radius: 100%;
}

#moodsdiv label:hover {
    background-color: #aee3ff;
    border-radius: 100%;
}

#file-list {
    list-style: none;
    padding-left: 0.5rem;
    margin-top: 0.5rem;
}

#file-list li {
    display: flex;
    align-items: center;
    border-top: 1px solid skyblue;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#file-list li.first-file {
    border-top: none !important;
}

.preview-image, .preview-video, .preview-audio {
    width: 35rem;
}

.preview-file {
    width: 5rem;
    margin-right: 30rem;
}

.metadata {
    margin-left: 1rem;
    text-align: center;
    font-size: 1.5rem;
}

.remove-btn {
    margin-right: 1rem;
    font-size: 2rem !important;
    border: none !important;
    background-color: transparent !important;
}

.line {
    width: 100%;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    border-top: 2px solid skyblue;
}

#memory-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#mood-emoji {
    font-size: 3rem;
}

#memory-content {
    font-size: 1.2rem;
    text-align: justify;
    padding: 0.6rem;
    border: 2.5px solid skyblue;
    border-radius: 1.2rem;
}

a.open-media img {
    margin-right: 1rem;
    padding: 0.5rem;
    width: 3rem;
}

.preview-link {
    text-decoration: none !important;
}

.memory-preview {
    padding: 0.6rem;
    margin-bottom: 0.8rem;
    border: 3px solid #55c1ef;
    border-radius: 1.8rem;
}

.memory-preview .preview-header {
    display: flex;
    flex-direction: horizontal;
    align-items: center;
}

.memory-preview .preview-emoji {
    font-size: 2.6rem;
    margin-right: 0.5rem;
}

.memory-preview .preview-body {
    display: flex;
    flex-direction: horizontal;
    align-items: center;
}

.memory-preview .preview-content {
    font-size: 1.18rem;
    text-align: justify;
    flex-grow: 1;
}

.memory-preview .preview-img {
    border-radius: 2rem;
    flex-shrink: 0;
    max-width: 18rem;
    max-height: 15rem;
    margin-left: 0.5rem;
}

#search-form {
    display: flex;
    flex-direction: horizontal;
    align-items: center;
}

#search-form #searchbar {
    width: 100%;
    font-size: 1.2rem;
    padding: 0.3rem;
    margin-right: 0.5rem;
    border: 1.5px solid #55c1ef;
    border-radius: 8px;
}

#search-form #submit-search {
    font-size: 1.1rem;
    padding: 0.4rem;
    border: 1.5px solid #55c1ef;
    border-radius: 8px;
    cursor: pointer;
}

#search-query {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    text-align: justify;
}