/*/////////////////////*
/* mudflower magazine /*
/* v1.4 2025/08/16 ////*
//////////////////////*/



@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin-ext');
@font-face{ src: url(assets/fonts/IS-reg.woff); font-family:'IS'; font-weight: bold; }
@font-face{ src: url(assets/fonts/IS-lc.woff); font-family:'IS'; font-weight: light; }

/* headings font-family: 'IS', sans-serif; */
/* common font-family: 'Open Sans', sans-serif; */

/* VARS */
:root {
  --midbrown: rgb(96,82,69);
  --lightbrown: rgba(162,149,135,0.8);
  --darkbrown: rgb(79,68,58);
  --pink: #B33759; 
  --greenblue: mediumturquoise;
  --brokenwhite: rgb(240,240,250);
}

*{ margin:0; padding:0; box-sizing:border-box; }
body { font-size:18px; font-family:'Open Sans Condensed', sans-serif; background-color:#eee; background-image: url(assets/img/overnoise.png); }
main{ position:relative; z-index:2; width: 90%; margin: 1em auto; }
div#flower{ position:fixed; top:0; left:0; width:75%; z-index:0; opacity:0.3; }
figure img{height:100%;}
.fadeinbgnd{ animation:mudgrad 1s; }
.hidden{ display: none;} 

@keyframes flow{ from{ transform:rotate(0deg); margin-bottom:0px; } to{ transform:rotate(180deg); margin-bottom:2000px; } }
@keyframes mudgrad{ from{ background-color:black; } to{ background-color:#8C7966; } to{ background-color:#eee; } }

/* HEADER */
header{ width:99vw; margin:0 auto; }
header figure{ height:10vh; margin: 1rem; width:100%; }
header figure img{ width:80%; margin:0 auto; display: block; }
footer figure object{ position:relative; height:4vh; object-fit:scale-down; }
header div{ width:100%; text-align:center;}
header div h1{ font-weight:normal; display:inline-block; margin:0 auto; font-size:4em; margin-bottom:0em; background:linear-gradient(20deg, #5F9FD1, #B33759); }

/* SECTIONS */
section.about article{ display:inline-block; background-color:#fff; padding:1rem; margin:-0.4rem 0.5rem; width:100%; opacity:0.85; transition:opacity 1s; }
section.dialog{ width:max-content; margin:5vh auto; text-align: center;}
section.center{ display:flex; width:100vw; height:100vh; overflow:hidden; flex-flow:row wrap; align-content:center; }
section.center div{ margin:auto; display:flex; flex-flow:column wrap;  }
section.block input,section.block select,section.block textarea{ display: block; }
section.block *{ width: 100%; }
section.hoekjes{ border-radius: 10px; overflow: hidden; margin: 1rem 0.5rem;}
div#editor{ background-color: var(--lightbrown); min-height:10rem; }
div.ql-toolbar{ background-color: var(--brokenwhite); }
div.ql-editor{ font-size:1rem; }

h1,h2,h3,h4,h6{ position:relative; font-family:'IS', sans-serif; font-weight: light; }
h1{ text-transform: lowercase; margin-bottom:1rem; color: var(--darkbrown); text-align: center;}
h2{ font-weight:normal; font-size:1.5em; margin:1.5rem 0 0.5rem 0; text-align: center; }
h3{ font-size:1.2em; margin:0.5rem 0; }
h4{  z-index:2; font-weight:normal; background-color:black; color:var(--brokenwhite); font-size:1.2rem; padding:0 15px 5px 3px; display:inline-block; text-transform:uppercase; }
h5{ font-family:'Open Sans Condensed', sans-serif; font-weight: 700; font-size:1em; margin:0em 0 0.5em 0; margin:1em;}
h6{ font-size:1em; margin:1em; text-align: right;  }
p{ font-family:'Open Sans Condensed', sans-serif; margin:0.5rem 0 1rem 0; letter-spacing:0.01em; }
a{ color:black; text-decoration: none; font-family:'IS', sans-serif; font-weight: light;  }
a.expand{ color: rgb(96,82,69); font-size: 200%; }
blockquote{ margin: 1rem 0 0 1rem; font-size:2rem; font-style: oblique; }
blockquote::before{ content:open-quote;; }
blockquote::after{ content:close-quote;; }
figure.avartar{ width:20vh; height:20vh; align-self:center; animation:flow 2s cubic-bezier(.55,.09,.68,.53) 1.5s; transform: rotate(0deg); }
figure img{ height:100%;  }

/* FORM */
form input,form select,form textarea, form option{ padding:0.5rem; margin:0.5rem; opacity: 0.8;  border: none; border-radius: 5px; text-align: center; font-family: monospace; background-color: var(--lightbrown);}
form input:hover,form input:focus, form select:hover, form textarea:hover{ opacity: 1; border: none;}
form input:autofill { opacity: 0.8; }
form input.submit{ background-color: var(--pink); width: -moz-available; }

/* NAV */
nav{ position:relative; z-index:3; }
header nav#logo figure h1, figure img{display:inline;}
header nav#logo h1{ font-size:3rem; }
header nav#main{ display: flex; flex-flow: row wrap; justify-content: center	;}
header nav{ display: flex; justify-content: space-between; width:100%;}
header nav a{ font-size:1.8rem; text-transform:uppercase; color:#333; align-self: center; }
header nav a{ text-transform:uppercase; color:#333; margin: 0.2rem 1rem; background-color:var(--brokenwhite)}
header nav a:hover{ background-color: #8C7966; color:var(--brokenwhite); }
main nav{ display:flex; flex-flow:row wrap; justify-content:center; }
main nav a{ font-size:1.2rem; text-transform:uppercase; color:#333; margin: 0.2rem 1rem; background-color:var(--brokenwhite)}
main nav a:hover{ background-color: #8C7966; color:white; }

/* TEMP PAGE */
figure#waiting img{ margin: 0 auto; }
figure#waiting figcaption{ text-align: center; }

/* MASONRY PAGE */
div.masonry { margin:1.5em 0; column-gap:1.5em; font-size: 0.85em; }
div.masonry section { display:inline-block; background-color:#fff; padding:0em; margin:3rem 0 1.5em; width:100%; opacity:0.85; transition:opacity 1s; }
div.masonry section:hover{opacity:1;}
div.masonry section.left { box-shadow: -4px 4px 0 0 transparent; }
div.masonry section.right { box-shadow: 4px 4px 0 0 transparent; }
div.masonry section.left:hover{ box-shadow: -4px 4px 0 0 tomato; }
div.masonry section.right:hover{ box-shadow: 4px 4px 0 0 mediumturquoise;}
div.masonry img, iframe { max-width:100%; height:auto; display:block; }
div.masonry section article{ margin:0 0.8vh; padding-top:1.2vh; }
div.masonry section article img{ margin-top:-5px; }
div.masonry section h4 { position:absolute; margin:-2.5vh 0 0 -0.5rem; }
div.masonry figcaption { font-size: 0.6rem; margin-top:0.2rem; text-align: right; }

/* ARTICLE PAGE */
/* div.article draagt de breedte, zodat het artikel gecentreerd staat */
div.article{ position:relative; width:95%; margin: 0 auto; }
div.article article{ background-color:#fff; }
div.article article img{ width:100%; }
div.article article h3.headline{ font-family:'Open Sans Condensed', sans-serif; font-weight:normal; font-size:1.8rem; line-height:1.15; margin:0 0.5rem; padding:1.5rem 2rem 0; column-span:all; }
div.article p{ margin: 0.5rem 0.5rem 1rem 0.5rem; padding: 1.2rem 2rem; line-height:1.5; text-align: justify; }
div.article article h3.headline + p{ margin-top:0; padding-top:1rem; }
div.article article h6{ margin:0 0.5rem; padding:0 2rem 1.2rem; }
div.article figcaption{ text-align: right; padding-right:0.5rem; font-size:0.8rem; font-style: italic; }

@media only screen and (min-width: 800px) and (orientation:landscape){ 
	div.masonry { column-count: 2; } 
	div.article article { column-count: 1; column-fill: balance; } 
}
@media only screen and (min-width: 1000px)  and (orientation:landscape){ 
	div.masonry { column-count: 3; } 
}
@media only screen and (min-width: 1400px)  and (orientation:landscape){ 
	header figure{ height: 15vh; }
	div.masonry { column-count: 4; } 
	div.article article { column-count: 1; column-fill: balance;}
	section.about article{ column-count: 3; }
}
@media only screen and (min-width: 1800px)  and (orientation:landscape){ 
	header figure{ height: 10vh; }
	div.masonry { column-count: 5; } 
	div.article article { column-count: 4; }
	section.about article{ column-count: 4; }
}
@media only screen and (min-width: 2400px)  and (orientation:landscape){ 
	header figure{ height: 10vh; }
	div.masonry { column-count: 5; } 
	div.article article { column-count: 4; } 
	section.about article{ column-count: 4; }
}

@media only screen and (orientation:portrait){ 
	header figure{ height: 10vh; }
	div.masonry { column-count: 1; } 
	div.article article { column-count: 1; column-fill: balance; } 
	section.about article{ column-count: 1; }
}