/* ====
Theme Name: Glazen Etalage Theme
Theme URI: http://www.nieuwontwerp.com
Description: Website voor de glazen etalage van Radio A-FM
Version: 0.01
Author: Jeroen van der Wiel @ Nieuw Ontwerp
Tags: webdesign,nieuw,ontwerp,nieuwontwerp,wordpress

==== */

:root
{

}

*
{
  box-sizing: border-box;
}

html,body
{
  font-family: 'Arial', 'Arial', sans-serif;
  margin: 0;
  font-size: 110%;
  line-height: 1.1rem;
}

main
{
  section
  {
    margin: clamp(30px, 2.5dvh, 9000px) 0;
  }

  section:first-child
  {
    margin-top: 0px;
  }

  section.tekst-blok
  {
	  font-family: "Playfair Display", serif;
	  padding: clamp(30px, 2.5dvh, 9000px) clamp(20px, calc(calc(100% - 900px) / 2 ), 9000px);
	  
	  p
	  {
		  letter-spacing: .5px;
		  line-height: 1.25em;
	  }
  }

  section.afbeelding-blok
  {
    padding: clamp(30px, 2.5dvh, 9000px) clamp(20px, calc(calc(100% - 1100px) / 2 ), 9000px);
	  
	  div.afbeelding-caption-wrapper
	  {
		  position: relative;
		  
		  p.afbeelding-caption
		  {
			  position: absolute;
			  bottom: 0px;
			  left: 0px;
			  font-size: .75em;
			  font-family: "Playfair Display", serif;
			  letter-spacing: .5px;
			  background: white;
			  padding: .4em .8em;
			  margin-block-end: 0px;
		  }
	  }
	  
	  img
	  {
		  width: 100%;
	  }
  }

  section.formulier-blok
  {
	  padding: clamp(30px, 2.5dvh, 9000px) clamp(20px, calc(calc(100% - 600px) / 2 ), 9000px);
	  font-family: "Playfair Display", serif;
	  
	  legend
	  {
		  font-size: 1.25em;
		  letter-spacing: .5px;
		  color: var(--css-variables--button-bg);
	  }
  }
}

nav.header li.button > a,
nav.mobile li.button > a,
a.button,
input[type=submit]
{
	position: relative;
	font-family: "Playfair Display", serif;
	padding: .5rem 1rem;
	font-size: .8em;
	font-weight: 900;
	border-radius: .25em;
	color: var(--css-variables--button-text);
	background-color: var(--css-variables--button-bg);
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
	transition: all 300ms ease-in-out;
}

nav.header li.button:hover > a,
nav.mobile li.button:hover > a,
a.button:hover,
input[type=submit]:hover
{
	box-shadow: 0px 0px 10px 1px var(--css-variables--button-bg);
}

footer
{
	main
	{
		padding: clamp(60px, 5dvh, 9000px) clamp(20px, calc(calc(100% - 600px) / 2 ), 9000px);
	}

	aside
	{
		padding: 20px 10px;
	}
}

h1,h2,h3,h4,h5
{
	font-family: "Playfair Display", serif;
	color: var(--css-variables--button-bg);
	font-weight: 600;
	margin-block-start: 0px;
	margin-block-end: 0px;
}

h1
{	
	color: black;
	font-weight: 900;
	line-height: 1.4em;
	font-size: clamp(3.2em, calc(1em + 3dvh), 100px);
}

h2
{
	margin-block-start: 2em;
	font-size: clamp(1.6em, calc(1em + 1.5dvh), 50px);
}

h3
{
	margin-block-start: 1em;
	font-size: clamp(1.4em, calc(1em + .75dvh), 40px);
}

h4
{
	font-size: 1.2em;
}

h5
{
	font-size: 1em;
}