:root{
    --primary: black;
    --secondairy: white;
    --accent: linear-gradient(to right, #F9F295 , #E0AA3E, #B88A44);
}

body {
    background-image: url(../img/Background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    /*special tekst from the missus*/
    font-family: "Antic Didone", serif;
    font-weight: 200;
    font-style: normal;
    text-align: center;
}

body.index {
    background-image: url(../img/Welcome.jpg);
}

/*google fonts for home page requested by the missus*/
main .index {
    font-family: "Clicker Script", cursive;
    font-weight: 400;
    font-style: normal;
    color: var(--secondairy);
    font-size: 7rem;
    margin-bottom: 3rem;
}

.navbar, footer {
    background-color: var(--primary);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.navbar a, footer p{    
    text-decoration-line: none;
    color: var(--secondairy);
}

.navbar-toggler-icon {
    background-image: url(../img/toggler.png);
}

.nav-link:focus, .nav-link:hover {
    background-image: var(--accent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.nav-link {
    display: block;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

main {    
    width: 55%;
    margin: 5rem auto;
    padding: 1rem;
    /*text-shadow: var(--secondairy) 0.1rem 0.2rem 0.2rem;*/
}

.locatie, .programmatie, .gastenlijst, .faq {
    margin-bottom: 3rem;
}

.faq p:first-child{
    font-weight: 400;
}

button {
    width: 60%;
    background-color: var(--primary);
    text-decoration-line: none;
    color: var(--secondairy);
    border-radius: 1rem;
    padding: 0.5rem 2rem;
    margin: 0.5rem;
    border: none;
}

img {
    width: 70%
}

.mb-3 {
    display: flex;
    justify-self: center;
    flex-direction: column;
    width: 70%;  
}
    
.mb-3 input{
    text-align: center;     
    margin-bottom: 1.5rem;
}

::placeholder {
    text-align: center; 
}


@media (max-width: 992px) {     
    main {    
        width: 55%;
        margin: 1rem auto;
        padding: 0.2rem;
    }

    main .index {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .locatie, .programmatie, .gastenlijst, .faq {
        margin-bottom: 3rem;
    }
    
    button {
        width: 60%;
        background-color: var(--primary);
        text-decoration-line: none;
        color: var(--secondairy);
        border-radius: 1rem;
        padding: 0.5rem 2rem;
        margin: 0.5rem;
        border: none;
    }
    
    img {
        width: 70%
    }
    
    .mb-3 {
        display: flex;
        justify-self: center;
        flex-direction: column;
        width: 70%;  
    }
        
    .mb-3 input{
        text-align: center;     
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {    
    main {    
        width: 55%;
        margin: 1.5rem auto;
        padding: 0.5rem;
    }

    main .index {
        font-size: 4.5rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    main {   
        width: 55%;
        margin: 2rem auto;
        padding: 0.75rem;
    }

    main .index {
        font-size: 6rem;
        margin-bottom: 2rem;
    }
}