:root {

    --c-rv-pink: #f115d7;
    --c-rv-pink-active: #ff00aa;
    --c-rv-blue: #2c79fd;
    --c-rv-blue-active: #008cff;
    
    --c-primary: var(--c-rv-pink);
    --c-primary-active: var(--c-rv-pink-active);
    --c-highlight: var(--c-rv-blue);
    --c-highlight-active: var(--c-rv-blue-active);

    --c-darkest: #111;
    --c-darker: #222;
    --c-dark: #363636;
    
    --c-lightest: #f8f9fa;
    --c-lighter: #eee;
    --c-light: #ddd;

    --font-stack-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-stack-serif: Georgia, Times, "Times New Roman", serif;
    --font-stack-impact: Impact, Haettenschweiler, "Arial Black", sans-serif;
    --font-stack-elegant: Palatino, "Palatino Linotype", "Book Antiqua", serif;
    --font-stack-friendly-sans: "Trebuchet MS", Verdana, sans-serif;
    --font-stack-monospace: "Andale Mono", Monaco, "Courier New", monospace;
}

.rv-gradient-background {
    background: rgb(241,21,215);
    background: linear-gradient(90deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: rgb(241,21,215);
    background: -moz-linear-gradient(90deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: linear-gradient(90deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f115d7",endColorstr="#2c79fd",GradientType=1);
}

.rv-gradient-background-reverse {
    background: rgb(241,21,215);
    background: linear-gradient(270deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: -moz-linear-gradient(270deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    background: linear-gradient(270deg, rgba(241,21,215,1) 0%, rgba(44,121,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2c79fd",endColorstr="#f115d7",GradientType=1);
}

@media screen {
    :root {

        color-scheme: light dark;

        --c-page-background: light-dark(var(--c-light), var(--c-darkest));
        --c-section-background: light-dark(var(--c-lighter), var(--c-darker));
        --c-card-background: light-dark(var(--c-lightest), var(--c-dark));

        --c-text-heading: light-dark(var(--c-darkest), var(--c-light));
        --c-text-emphasis: light-dark(var(--c-darker), var(--c-lighter));
        --c-text-body: light-dark(var(--c-dark), var(--c-lighest));

        --c-primary: light-dark(var(--c-rv-pink), var(--c-rv-blue));
        --c-highlight: light-dark(var(--c-rv-blue), var(--c-rv-pink));

        --shadow-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
    }

    body {
        background-color: var(--c-section-background);
        color: var(--c-text-body);
    }


    h1, h2, h3, h4, h5, h6 {
        color: var(--c-text-heading);
        font-weight: bold;
    }

    strong {
        color: var(--c-text-heading);
        font-weight: bold;
    }

    a, a:visited {
        color: var(--c-rv-blue);
    }
    a:hover, a:active {
        color: var(--c-rv-pink);
    }
}

* {
    font-family: var(--font-stack-sans);
    box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
}

body {
    font-size: 14px;
    line-height: 1.4rem;
}

h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4, h5, h6 {
    font-size: 1rem;
}

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

div.clamp {
    max-width: 120ch;
    margin: 2em auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

table {
    border-collapse: collapse;
}

th {
    font-weight: bold;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.5em;
    border: solid 1px #888;
}

div.line{
    width: 120ch;
    height: 1px
}

@media not screen {
    div.line {
        display: none;
    }
}

header {
    h1 {
        margin-bottom: 0.4rem;
    }
    .product-ident-strapline {
        margin-top: 0;
    }
}

footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    nav {
        flex: 1;
        text-align: center;
        &:first-of-type {
            text-align: left;
        }
        &:last-of-type {
            text-align: right;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    }
}