@import "colors.css";

@font-face {
   font-family:'Oswald';
   src: url('Oswald.ttf');
}

@font-face {
    font-family:'magnolia';
    src: url('magnolia-script.ttf');
}

body {
    /* Achtergrond van de pagina */
    
    background-size: 100%;
    font-family:'Oswald';
    font-size: 20px;
    /*font-family: "Arial Black", serif;*/
    color: white;
    background: url("../img/backgroundHHS.png") no-repeat fixed bottom;
    background-size: cover;
    background-color: var(--background);

}
section {
    /* De ruimte tussen elke section */
    margin-bottom: 100px;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.border_radius{
    
}
.padding_bottom{
    padding-bottom: 50px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
/* Lekker wat ruimte tussen sponsoren */
.sponsor {
    margin-top: 5px;
    margin-bottom: 5px;
}

.img-sponsor {
    width: 100%;
}

.caption {
    /* Caption of the thumbnails */
    color: white;
}

.table-prices {
    margin: 10px;
    text-align: right;
}

.container-fluid {
    /* Breedte van de sections */
    width: 65%;
    padding-top: 25px;
    padding-bottom: 50px;
}

.container-background-color {
    background-color: #3e5b95;
    opacity: 90%;
}

footer {
    background-color:  #3e5b95 !important;
}

.fancy-border {
    /* Soort border die om alle sections heen zit */
    /*border: 5px dashed #152c61
    border-radius: 5px;*/
}

#mainNav {
    background-color: white
}

.nav-link {
    /* Kleur van de tekst in de nav-bar */
    font-family:'Oswald';
    font-size: 100%;
    color: rgb(0, 0, 0) !important;
}



.navbar-brand {
    /* Kleur van de tekst in de navbar linksboven */
    color: white !important
}

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

.text-big {
    font-family:'magnolia';
    font-size: 250%;
    overflow: hidden
}

.text-medium {
    font-family:'magnolia';
    font-size: 200%;
}

/* Deze dingen gelden alleen voor kleine schermen zoals mobiel (kleiner dan 992px) */
@media (max-width: 992px) {
    .container-fluid {
        /* Breedte van de sections op kleinere schermen*/
        width: 95%;
    }

    .calendar-size {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .text-big {
        font-size: 175%;
    }

    .text-medium {
        font-size: 125%;
    }
}