:root {
    --color-brand-primary: #A90E3D;
    --color-white: #fefefe;
    --color-primary-100: #c7c7c7;
    --color-primary-300: #8f8f8f;
    --color-primary-400: #717171;
    --color-primary-500: #2a2c36;
    --color-primary-700: #12141F;
    --color-primary-900: rgb(10, 12, 18);
    --color-error-background: #f2c2c2;
    --color-error-foreground: #8b0101;
    --color-success-background: #8dedc5;
    --color-success-foreground: #12af6e;
    --color-primary-gradient: linear-gradient( var(--color-primary-300), var(--color-primary-400) );
    --color-background: var(--color-primary-700);
    --color-header: var(--color-primary-900);
    --color-font: var(--color-white);
    --color-font-dark: var(--color-primary-900);
    --color-error-box: var(--color-error-background);
    --color-error-box-font: var(--color-error-foreground);
    --color-select-font: var(--color-font-dark);
    --color-switch-off: var(--color-primary-100);
    --color-switch-on: var(--color-primary-300);
    --color-switch-thumb: var(--color-white);
    --color-tile: var(--color-primary-500);
    --color-tile-font: var(--color-white);
    --color-tile-active: var(--color-primary-700);
    --color-tile-hover: var(--color-primary-gradient);
    --color-button-primary: var(--color-primary-100);
    --color-button-primary-border: transparent;
    --color-button-primary-font: var(--color-font-dark);
    --color-button-primary-hover: var(--color-primary-gradient);
    --color-button-primary-hover-border: transparent;
    --color-button-primary-hover-font: var(--color-font);
    --color-button-primary-active: var(--color-primary-100);
    --color-button-primary-active-border: transparent;
    --color-button-primary-active-font: var(--color-font-dark);
    --color-button-primary-dark: var(--color-primary-500);
    --color-button-primary-dark-border: transparent;
    --color-button-primary-dark-font: var(--color-font);
    --color-button-primary-dark-hover: var(--color-primary-gradient);
    --color-button-primary-dark-hover-border: transparent;
    --color-button-primary-dark-hover-font: var(--color-font);
    --color-button-primary-dark-active: var(--color-primary-700);
    --color-button-primary-dark-active-border: transparent;
    --color-button-primary-dark-active-font: var(--color-font);
    --color-button-secondary: var(--color-primary-100);
    --color-button-secondary-border: transparent;
    --color-button-secondary-font: var(--color-font-dark);
    --color-button-secondary-hover: var(--color-primary-gradient);
    --color-button-secondary-hover-border: transparent;
    --color-button-secondary-hover-font: var(--color-font);
    --color-button-secondary-active: var(--color-primary-300);
    --color-button-secondary-active-border: transparent;
    --color-button-secondary-active-font: var(--color-font-dark);
    --color-button-carousel: transparent;
    --color-button-carousel-border: var(--color-primary-300);
    --color-button-carousel-font: var(--color-font);
    --color-button-carousel-hover: transparent;
    --color-button-carousel-hover-border: var(--color-font);
    --color-button-carousel-hover-font: var(--color-font);
    --color-button-carousel-active: transparent;
    --color-button-carousel-active-border: var(--color-font);
    --color-button-carousel-active-font: var(--color-font);
    --color-button-carousel-selected: var(--color-primary-300);
    --color-button-carousel-selected-border: var(--color-primary-300);
    --color-button-carousel-selected-font: var(--color-font);
    --color-button-carousel-selected-hover: var(--color-primary-300);
    --color-button-carousel-selected-hover-border: var(--color-primary-300);
    --color-button-carousel-selected-hover-font: var(--color-primary-100);
    --color-button-carousel-selected-active: var(--color-primary-300);
    --color-button-carousel-selected-active-border: var(--color-primary-300);
    --color-button-carousel-selected-active-font: var(--color-primary-100);
    --color-card: var(--color-primary-500);
    --color-card-shadow: var(--color-primary-900);
    --color-info-card: var(--color-primary-700);
    --color-loader: var(--color-primary-100);
    --color-tabs: var(--color-primary-900);
    --color-tabs-active: var(--color-primary-300);
    --color-icon-success: var(--color-success-foreground);
    --color-rating-selector-highlight: #fdbf00;
    --border-width-tile: 2px;
    --border-radius-tile: 1.25rem;
    --border-width-button: 0;
    --border-radius-button: 9999px;
    --border-width-card: 2px;
    --border-radius-card: .5rem;
    --wrapper-min-width: 320px;
    --wrapper-max-width: 768px;
    --tile-width: 8.625rem;
}

html {
    background-color: var(--color-background) !important;
    background: url(../img/oneview-background-1.webp) no-repeat center center fixed;
    background-image: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    tab-size: 4;
}

BODY {
    max-width: var(--wrapper-max-width);
    min-width: var(--wrapper-min-width);
    margin: 0 auto;
    font-family: Roboto, Verdana, Geneva, sans-serif;
    color: var(--color-font);
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
}
*, :before, :after {
    box-sizing: border-box;
}
H1 {
    font-size: 1.375rem;
    font-weight: 500;
    margin: 1rem 0;  
}
.content p {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 1.25rem;
    letter-spacing: .025rem;
}
H3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 1em 0 0.8em 0;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    color: inherit;
    margin: 0;
    padding: 0;
}
input,
select {
    padding: 0.5em;
}
ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
    border-width: 0;
    border-style: solid;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: var(--wrapper-max-width);
    padding: 0.5rem 1rem;
    margin: 0 auto;
    background-color: var(--color-header);
    
    border-block-end: 6px solid var(--color-brand-primary);
}

