@font-face {
    font-family: "RobotoSlab-Regular";
    src: url("RobotoSlab-Regular.ttf");
}

*
{
    font-family: "RobotoSlab-Regular";

    --text: black;
    --textLight: white;

    --background: lightblue;

    --primary: burlywood;

    --secondaryLight: lightgray;
    --secondary: darkgray;
    --secondaryDark: gray;

    --accent: tomato;

    --error: darkred;
    --success: darkgreen;

    --border-radius: 5px;
    --box-shadow: 0 0 30px -20px black;
}

body
{
    margin: 0;
    margin-bottom: 20px;
    background-color: var(--background);
}

header
{
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 20px;
    gap: 40px;
    height: fit-content;
    background-color: var(--secondary);
    box-shadow: var(--box-shadow);
    font-size: large;
    white-space: nowrap;
}

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

a:active
{
    color: var(--accent);
}

form
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

form > div
{
    display: flex;
    flex-direction: column;
}

input, textarea
{
    padding: 10px;
    border: 3px solid var(--secondary);
    border-radius: var(--border-radius);
    font-size: medium;
    max-width: 100%;
}

input[type="submit"]
{
    background-color: cornflowerblue;
    cursor: pointer;
}

input[type="submit"]:active
{
    background-color: lightskyblue;
}

input[type="file"]
{
    cursor: pointer;
}

.logo
{
    max-height: 60px;
    max-width: 100%;
    margin-right: auto;
}

.postContainer
{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px;
}

.post
{
    background-color: var(--secondaryLight);
    border: 20px solid var(--secondaryLight);
    min-width: 200px;
    max-height: 80vh;
    overflow: scroll;
    flex: 1;
    word-break: break-word;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.uploadImage
{
    max-width: min(300px, 100%);
    max-height: 300px;
    align-self: start;
    border-radius: var(--border-radius);
}

.account
{
    background-color: var(--secondaryLight);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin: 20px;
    padding: 20px;
}

.login
{
    display: flex;
    flex-wrap: wrap;
    margin: 20px;
    gap: 20px;
}

.login > form
{
    flex: 1;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 20px;
    background-color: var(--secondaryLight);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.postForm
{
    margin: 20px;
    padding: 20px;
    background-color: var(--secondaryLight);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.change
{
    display: flex;
    align-items: end;
    gap: 20px;
    flex-wrap: wrap;
}

.change > form
{
    max-width: 100%;
}

.error
{
    background: var(--error);
    color: var(--textLight);
    padding: 10px;
    border-radius: var(--border-radius);
}

.success
{
    background: var(--success);
    color: var(--textLight);
    padding: 10px;
    border-radius: var(--border-radius);
}

.notFound
{
    max-width: 50vw;
    margin: auto;
    margin-top: 20px;
}