@font-face {
    font-family: 'Hobo Std';
    src: url('../fonts/HoboStd.eot');
    src: url('../fonts/HoboStd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HoboStd.woff2') format('woff2'),
         url('../fonts/HoboStd.woff') format('woff'),
         url('../fonts/HoboStd.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-brand: #0081c4;
    --color-text: #293236;
    --color-text-light: #909090;
}

.funky-font {
    font-family: 'Hobo Std', Helvetica, Verdana, Arial;
}

.text-color-blue       { color: var(--color-brand); }
.text-color-white      { color: #ffffff; }
.text-color-dark-grey  { color: var(--color-text); }
.text-color-light-grey { color: var(--color-text-light); }

html, body {
    font-family: Helvetica, Verdana, Arial;
    color: var(--color-text);
    min-height: 100%;
}

body {
    background-image: url('../images/achtergrond-3.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    animation: pageIn 0.3s ease-in;
}

@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#main-menu {
    background-color: var(--color-brand);
    padding-left: 8px;
    padding-right: 8px;
}

@media (min-width: 768px) {
    #main-menu {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 1200px) {
    #main-menu {
        padding-left: 30px;
        padding-right: 30px;
    }
}

#main-menu a {
    color: #fff;
}

#main-menu a.active,
#main-menu a:hover {
    color: var(--color-text);
}

#main-menu .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

#main-menu .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c 255%2c 255%2c 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#main-menu .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

#main-menu .nav-item.dropdown .nav-link {
    line-height: 25px;
    padding-top: 0;
    padding-bottom: 0;
}

#main-menu .dropdown-menu {
    background-color: var(--color-brand);
    border-color: #fff;
    min-width: 0;
}

#main-menu .dropdown-menu .dropdown-item {
    color: #fff;
}

#main-menu .dropdown-menu .dropdown-item:hover {
    background-color: var(--color-brand);
    color: var(--color-text);
}

img.social-icon {
    filter: invert(1);
}

a.active img.social-icon,
a:hover img.social-icon {
    filter: invert(0);
}

#main-outline {
    border: 8px solid var(--color-brand);
    border-top: none;
    min-height: 50vh;
    background-color: rgba(255, 255, 255, 0.88);
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 768px) {
    #main-outline {
        border-width: 15px;
    }
}

@media (min-width: 1200px) {
    #main-outline {
        border-width: 30px;
    }
}

.main-header {
    font-size: 1.8em;
    color: var(--color-brand);
}

@media (min-width: 768px) {
    .main-header {
        font-size: 2.4em;
    }
}

@media (min-width: 1200px) {
    .main-header {
        font-size: 3em;
    }
}

footer {
    text-align: center;
    text-shadow: 1px 1px var(--color-text);
}

.gallery-item {
    display: block;
    overflow: hidden;
}

.gallery-thumb {
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-thumb img {
    transform: scale(1.05);
}