/* main CSS - WiNA Gent vzw */

* {
    margin: 0;
    padding: 0;

    --bierkoning-hue: 50.0;
    --cantus-hue: 75.0;
    --demol-hue: 100.0;
    --drieman-hue: 125.0;
    --forum-hue: 150.0;
    --foutetop-hue: 175.0;
    --glijbaantjes-hue: 200.0;
    --gotcha-hue: 225.0;
    --muilgraaf-hue: 250.0;
    --stock-hue: -30.0;
    --wiki-hue: 0;
    --wish-hue: 25.0;

    --gradient-direction: to top;

    --cantus-background-color: hsl(var(--cantus-hue), 100%, 75%); /* Red */
    --cantus-background-color-light: hsl(var(--cantus-hue), 100%, 90%);
    --cantus-text-color: hsl(var(--cantus-hue), 50%, 21%);
    --cantus-gradient: linear-gradient(var(--gradient-direction), var(--cantus-background-color), var(--cantus-background-color-light));

    --demol-background-color: hsl(var(--demol-hue), 100%, 75%); /* Orange-Red */
    --demol-background-color-light: hsl(var(--demol-hue), 100%, 90%);
    --demol-text-color: hsl(var(--demol-hue), 50%, 21%);
    --demol-gradient: linear-gradient(var(--gradient-direction), var(--demol-background-color), var(--demol-background-color-light));

    --drieman-background-color: hsl(var(--drieman-hue), 94%, 75%); /* Yellow */
    --drieman-background-color-light: hsl(var(--drieman-hue), 100%, 90%);
    --drieman-text-color: hsl(var(--drieman-hue), 50%, 21%);
    --drieman-gradient: linear-gradient(var(--gradient-direction), var(--drieman-background-color), var(--drieman-background-color-light));

    --bierkoning-background-color: hsl(var(--bierkoning-hue), 100%, 75%); /* Green */
    --bierkoning-background-color-light: hsl(var(--bierkoning-hue), 100%, 90%);
    --bierkoning-text-color: hsl(var(--bierkoning-hue), 10050%, 21%);
    --bierkoning-gradient: linear-gradient(var(--gradient-direction), var(--bierkoning-background-color), var(--bierkoning-background-color-light));

    --forum-background-color: hsl(var(--forum-hue), 100%, 75%); /* Greenish Cyan */
    --forum-background-color-light: hsl(var(--forum-hue), 100%, 90%);
    --forum-text-color: hsl(var(--forum-hue), 10050%, 21%);
    --forum-gradient: linear-gradient(var(--gradient-direction), var(--forum-background-color), var(--forum-background-color-light));

    --foutetop-background-color: hsl(var(--foutetop-hue), 100%, 75%); /* Cyan */
    --foutetop-background-color-light: hsl(var(--foutetop-hue), 100%, 90%);
    --foutetop-text-color: hsl(var(--foutetop-hue), 50%, 21%);
    --foutetop-gradient: linear-gradient(var(--gradient-direction), var(--foutetop-background-color), var(--foutetop-background-color-light));

    --glijbaantjes-background-color: hsl(var(--glijbaantjes-hue), 100%, 75%); /* Sky Blue */
    --glijbaantjes-background-color-light: hsl(var(--glijbaantjes-hue), 100%, 90%);
    --glijbaantjes-text-color: hsl(var(--glijbaantjes-hue), 50%, 21%);
    --glijbaantjes-gradient: linear-gradient(var(--gradient-direction), var(--glijbaantjes-background-color), var(--glijbaantjes-background-color-light));

    --gotcha-background-color: hsl(var(--gotcha-hue), 100%, 75%); /* Blue */
    --gotcha-background-color-light: hsl(var(--gotcha-hue), 100%, 90%);
    --gotcha-text-color: hsl(var(--gotcha-hue), 50%, 21%);
    --gotcha-gradient: linear-gradient(var(--gradient-direction), var(--gotcha-background-color), var(--gotcha-background-color-light));

    --muilgraaf-background-color: hsl(var(--muilgraaf-hue), 100%, 75%); /* Violet */
    --muilgraaf-background-color-light: hsl(var(--muilgraaf-hue), 100%, 90%);
    --muilgraaf-text-color: hsl(var(--muilgraaf-hue), 50%, 21%);
    --muilgraaf-gradient: linear-gradient(var(--gradient-direction), var(--muilgraaf-background-color), var(--muilgraaf-background-color-light));

    --stock-background-color: hsl(var(--stock-hue), 100%, 75%); /* Magenta */
    --stock-background-color-light: hsl(var(--stock-hue), 100%, 90%);
    --stock-text-color: hsl(var(--stock-hue), 50%, 21%);
    --stock-gradient: linear-gradient(var(--gradient-direction), var(--stock-background-color), var(--stock-background-color-light));

    --wiki-background-color: hsl(var(--wiki-hue), 100%, 75%); /* Rose */
    --wiki-background-color-light: hsl(var(--wiki-hue), 100%, 90%);
    --wiki-text-color: hsl(var(--wiki-hue), 50%, 21%);
    --wiki-gradient: linear-gradient(var(--gradient-direction), var(--wiki-background-color), var(--wiki-background-color-light));

    --wish-background-color: hsl(var(--wish-hue), 100%, 75%); /* Reddish */
    --wish-background-color-light: hsl(var(--wish-hue), 100%, 90%);
    --wish-text-color: hsl(var(--wish-hue), 50%, 21%);
    --wish-gradient: linear-gradient(var(--gradient-direction), var(--wish-background-color), var(--wish-background-color-light));
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

.is-primary {
    color: white !important;
    background-color: black !important;
}

.is-primary:hover {
    color: black !important;
    background-color: #FFE01B !important;
}

.has-background-primary {
    background: linear-gradient(to top right, #c5ae02 10%, black) !important;
}

.main-content {
    margin: calc(74px + 2rem) 10vw 0;
    flex-grow: 1;
}

@media (max-width: 768px) {
    .main-content {
        margin: calc(74px + 2rem) 0vw 0;
        flex-grow: 1;
    }

    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .table tbody, .table thead {
        display: table-header-group;
        width: 100%;
    }
}

.tabcontent {
    display: none;
}

.home-app-icon.bierkoning-app, .sidebar-app-icon.bierkoning-app {
    background: var(--bierkoning-gradient);
    color: var(--bierkoning-text-color);
}

.bierkoning-app:hover, .bierkoning-app:focus, .bierkoning-app:active {
    box-shadow: 0 0 10px var(--bierkoning-text-color);
}

.home-app-icon.cantus-app, .sidebar-app-icon.cantus-app {
    background: var(--cantus-gradient);
    color: var(--cantus-text-color);
}

.cantus-app:hover, .cantus-app:focus, .cantus-app:active {
    box-shadow: 0 0 10px var(--cantus-text-color);
}

.home-app-icon.demol-app, .sidebar-app-icon.demol-app {
    background: var(--demol-gradient);
    color: var(--demol-text-color);
}

.demol-app:hover, .demol-app:focus, .demol-app:active {
    box-shadow: 0 0 10px var(--demol-text-color);
}

.home-app-icon.drieman-app, .sidebar-app-icon.drieman-app {
    background: var(--drieman-gradient);
    color: var(--drieman-text-color);
}

.drieman-app:hover, .drieman-app:focus, .drieman-app:active {
    box-shadow: 0 0 10px var(--drieman-text-color);
}

.home-app-icon.foutetop-app, .sidebar-app-icon.foutetop-app {
    background: var(--foutetop-gradient);
    color: var(--foutetop-text-color);
}

.foutetop-app:hover, .foutetop-app:focus, .foutetop-app:active {
    box-shadow: 0 0 10px var(--foutetop-text-color);
}

.home-app-icon.forum-app, .sidebar-app-icon.forum-app {
    background: var(--forum-gradient);
    color: var(--forum-text-color);
}

.forum-app:hover, .forum-app:focus, .forum-app:active {
    box-shadow: 0 0 10px var(--forum-text-color);
}

.home-app-icon.glijbaantjes-app, .sidebar-app-icon.glijbaantjes-app {
    background: var(--glijbaantjes-gradient);
    color: var(--glijbaantjes-text-color);
}

.glijbaantjes-app:hover, .glijbaantjes-app:focus, .glijbaantjes-app:active {
    box-shadow: 0 0 10px var(--glijbaantjes-text-color);
}

.home-app-icon.gotcha-app, .sidebar-app-icon.gotcha-app {
    background: var(--gotcha-gradient);
    color: var(--gotcha-text-color);
}

.gotcha-app:hover, .gotcha-app:focus, .gotcha-app:active {
    box-shadow: 0 0 10px var(--gotcha-text-color);
}

.home-app-icon.muilgraaf-app, .sidebar-app-icon.muilgraaf-app {
    background: var(--muilgraaf-gradient);
    color: var(--muilgraaf-text-color);
}

.muilgraaf-app:hover, .muilgraaf-app:focus, .muilgraaf-app:active {
    box-shadow: 0 0 10px var(--muilgraaf-text-color);
}

.home-app-icon.stock-app, .sidebar-app-icon.stock-app {
    background: var(--stock-gradient);
    color: var(--stock-text-color);
}

.stock-app:hover, .stock-app:focus, .stock-app:active {
    box-shadow: 0 0 10px var(--stock-text-color);
}

.home-app-icon.wiki-app, .sidebar-app-icon.wiki-app {
    background: var(--wiki-gradient);
    color: var(--wiki-text-color);
}

.wiki-app:hover, .wiki-app:focus, .wiki-app:active {
    box-shadow: 0 0 10px var(--wiki-text-color);
}

.home-app-icon.wish-app, .sidebar-app-icon.wish-app {
    background: var(--wish-gradient);
    color: var(--wish-text-color);
}

.wish-app:hover, .wish-app:focus, .wish-app:active {
    box-shadow: 0 0 10px var(--wish-text-color);
}