@import "./access.css";


:root {
    --color-green:                      hsl(137, 71%, 34%);
    --color-green-light:                hsl(137, 71%, 41%);
    --color-orange:                     hsl(34, 94%, 52%);
    --color-red:                        hsl(0, 100%, 40%);
    --color-red-light:                  hsl(0, 90%, 49%);
    --color-grey:                       hsl(198, 16%, 84%);
    --color-primary:                    hsl(199, 18%, 40%) ;
    --mobile-accent-color:              hsl(186, 100%, 38%);
    --mobile-accent-color-dark:         hsl(186, 100%, 33%);
}

.md-typeset {
    font-size: .7rem;
}

.md-typeset .mdx-video {
    width: auto;
}

.md-typeset .mdx-video__inner {
    height: 0;
    padding-bottom: 56.138%;
    position: relative;
    width: 100%;
}

.md-typeset .mdx-video iframe {
    border: none;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.md-typeset iframe {
    max-width: 100%;
}

.icons-2 {
    font-size: 2em;
}

.green {
    color:  var(--color-green);
}
.green-light {
    color:  var(--color-green-light);
}
.orange {
    color:  var(--color-orange);
}
.red {
    color:  var(--color-red);
}
.grey {
    color:  var(--color-grey);
}
.primary {
    color:  var(--color-primary);
}
.accent {
    color:  var( --mobile-accent-color-dark);
}