:root {
    /* Definition of variables in CSS isolation is not working! */
    /* Colors */
    --color-main-dark: #67000D; /* bordeaux rood */
    --color-main-light: #CC7A85; /* pastel variant van bordeaux rood */
    --color-main-alternative: #335C4A; /* groen */
    --color-main-background: #eddede; /* zand */
    --color-text-dark: #000000; /* black */
    --color-text-light: #ffffff; /* white */
    --color-text-accent: #67000D; /* bordeaux rood */
    --color-link: blue;
    --color-link-hover: #67000D; /* bordeaux rood */
    /* 62.5% of 16 px = 10 px*/
    font-size: 62.5%;
    /* Measurements */
    --header-height: 6rem;
    --padding: 1rem;
    --margin: 2rem;
    --iconsize: 80%; /* for icons of 512 px*/
    /* Variables for old Acrylgieten pages */
    --art-width: 300px;
    --art-height: calc(1.5 * var(--art-width));
    --art-icon: 80px;
}

html {
    /*font-size: calc(62.5% * 1.6);*/
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    /*color: var(--color-main-1-text);*/
    background-color: var(--color-main-background);
    /* Fonts */
    /* Preferred font is Arial. If not available Helvetica is used. */
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--color-link);
    text-decoration: underline;
}

    a:hover {
        color: var(--color-link-hover)
    }

    /* Specifiek voor index.html */
.align-content-center {
    width: 280px;
    aspect-ratio: 1/1;
    display: flex;
}
    a.fill-div {
        display: block;
        color: #fff;
        height: 280px;
        width: 100%;
        text-decoration: none;
        font-size: 24px;
        line-height: 280px;
        align-self: center;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.bg-nosuma {
    background-color: var(--color-main-dark);
    color: var(--color-text-light);
}

.header-logo-img {
    width: var(--header-height);
    height: var(--header-height);

    background: url('../img/logos/NS-wit.png') no-repeat;
    background-size: contain;
}

.dropdown-menu {
    background-color: var(--color-main-light);
    color: var(--color-text-light);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .55);
}

.dropdown-item:hover {
    background-color: var(--color-main-light);
}
    /*Medium (md) specifics (tablet landscape and wider)*/
    @media (min-width: 768px) {
    }

    .nav-link {
    font-size: 2rem;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

 /*Large (lg) specifics (laptop/pc)*/ 
@media (min-width: 992px) {
    .header-logo-img {
        width: calc(3 * var(--header-height));
        height: calc(2 * var(--header-height));
        background: url('../img/logos/NoSuma-wit.png') no-repeat;
        background-size: contain;
    }

}