@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

body {
    font-family: 'Anton', sans-serif;

}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}
html {
    background-color: #D6D6D6;
}

/* Nav CSS */
.navbar{
    background-color: #A7713F;
   

}

nav a{

}

nav.navbar {
    display: flex;

}

.navbar a {
    color: #fff;
    align-content: center;
}

.navbar .logo {
    max-height: none;
}

a.navbar-item:hover {
    background-color: transparent;
    color: #ffffff;
    text-decoration: underline;
}

/* Home page header CSS */
.hero.home-header {
    background-image: url("../images/wilma-home-header.png");
    background-color: transparent;
    object-fit: cover;
    background-size: 100%;
    height: 60vh;
}

.hero-body h1, p{
    text-shadow: black 1px 3px 4px;
}

.reserve-button {
    position: relative;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #2B2B2B;
    border: none;
    z-index: 1;
    transition: transform 600ms ease-in-out, color 900ms ease-in-out;
    overflow: hidden;
    width: 450px;
}



.reserve-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms ease-in-out;
    border-radius: inherit;
}

.reserve-button:hover::before,
.reserve-button:focus::before {
    transform: scaleX(1);
    transition: transform 900ms ease-in-out;

}

.reserve-button:hover {
    color: #2B2B2B;
}

section .examples {
    color: #2B2B2B;
}
.notification.is-info.example-projects{
    background-color: #2B2B2B;
    color: #fff;
    border-radius: 20px;
}

/* footer CSS */
footer {

    position: sticky;


}
a{
    position: sticky;
}
footer .hero.footer-hero {
    background-color: #2B2B2B;
}

.footer-start p {
    transition: all ease-in-out 300ms;
}

.footer-start p:hover {
    margin-left: 5px;

    transition: all ease-in-out 300ms;
}

.footer-end img:hover {
    border-bottom: #ffffff 2px solid;
}

/* Login CSS */

.login-hero.hero {
    background-color: transparent;
}

.login-hero.hero p {
    color: #2B2B2B;
}

.login-hero.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-primary strong {
    color: #A7713F;
}

.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current):hover, .hero.is-primary strong {
    color: #ffffff;
}




.login-hero.hero.is-primary .title {
    color: #2B2B2B;
}



.button.login-button.is-link
{
    background-color: #2B2B2B;
}

.button.login-button.is-link:hover
{
    background-color: #505050;

}



.login-hero p{
    text-decoration: none;
    color: #2B2B2B;
    text-shadow: none;
}

.login-hero a {
    color: #505050;

}

a.make-account:hover {
    text-decoration: underline;
}
.label {
    color: #2B2B2B;
}

/* register CSS */

.register-hero.hero {
    background-color: transparent;
    text-shadow: none;
}

.register-hero.hero.is-primary .title {
    color: #2B2B2B;
}

.register-button.button.is-link {
    background-color: #2B2B2B;
    border-color: transparent;
    color: #fff;
}

.register-button.button.is-link:hover {
    background-color: #505050;
    border-color: transparent;
    color: #fff;
}

.checkbox {
    color: #2B2B2B;
}

/* informatie CSS */
.information-hero.hero{
    background-color: transparent;

}
.notification.is-danger.info-section {
    background-color: #2B2B2B;
    border-radius: 15px;
}

.notification.is-danger.info-section p{
    color: #fff;
}

.hero-body h2 {
    color: #2B2B2B;
}
.terms {
    color: #ffffff;

}

h6{
    color: white;
    font-size: 22px;
}
.checkbox:hover {
    cursor: default;
}


.contact{
    flex: auto;
   font-size: 4rem;
    text-align: center;
    margin-top: 4rem;
}






footer {
    margin-top: auto;
}

/* availblities CSS */

.availblities{
    min-height: 500px;
    color: #505050;
}
/* Admin css */

.timetable{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 3rem;



}