/* MAIN ELEMENTS */

main p {
    margin-bottom: 1rem;
}

main a {
    text-decoration: underline;
}

main a:hover,
main a:focus {
    text-decoration: none;
}

main ul {
    list-style-type: square;
    list-style-position: inside;
    margin-bottom: 1rem;
}

main ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    margin-bottom: 1rem;
}

main dl {
    margin-bottom: 1rem;
}

main dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    margin-right: calc(1rem / 2);
}

main dl dt::after {
    content: ":";
}

main dl dd {
    font-style: italic;
}

main dl dd::before {
    content: "\201E";
}

main dl dd::after {
    content: "\201D";
}

main blockquote {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
    font-style: italic;
    border-left: 2px solid;
    position: relative;
    padding: 1rem 1rem 1rem calc(1rem*4);
}

main blockquote::before {
    content: "\201D";
    font-size: 2rem;
    position: absolute;
    left: 1rem;
    top: calc(1rem*2);
}

main blockquote p {
    margin-bottom: 0rem;
}

main blockquote cite {
    display: block;
    font-style: normal;
    opacity: 0.5;
    font-size: .83rem;
}

main details {
    width: 100%;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
}

main details summary:before {
    content: '\2023';
    position: absolute;
    top: 1rem;
    left: 1rem;
    transform: rotate(0);
    transform-origin: .2rem 50%;
    transition: .25s transform ease;
}

main details[open]>summary:before {
    transform: rotate(90deg);
}

main details summary {
    padding: 1rem;
    display: block;
    position: relative;
    cursor: pointer;
    padding-left: calc(1rem * 2);
}

main details p {
    padding: 1rem;
    margin-bottom: 0rem;
}

main details summary::-webkit-details-marker {
    display: none;
}

main code {
    width: 100%;
    font-family: monospace;
    font-size: 0.83rem;
    display: block;
    border: 1px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    word-wrap: break-word;
    line-height: normal;
}

main table {
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
    font-size: 0.83rem !important;
}

main table caption {
    opacity: 0.5;
    text-align: center;
    font-style: italic;
    font-size: 75%;
    margin-bottom: 1rem;
}

main table thead tr th {
    border-bottom: 1px solid;
    font-size: 75%;
    font-weight: bold;
    text-align: left;
    padding: calc(1rem / 2);
}

main table tfoot tr th {
    border-top: 1px solid;
    font-size: 75%;
    font-weight: bold;
    text-align: left;
    padding: calc(1rem / 2);
}

main table tbody tr td {
    padding: calc(1rem / 2);
}

main table tbody tr {
    border-bottom: 1px solid;
}

main table tbody tr:last-of-type {
    border-bottom: none;
}

main table tbody tr:nth-child(odd) {
    opacity: 0.5;
}

main table tbody tr:hover {
    opacity: 0.5;
}

main picture {
    width: 100%;
}

main picture img {
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
    object-fit: contain;
    margin-bottom: 1rem;
}

main figure figcaption {
    opacity: 0.5;
    text-align: center;
    font-style: italic;
    font-size: 0.83rem;
    margin-bottom: 1rem;
}

main figure {
    width: 100%;
    margin-bottom: 1rem;
}

