/* styles.css */

:root {
    --primary-super-lightest-color: #e6f7ff;
    --primary-lightest-color: #cef3ff;
    --primary-lighter-color: #b3e5fc;  
    --primary-color: #5cb5fd;
    --primary-darker-color: #1E90FF;
    --primary-darkest-color: #4169E1;

    --error-color: #a00000;
    --error-background-color: #fff3f3;
    --success-color: #008d00;
    --success-background-color: #f3fff3;
    --warning-color: #6b6b00;
    --warning-background-color: #fffff3;
    --info-color: #0000a0;
    --info-background-color: #f3f3ff;

    --big-tip-color: #686800;
    --big-tip-background-color: #ffffcc;


    --button-transition-duration: 0.15s;
}

* {  
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    background-image: linear-gradient(var(--primary-lighter-color), var(--primary-super-lightest-color));
}

.content {
    width: calc(100% - 20px);
    max-width: 400px;
    margin: 10px;
    padding: 16px;

    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    background-color: white;
    box-shadow: 0 0 10px #5f5f5f2e;
}

.content form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content form input, button {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.content form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color);
}
.content form input[type="submit"], button {
    background-color: var(--primary-darker-color);
    color: white;
    border: none;
    cursor: pointer;
}
.content form input[type="submit"]:hover, button:hover {
    background-color: var(--primary-color);
    color: white;
    transition: background-color var(--button-transition-duration) ease;
}
.content form input[type="submit"]:active, button:active {
    background-color: var(--primary-lightest-color);
    color: var(--primary-darker-color);
    transition: none;
}

.errorlist {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;

    font-size: small;
}
.errorlist>li {
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
}
.error, .errorlist>li {
    color: var(--error-color);
    background-color: var(--error-background-color);
    border-color: var(--error-color);
}
.errorlist>li::before {
    content: "\F659";
    font-family: "bootstrap-icons";
    display: inline;
    vertical-align: -10%;
    margin-right: 5px;
}
.success {
    color: var(--success-color);
    background-color: var(--success-background-color);
    border-color: var(--success-color);
}
.warning {
    color: var(--warning-color);
    background-color: var(--warning-background-color);
    border-color: var(--warning-color);
}
.info {
    color: var(--info-color);
    background-color: var(--info-background-color);
    border-color: var(--info-color);
}

label {
    font-size: small;
}

.helptext {
    font-size: small;
    color: #777;
}
.helptext ul {
    padding: 0 20px;
}

.tips {
    font-size: small;
}

  


#logo {
    width: 60px;
    margin: 10px;
    align-self: flex-start;
}

.tool-tip {
    position: absolute;
    bottom: 4rem;

    padding: 1rem;
    line-height: 1.6rem;
}


header {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    h1 {
        font-size: 1.6rem;
        margin: 1rem;

        white-space: pre-line;
    }
}

footer {
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 10px;
    width: 100%;
}

footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px;
}

footer p {
    font-size: 14px;
}

footer a {
    color: #fff;
}
footer a:hover {
    color: #ccc;
}



h1 {
    font-weight: normal;
}