html,body
{
          margin:0; 
          padding: 0; 
}

body
{
            overflow-x: hidden; 
             font-family: Noto Serif Devanagari;
             color: #7a6a55;
             font-size: 22px;
}

p,h3,ul,form
{
            text-align:left;
}

input, textarea, select, button
{
            font-family: inherit;
            color: inherit;
            font-size: inherit;
}

h2
{
            font-size:40px;
            color: #B98C45;
            scroll-margin-top: 170px;
}

p
{
            width:1000px;
            margin:0px auto 100px auto;
}

div#hamburger
{       
          position:fixed;
	        display:none;
	        cursor:pointer;
	        height:20px;
	        width:30px;
	        line-height:0.75;
	        right:50px;
	        top:68px;
	        font-size: 30px;
	        box-sizing: border-box;
	        z-index:102;
	        background:#fff;
	        border:0px solid black;
	        padding-left:2px;
}

p#spreuk
{
            font-size: 28px;
            margin:30px auto 80px auto;
            font-style:oblique;
}

div#boven
{
            width: 100%;
            min-height:130px;
            overflow:hidden;
}

img#logo
{
            position: fixed;
            left:45px;
            top:30px;
            width:300px;
            max-height:200px;
            z-index:2;
}

div#menu
{
            position:fixed;
            height:130px;
            width:100%;
            left:0;
            top:0;
            font-size: 15px;
            padding-top:65px;
            padding-right:30px;
            text-align:right;
            box-sizing: border-box; 
            background:#fff;
            box-shadow:  0 1px 3px grey;
            border-bottom: 1px solid #B98C45;
            z-index:1;
}

div#menu span
{
            padding-right:50px;
} 

div#menu span a
{
            color: inherit;         
            text-decoration: none;  
            font: inherit;     
            
            position: relative;
            padding: 10px 2px;
} 

div#menu span a::after
{
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 10px;
    height: 2px;
    background: #B98C45;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    
}


div#menu span:hover
{
           /* text-decoration: underline ; */
            color: #B98C45;
} 

div#menu span a:hover::after
{
    transform: scaleX(1);
}

div#hmenu
{
          display:none;
          position:fixed;
	        height:290px;
	        width:200px;
	        right:0;
	        top:130px;
	        font-size: 15px;
	        color: #605343;
	        box-sizing: border-box; /* Essentiële regel */
	        z-index:100;
	        background:#fff;
	        box-shadow: -2.5px 4px 3px -2px rgba(128, 128, 128, 0.5);
	        
	      


}

div#hmenu span
{
        display:block;
        padding-top: 20px;
        padding-left: 15px;
}

div#hmenu span a
{
        display: block;
        color: inherit;   
         text-decoration: none; 
         font: inherit;     
}

div#hero
{
            margin-top:130px;
}

img#balzaal
{
            width: 100%;
            height: auto;
            display: block;
            clip-path: inset(22% 0% 0% 0%); 
            margin-top: -22%; 
}

div#inhoud
{
            position: relative;
            width:100%;
            text-align:center;
            padding-top: 30px;
            box-shadow:  0 -1px 3px black;
            box-sizing: border-box; 
}

/* Width niet op 100% zetten! Want dan beweegt het menu mee met scrollen. */
ul
{
            max-width:450px;
            margin:0px auto 100px auto;
}

ul a 
{
            display: block;
            margin-bottom: 2px;
            color: #c28d3d;
            font-style: italic;
            text-decoration: none;
}

ul a:hover
{
            text-decoration:underline;
}

form
{
            width:100%;
            max-width:700px;
            height:700px;
            display: block;
            margin: -50px auto 50px auto;
}

input[type="text"], 
input[type="tel"], 
input[type="email"], 
textarea
{
            display: block;
            width:100%;
            max-width:700px;
            border-radius: 5px;
            border:1px solid #7a6a55;
            padding-left:10px;
            outline: none; 
}

input[type="text"]:focus ,  
input[type="tel"]:focus, 
input[type="email"]:focus,  
textarea:focus
{
            border: 2px solid #B98C45;
}

input[type="text"], 
input[type="tel"],  
input[type="email"]
{
            padding-top: 5px;
            padding-bottom: 0px;
            box-sizing: border-box; 
            margin:0px 0px 20px 0px;
}

input[type="checkbox"] 
{
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            margin: 0px 0px 20px 0px;
            border: 1px solid #7a6a55;
            border-radius: 5px;
            background-color: white;
            cursor: pointer;
            /* Zorgt dat het vinkje exact in het midden komt te staan */
            display: inline-grid;
            place-content: center;
}