main figure img {
    height: auto;
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

main figure figcaption {
    opacity: 0.5;
    text-align: center;
    font-style: italic;
    font-size: 0.83rem;
    margin-bottom: 1rem;
}

main figure audio {
    width: 100%;
}

main figure video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

main strong,
main b {
    font-weight: bold;
}

main em,
main i {
    font-style: italic;
}

main sub {
    vertical-align: sub;
    font-size: smaller;
}

main sup {
    vertical-align: super;
    font-size: smaller;
}

main small {
    font-size: smaller;
}

main samp {
    font-family: monospace;
}

main s,
main del {
    text-decoration: line-through;
    opacity: 0.5;
}

main hr {
    border-top: 1px dotted;
    margin: calc(1rem*2) 0;
}

main form {
    margin-bottom: 1rem;
}

main form fieldset {
    border: 1px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

main form fieldset:last-of-type {
    margin-bottom: 0rem;
}

main legend {
    font-style: italic;
    font-weight: bold;
}

main select {
    display: block;
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main textarea {
    display: block;
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main button {
    display: block;
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    text-align: center;
    border: 1px solid;
}

main button:hover {
    opacity: 0.5;
}

main label {
    font-style: italic;
}


main meter {
    display: block;
    border: 1px solid;
    width: 100%;
    color: currentColor;
}

main meter::-moz-meter-bar {
    background: currentColor;
}

main meter::-webkit-meter-value {
    background: currentColor;
}

main progress {
    display: block;
    border: 1px solid;
    width: 100%;
    color: currentColor;
}

main progress::-moz-progress-bar {
    background: currentColor;
}

main progress::-webkit-progress-value {
    background: currentColor;
}

main input {
    display: block;
}

main input[type=button] {
    display: block;
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    text-align: center;
    border: 1px solid;
}

main input[type=button]:hover {
    opacity: 0.5;
}

main .checkbox-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

main .checkbox-label {
    position: relative;
    cursor: pointer;
    padding: 0;
    user-select: none;
}

main input[type="checkbox"] {
    position: relative;
    width: calc(1rem * 2);
    height: calc(1rem * 2);
    appearance: none;
    outline: 0;
    cursor: pointer;
    border: 1px solid;
}

main input[type="checkbox"]::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb25fYnlfUG9zaGx5YWtvdjEwPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjZmZmZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNi4wMDAwMDAsIDI2LjAwMDAwMCkiPjxwYXRoIGQ9Ik0xNy45OTk5ODc4LDMyLjQgTDEwLjk5OTk4NzgsMjUuNCBDMTAuMjI2Nzg5MSwyNC42MjY4MDE0IDguOTczMTg2NDQsMjQuNjI2ODAxNCA4LjE5OTk4Nzc5LDI1LjQgTDguMTk5OTg3NzksMjUuNCBDNy40MjY3ODkxNCwyNi4xNzMxOTg2IDcuNDI2Nzg5MTQsMjcuNDI2ODAxNCA4LjE5OTk4Nzc5LDI4LjIgTDE2LjU4NTc3NDIsMzYuNTg1Nzg2NCBDMTcuMzY2ODIyOCwzNy4zNjY4MzUgMTguNjMzMTUyOCwzNy4zNjY4MzUgMTkuNDE0MjAxNCwzNi41ODU3ODY0IEw0MC41OTk5ODc4LDE1LjQgQzQxLjM3MzE4NjQsMTQuNjI2ODAxNCA0MS4zNzMxODY0LDEzLjM3MzE5ODYgNDAuNTk5OTg3OCwxMi42IEw0MC41OTk5ODc4LDEyLjYgQzM5LjgyNjc4OTEsMTEuODI2ODAxNCAzOC41NzMxODY0LDExLjgyNjgwMTQgMzcuNzk5OTg3OCwxMi42IEwxNy45OTk5ODc4LDMyLjQgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==");
    background-size: calc(1rem * 4);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
}

main input[type="checkbox"]:checked {
    background-color: currentColor;
}

main input[type="checkbox"]:checked::before {
    opacity: 1;
}

main input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

main .color-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

main .color-label {
    position: relative;
    cursor: pointer;
    padding: 0;
    user-select: none;
}

main input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: calc(1rem * 2);
    width: calc(1rem * 2);
    padding: 0;
}

main input[type=date] {
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=email] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=file] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=hidden] {
    display: none;
}

main input[type=number] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=password] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main .radio-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

main .radio-label {
    position: relative;
    cursor: pointer;
    padding: 0;
    user-select: none;
}

main input[type="radio"] {
    width: calc(1rem * 2);
    height: calc(1rem * 2);
    appearance: none;
    outline: 0;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid;
}

main input[type="radio"]:checked {
    background-color: currentcolor;
}

main input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

main input[type=range] {
    width: 100%;
    height: 1rem;
    border: 1px solid;
    outline: none;
    opacity: 1;
}

main input[type=range]:hover {
    opacity: 0.5;
}

main input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: calc(1rem * 2);
    height: calc(1rem * 2);
    cursor: pointer;
}

main input[type=range]::-moz-range-thumb {
    appearance: none;
    width: calc(1rem * 2);
    height: calc(1rem * 2);
    cursor: pointer;
}

main input[type=reset] {
    display: block;
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    text-align: center;
    border: 1px solid;
}

main input[type=reset]:hover {
    opacity: 0.5;
}

main input[type=search] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=submit] {
    display: block;
    cursor: pointer;
    width: 100%;
    padding: calc(1rem / 2);
    text-align: center;
    border: 1px solid;
}

main input[type=submit]:hover {
    opacity: 0.5;
}

main input[type=tel] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=text] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
}

main input[type=url] {
    width: 100%;
    padding: calc(1rem / 2);
    border: 1px solid;
    font-style: italic;
}