.header-logo {
    width: 10em;
    height: 2rem;
    background-image: url(../img/oneview-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.header-logo,
[dir="ltr"] .header-logo,
[dir="auto"] .header-logo {
    float: right;
    background-position: right;
}
[dir="rtl"] .header-logo {
    float: left;
    background-position: left;
}

.header-menu,
[dir="ltr"] .header-menu,
[dir="auto"] .header-menu {
    float: left;
}
[dir="rtl"] .header-menu {
    float: right;
}

.header-link,
[dir="ltr"] .header-link,
[dir="auto"] .header-link {
    float: left;
    margin-inline-end: 1rem;
}
[dir="rtl"] .header-link {
    float: right;
    margin-inline-start: 1rem;
}

.header-link img {
    width: 2rem;
    height: 2rem;
}

.content {
    margin: 0 auto;
    padding: 0 0.8em;
}

.controls {
    margin: 1em 0;
    text-align: center;
}

.hidden {
    display: none!important;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

a:link,
a:visited {
    color: var(--color-font);
}

.main-wrapper {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: var(--wrapper-max-width);
    min-width: var(--wrapper-min-width);
}
.tile-container {
    display: flex;
    justify-content: center;
    max-width: var(--wrapper-max-width);
    margin: 0 auto;
}
.tile-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,var(--tile-width));
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
}
.tile {
    min-width: var(--tile-width);
    min-height: var(--tile-width);
}
.tile-link {
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-tile);
    transition-property: background,box-shadow,opacity;
    transition-duration: .15s;

    background-color: var(--color-card);
    box-shadow: 0 0.25rem 0 0 var(--color-card-shadow);
}
.tile-icon {
    width: 3.75rem;
    height: 3.75rem;
}
.tile-link:link,
.tile-link:visited {
    text-decoration: none;
}
.tile-link:active .tile {
    box-shadow: none;
    background-color: var(--color-tile-active);
    border-color: var(--color-tile-active);
}
@media only screen and (min-device-width: 1200px) {
    .tile-link:hover .tile {
        background-color: var(--color-tile-hover);
        box-shadow: 0 0 0 0.08em var(--color-tile-hover-border) inset;
        border-color: var(--color-tile-hover-border);
        color: var(--color-tile-hover-font);
    }
}
.tile-title {
    --font-size: 1rem;
    --line-height: 1.378;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-tile-font);
    font-size: var(--font-size);
    font-weight: 500;
    line-height: var(--line-height);
    letter-spacing: .028rem;
    text-align: center;
    min-height: calc(2 * var(--font-size) * var(--line-height));
}


.tile-large-container {
    display: grid;
    padding: 1rem;
    gap: 1rem;
    grid-template-columns: repeat(1,1fr);
}

.tile-large {
    inline-size: 100%;
    display: flex;
    overflow: hidden;
    padding: 0;
    transition-property: background,box-shadow;
    transition-duration: .15s;
    margin-block-start: calc(var(--border-width-tile) * -1);

    background-color: var(--color-card);
    border-radius: var(--border-radius-card);
    box-shadow: 0 0.25rem 0 0 var(--color-card-shadow);

    text-decoration: none;
}

.tile-large-visual {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 7rem;
    block-size: 7rem;
    border-inline-end: 1px solid var(--color-tile-border);
}
.tile-large-visual img {
    max-width: calc(7rem);
    max-height: calc(7rem);
}

.tile-large-description {
    color: var(--color-white);
    font-size: 0.96rem;
    font-weight: 300;
    align-self: center;
    padding: 1rem;
    text-align: start;
}

.tile-large-title {
    font-weight: 500;
    line-height: 1.37;
    letter-spacing: .028;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tile-large-attributes {
    font-size: .875rem;
    line-height: 1.125;
    font-weight: 300;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-block-start: 0.75rem;
}

@media (min-width: 768px) {
    .tile-large-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


.button {
    font-family: inherit;
    font-size: 100%;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    border: var(--border-width-button) solid;
    border-radius: var(--border-radius-button);
    padding: .75rem 1.5rem;
    margin: 0.3em;
    box-shadow: 0 1px 4px #00000052;
}
.button-primary {
    background-color: var(--color-button-primary);
    color: var(--color-button-primary-font);
}
.button-primary:active {
    background-color: var(--color-button-primary-active);
    border-color: var(--color-button-primary-active);
    box-shadow: none;
    color: var(--color-button-primary-font);
    opacity: 0.7;
}
.button-primary-dark {
    background-color: var(--color-button-primary-dark);    
    color: var(--color-button-primary-dark-font);
}
.button-primary-dark:active {
    background-color: var(--color-button-primary-dark-active);
    border-color: var(--color-button-primary-dark-active);
    box-shadow: none;
    color: var(--color-button-primary-dark-font);
    opacity: 0.7;
}
.button-secondary {
    background-color: var(--color-button-secondary);
    color: var(--color-button-secondary-font);
}
.button-secondary:active {
    background-color: var(--color-button-secondary-active);
    border-color: var(--color-button-secondary-active);
    box-shadow: none;
    color: var(--color-button-secondary-font);
    opacity: 0.7;
}
.button-dialog {
    margin: 0.4em 1.2em; 
}

@media only screen and (min-device-width: 1200px) {
    .button-primary:hover {
        background: var(--color-button-primary-hover);
        border-color: var(--color-button-primary-hover-border);
        color: var(--color-button-primary-hover-font);
    }
    .button-secondary:hover {
        background: var(--color-button-secondary-hover);
        border-color: var(--color-button-secondary-hover-border);
        color: var(--color-button-secondary-hover-font);
    }
}