/* Root Element */
html {
font-size: clamp(1rem, 1.75vw, 1.125rem);
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
height: 100%;
height: 100%;
margin: 0;
/* overflow-wrap: break-word;
word-break: break-word;
*/
}
/* ### Document Metadata */
/* Contains metadata for the document. */
/* Specifies the title of the document. */
/* <meta > Defines metadata such as character set, viewport settings, etc. */
/* <link > Links external resources like stylesheets. */
/* <style > Embeds CSS styles within the document. */
/* <base > Specifies the base URL for relative links. */
/* ### Sections & Content Organization */
/* <body > The main content of the document. */
/* <header > Defines a header section. */
/* <footer > Defines a footer section. */
/* <main > Represents the main content of a document. */
/* <section > Defines a section in a document. */
/* <article > Represents self-contained content. */
/* <aside > Represents secondary content like a sidebar. */
/* <nav > Defines navigation links. */
h1, h2, h3, h4, h5, h6 {
color: var(--app-headings-color, black);
}
h1 {
font-size: clamp(1.75rem, 3.5vw, 32px);
}
h2 {
font-size: clamp(1.5rem, 3vw, 24px);
}
h3 {
font-size: clamp(1.25rem, 2.5vw, 18.72px);
}
h4 {
font-size: clamp(1.125rem, 2vw, 16px);
}
h5 {
font-size: clamp(1rem, 1.5vw, 13.28px);
}
h6 {
font-size: clamp(0.95rem, 1.2vw, 10.72px);
}
/* <h1 > ` to `<h6 > Heading elements from largest (`<h1>`) to smallest (`<h6>`). */
/* <p > Paragraph. */
/* <hr > Horizontal rule, used to separate content. */
/* <br > Line break. */
/* ### Text Formatting */
/* <strong > Strong emphasis (bold). */
/* <em > Emphasized text (italic). */
/* <b > Bold text. */
/* <i > Italic text. */
/* <u > Underlined text */
/* <small > Small text. */
/* <mark > Highlighted text. */
/* <del > Deleted text. */
/* <ins > Inserted text. */
/* <sub > Subscript text. */
/* <sup > Superscript text. */
/* <code > Code block. */
/* <pre > Preformatted text. */
/* <blockquote > Block quotation. */
/* <cite > Citation for a reference. */
/* <abbr > Abbreviation. */
/* ### Lists */
ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* <ol > Ordered list. */
/* <li > List item. */
/* <dl > Description list. */
/* <dt > Description term. */
/* <dd > Description detail. */
/* ### Tables */
/* <table > Defines a table. */
/* <caption > Table caption. */
/* <tr > Table row. */
/* <th > Table header cell. */
/* <td > Table data cell. */
/* <thead > Table head. */
/* <tbody > Table body. */
/* <tfoot > Table footer. */
/* <col > Defines column properties. */
/* <colgroup > Groups columns for styling. */
/* ### Forms */
/* <form > Defines a form. */
/* <input > Input field. */
/* <textarea > Multi-line text input. */
button {
margin-left: 5px;
margin-right: 5px;
}
/* <select > Dropdown menu. */
/* <option > Option within `<select > `. */
/* <optgroup > Groups options inside `<select > `. */
/* <label > Labels an input. */
/* <fieldset > Groups related form elements. */
/* <legend > Caption for `<fieldset > `. */
/* <datalist > Provides autocomplete options. */
/* <output > Displays calculation results. */
/* <progress > Progress indicator. */
/* <meter > Measurement indicator. */
/* ### Interactive Elements */
/* <details > Creates a collapsible section. */
/* <summary > Title for `<details > `. */
/* <dialog > Defines a modal dialog. */
/* ### Embedding Content */
/* <img > Image. */
/* <audio > Audio file. */
/* <video > Video file. */
/* <source > Specifies media sources. */
/* <track > Provides captions/subtitles. */
/* <iframe > Embeds another webpage. */
/* <embed > Embeds external content.
/* <object > External object/container. */
/* <param > Defines parameters for `<object > `. */
/* ### Links */
a {
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* <area > Defines clickable areas in an image map. */
/* <map > Image map. */
/* <script > Embeds JavaScript code. */
/* <noscript > Displays content if JavaScript is disabled. */
/* ### SVG & Canvas */
/* <svg > Scalable vector graphics. */
/* <canvas > Used for graphics via JavaScript. */
/* ### Miscellaneous Elements */
/* <span > Inline container. */
/* <div > Block-level container. */
/* <data > Links data to content. */
/* <time > Represents a time/date. */
/* <wbr > Suggests word break location. */
.app-display-none {
display: none !important;
}