.md-nav {
    font-size: 14px;
    line-height: 1.6;
}

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

.md-grid {
  max-width: 1500px;
}

.text-center {
    text-align: center !important;
}

.md-typeset .md-button {
    background-color: var(--md-primary-bg-color);
}

.md-typeset .md-button--primary {
    background-color: var(--md-primary-fg-color);
}

.inline-icon {
    display: flex;
    align-items: center
}

.inline-icon > svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    max-height: 0.8rem;
}

.contact-list {
    list-style-type: none !important;
}

[data-md-state="shadow"] {
    box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2) !important;
    transition: none !important;
}

/**
 * Replace {: style="height:100%;width:100%"} with { .image-100-border } in images.
 */
:root {
    --image-border-colour: lightgrey;
    --image-border-width: 4px;
    --image-border-style: solid; /* dotted dashed solid double groove ridge inset outset none hidden*/
    --image-border-radius: 10px;
}

.image-100-noborder {
    height: 100%;
    width: 100%;
}

.text-image {
    border: 2px solid red;
    margin-top: 0px;
}

.image-100-border {
    border: var(--image-border-width) var(--image-border-style) var(--image-border-colour);
    border-radius: var(--image-border-radius);
    height: 100%;
    width: 100%;
}

.image-75-border {
    border: var(--image-border-width) var(--image-border-style) var(--image-border-colour);
    border-radius: var(--image-border-radius);
    height: 75%;
    width: 75%;
}

.image-50-border {
    border: var(--image-border-width) var(--image-border-style) var(--image-border-colour);
    border-radius: var(--image-border-radius);
    height: 50%;
    width: 50%;
}

.image-50-border-center {
    border: var(--image-border-width) var(--image-border-style) var(--image-border-colour);
    border-radius: var(--image-border-radius);
    height: 50%;
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-35-border {
    border: var(--image-border-width) var(--image-border-style) var(--image-border-colour);
    border-radius: var(--image-border-radius);
    height: 35%;
    width: 35%;
}

.youtube-table {
    border: 20px;
    border-spacing: 10px;
    border-radius: var(--image-border-radius);
}

/**
 * Used to display Eva icons inline.
 */
.eva-icon-inline {
    position: relative;
    top:4px;
    height:3%;
    width:3%
}

/*.holder{
    width: 392px;
    height: 220.5px;
    position: relative;
}

.frame{
    width: 100%;
    height: 100%;
}

.bar{
    position: absolute;
    top: 180.5px;
    left: 0px;
    width: 200px;
    height: 40px;
    background-color: black;
    opacity: 1;
}
*/
[data-md-color-scheme="hac-light"] {

    /* Default color shades */
    --md-default-bg-color:              hsla(0, 0%, 100%, 1);
    --md-default-bg-color--light:       hsla(0, 0%, 100%, 0.7);
    --md-default-bg-color--lighter:     hsla(0, 0%, 100%, 0.3);
    --md-default-bg-color--lightest:    hsla(0, 0%, 100%, 0.12);

    /* Primary color shades */
    --md-primary-fg-color:              hsla(269, 55%, 33%, 1);
    --md-primary-fg-color--light:       hsla(269, 56%, 43%, 1);
    --md-primary-fg-color--dark:        hsla(269, 55%, 19%, 1);
    --md-primary-bg-color:              hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light:       hsla(269, 55%, 33%, 0.7);

    /* Accent color shades */
    --md-accent-fg-color:               hsla(269, 55%, 33%, 0.87);
    --md-accent-fg-color--transparent:  hsla(269, 55%, 33%, 0.1);
    --md-accent-bg-color:               hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light:        hsla(0, 0%, 100%, 0.7);

    /* Footer color shades */
    --md-footer-fg-color:               hsla(269, 55%, 33%, 1);
    --md-footer-fg-color--light:        hsla(269, 55%, 33%, 0.7);
    --md-footer-fg-color--lighter:      hsla(269, 55%, 33%, 0.3);
    --md-footer-bg-color:               hsla(210, 37%, 97%, 1);
    --md-footer-bg-color--dark:         hsla(0, 0%, 100%, 0.7);

    /* Typeset color shades */
    --md-typeset-color:                 var(--md-default-fg-color);
    --md-typeset-a-color:               var(--md-footer-fg-color);

    /* Note box colors */
    --md-admonition-bg-color:           var(--md-default-bg-color--lighter);
    --md-admonition-fg-color:           var(--md-default-fg-color);
}

[data-md-color-scheme="hac-dark"] {

    /* Default color shades */
    --md-default-fg-color:              hsla(0, 0%, 100%, 1);
    --md-default-fg-color--light:       hsla(0, 0%, 100%, 0.7);
    --md-default-fg-color--lighter:     hsla(0, 0%, 100%, 0.3);
    --md-default-fg-color--lightest:    hsla(0, 0%, 100%, 0.12);
    --md-default-bg-color:              hsla(232,15%,21%,1);
    --md-default-bg-color--light:       hsla(232,15%,21%,0.54);
    --md-default-bg-color--lighter:     hsla(232,15%,21%,0.26);
    --md-default-bg-color--lightest:    hsla(232,15%,21%,0.07);

    /* Primary color shades */
    --md-primary-fg-color:              hsla(269, 55%, 33%, 1);;
    --md-primary-bg-color:              hsla(0, 0%, 100%, 1);

    /* Code highlighting color shades */
    --md-code-fg-color:                 hsla(0, 0%, 96%, 1);
    --md-code-bg-color:                 hsla(200, 18%, 26%, 1);

    /* Footer color shades */
    --md-footer-fg-color:               hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light:        hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter:      hsla(0, 0%, 100%, 0.3);
    --md-footer-bg-color:               hsla(269, 55%, 33%, 1);
    --md-footer-bg-color--dark:         hsla(269, 55%, 33%, 1);

    /* Typeset color shades */
    --md-typeset-color:                 var(--md-default-fg-color);
    --md-typeset-a-color:               hsla(269, 92%, 72%, 1) !important;

    /* Note box colors */
    --md-admonition-bg-color:           var(--md-default-bg-color--lighter);
    --md-admonition-fg-color:           var(--md-default-fg-color);
}