:root {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    font-size: 16px;

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

    --padding: 4.35rem;
}

* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    margin: 0px;
    height: 100%;
    display: flex;
    flex-flow: column;
    background: #e8f6ff;
}

.role-tag {
    padding: 0.35rem;
    color: white;
    font-size: 0.84rem;
    text-align: center;
    border: 1px solid black;
}

.role-tag.role-tag--dev {
    background: #895196;
}

.role-tag.role-tag--admin {
    background: #ac1e14;
}

.role-tag.role-tag--regular {
    background: #030396;
}

.role-tag.role-tag--junior {
    background: #156900;
}

input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select,
.custom-file-upload {
    width: 100%;
    padding: 0.65rem;
}

input,
textarea,
select,
optgroup,
button,
.custom-file-upload {
    font-size: inherit;
    font-family: inherit;
}

button,
input[type="submit"],
input[type="button"],
a[role="button"],
.custom-file-upload {
    border: none;
    padding: 12px;
    font-size: initial;
    cursor: pointer;
    width: 100%;
    background: #143b8d;
    text-align: center;

    text-decoration: none;
    color: white;

    &:hover {
        background: #0f2063;
    }
}

.secondary {
    background: #7d7975 !important;
}

.secondary:hover {
    background: #5b5855 !important;
}

.danger {
    background: #b90a07;
}

.danger:hover {
    background: #6e0303 !important;
}

.link {
    background: #377ea3 !important;
}

.link:hover {
    background: #4d91b6 !important;
}


.edit-profile {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.edit-profile figure {
    margin: 0px;

    img {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.edit-profile textarea {
    resize: vertical;
}

.edit-thumbnail figure {
    margin: 0px;

    img {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.edit-thumbnail textarea {
    resize: vertical;
    max-width: 100%;
    min-width: 100%;
}

.custom-file-upload {
    position: relative;
    padding: 8px;
    cursor: pointer;
    border-radius: 0px;
    text-align: center;
}

input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.notification {
    padding: 1.2rem;
    color: white;
    margin-bottom: 16px;
}

.notification.notification--success {
    background: #098609;
}

.notification.notification--danger {
    background: #800202;
}

.notification.notification--info {
    background: #204cac;
}

article {
    background: #eef6ff;
    margin-bottom: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
    &>header {
        padding: 16px;
        font-weight: bold;
        border-bottom: 1px gray solid;
    }

    section {
        padding: 16px;
    }
}

dialog {
    width: 80%;
}

:where(input, select, textarea)+small {
    display: block;
}

.form-error-helper {
    color: red;
}