/* NIEUW: Dit is het onzichtbare vinkje in de basisfunctionaliteit */
input[type="checkbox"]::before 
{
            content: "";
            width: 12px;
            height: 12px;
            transform: scale(0); /* Onzichtbaar maken */
            transition: 100ms transform ease-in-out;
            background-color: #7a6a55; /* Kleur van het vinkje */

            /* Deze code snijdt het vierkantje bij tot een echt vinkje */
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* NIEUW: Maak het vinkje zichtbaar zodra je klikt */
input[type="checkbox"]:checked::before 
{
            transform: scale(1); /* Wordt nu zichtbaar */
}

textarea
{
            height:300px;
}

label
{
            display:inline-block;
            padding-left:10px;
            margin:0;
}

input[type="submit"]
{
            display:block;
            margin-top:20px;
            padding:2px 8px 0px 8px;
}

div#inhoud::before
{
            content: "";
            position: absolute;
            inset: 0;
            z-index:-1;
            width:100%;

            /* TEST */
            -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 250px
            );

            mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 250px
            );

            background-image:
            linear-gradient(
            to right,
            rgba(255,255,255,0.8) 0%,
            #fff 15%,
            #fff 85%,
            rgba(255,255,255,0.8) 100%
            ),
            url("balzaal.jpg");

            background-size:
            100% 100%,   /* gradient */
            800% 100%;   /* foto */

            background-position:
            center top,
            center top;

            background-repeat:
            no-repeat,
            no-repeat;
}

#backToTop
{
            position: fixed;
            font-size:70px;
            text-decoration:none;
            opacity: 0;
            visibility: hidden;

            transition:
            opacity .35s,
            visibility .35s,
            transform .25s;

            transform: translateY(10px);

            width: 0;
            height: 0;
            right: 30px;
            bottom: 30px;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 20px solid #8a7156;
}

#backToTop.visible 
{
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
}

#backToTop::after 
{
            content: "";
            position: absolute;
            left: -15px;
            top: 21.5px;
            width: 30px;
            height: 2.4px;
            background: #8a7156;
            border-radius: 1px;
}



/* specifiek voor manifest-pagina */

.page-b p
{
            width:1000px;
            margin:0px auto 50px auto;
}

.page-b h2 
{
            width:1000px;
            margin-left:auto;
            margin-right:auto;
            margin-top:0px;
            margin-bottom:-10px;
            text-align:left;
}

.page-b h3
{
            font-size: 24px;
            width:1000px;
            margin-left:auto;
            margin-right:auto;
}

.success
{
    color: green;
    margin-bottom: 15px;
}

.error
{
    color: red;
    margin-bottom: 15px;
}

/* Honeypot verbergen */
input.postduif
{
            display:none;
}

textarea
{
            max-height:200px;
            min-height: 160px;
            margin-bottom: 10px;
}

form#contactformulier button 
{
    background: #8b714b;
    color: #fff;
    padding: 8px 15px;
    border: 1px solid #4a4a66;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

input#telefoon
{
            display:none;
}

span.success
{
            margin-left:10px;
}

#geheim-stipje {
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-size: 14px;
    color: #cccccc; /* Geef dit de kleur van je achtergrond om het onzichtbaar te maken */
    text-decoration: none;
    cursor: pointer;
    z-index: 9999; /* Zorgt dat hij altijd bovenop andere elementen ligt */
    opacity: 0.3;
}

/* Licht een klein beetje op als je er met je muis overheen gaat */
#geheim-stipje:hover {
    opacity: 1;
    color: red; 
}


@media screen and (min-width: 0px) and (max-width: 1200px) 
{
             div#menu span
            {
                        display:none;
            }
            
            div#hamburger
            {
                        display: block;
            }

            div#inhoud p, form
            {
                        width: 90%;  
            }
            
            .page-b h2, .page-b h3
            {
                        width:90%;
            }
}

@media (max-width: 700px) 
{

            body
            {
                        font-size: 18px;
            }
            
            div#inhoud h2
            {
                        font-size: 30px;
            }
            
             div#inhoud h3
             {
                        font-size: 20px;
            }
            
            p#standaard
            {
                      margin-top: 0px;
                      margin-bottom: 50px;
            }
            
            p#spreuk
            {
                        font-size: 20px;
                        margin-top:0px;
                        margin-bottom:10px;
            }
            
            img#logo
            {
                        left:20px;
                        top:25px;
                        width: 230px;
            }
            
            div#hamburger
            {
                        right:30px;
            }
                        
            div.page-b h2
            {
                        margin-top:-10px;
                        margin-bottom: 10px;
            }
            
            div.page-b p:first-of-type
            {
                        margin-top:-30px;
            }
            
            textarea
            {
                        width: calc(100% - 12px);
            }
}