/*//////////////////////////////////
//////// r.cms framework    ////////
//////// custom build v1.08 ////////
////////   rogez.design™    ////////
////////    2025/03/24      ////////
//////////////////////////////////*/


@font-face{	font-family: Voltairs; src: url('assets/fonts/Voltairs-LightCn.woff'); font-weight:normal; font-style:normal; }
@font-face{	font-family: Voltairs; src: url('assets/fonts/Voltairs-LightCnObl.woff'); font-weight:normal; font-style:italic; }
@font-face{	font-family: Voltairs; src: url('assets/fonts/Voltairs-Cn.woff'); font-weight:bold; font-style:normal; }
@font-face{	font-family: Voltairs; src: url('assets/fonts/Voltairs-Obl.woff'); font-weight:bold; font-style:italic; }


/* VARS */
:root {  
   --img-padding: 0.5vh;
   --blue: rgb(62, 132, 208);
   --white: rgb(238, 238, 238);
   --black: rgb(30,30,30);
}	

*{ font-family: Voltairs; padding: 0; margin: 0; box-sizing: border-box; }
body{ width:100vw; background-color: var(--blue); color:var(--white); overflow-x: hidden; }


/* ARTICLES */
article{ margin-bottom: 4rem; }
article.hidden{ display: none; }


/* HEADINGS & PARAGRAPHS & LISTS */
h1{ font-size:300%; text-transform: uppercase; }
h2{ font-size:250%; text-transform: uppercase; font-weight: normal;}
h3{ font-size:200%; font-weight: normal; text-transform: uppercase; margin-bottom: 1rem; }
h3:first-of-type { padding-top:0; margin-top: 0; }
h4{ font-size:1.1rem; padding:10px 0;}
h5{ font-size:1rem; }
h6{ font-size:0.8rem; font-style: italic;}
p{ font-size:1.2rem; line-height: 1.5rem; padding-bottom: 10px;}
a{ color:var(--white); text-decoration: none; }
a:hover{ text-decoration: underline; }
blockquote{ font-size: 1.5rem; font-style: italic; line-height: 1.5; }
blockquote::before, blockquote::after{ content: '"'; }
ul{ padding-left:2rem; padding-bottom: 1rem; }
ul li{ font-size:1.2rem; line-height: 2rem; }

/* HEADER */
header{ display: flex;  width: 100vw; background-color: var(--blue); }
header section#left{ display: flex; position: fixed; width: 20vw; margin-right: 10vw; border-bottom: 5px double white;  }
header figure{ display: flex; width:100%; }
header figure:hover{cursor: pointer;}
header figure img{ width: 100%; height: auto; object-position: bottom; object-fit: contain; padding-bottom: 5px;}
header section#right{ display: flex; position:fixed; z-index:2; background-color: var(--blue); flex-flow: column; justify-content: end; }


/* MAIN LAYOUT */
main{ display: flex; width:100vw; }
main div#main{ overflow: visible; z-index:1 }


/* NAV */
main nav{ display: flex; flex-direction: column; justify-content: start; }
main nav a { font-size: 2.2rem;  text-underline-offset: 0.5rem;  text-align: left; text-decoration: none; color: white; text-transform:uppercase; }
main nav a.active { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--white); } 
main nav a:hover{ text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--white); }


/*FIGURES AND IMAGES */
main figure{ height:20vh; overflow:hidden; margin-bottom:1vh; }
main figure img { height:100%; object-fit: cover; padding-right:var(--img-padding);}
main figure.one img{ width: 25%; }
main figure.two img { width: calc((100% / 2) - var(--img-padding) * 2); }
main figure.three img{ width: calc((100% / 3) - var(--img-padding) * 3); }
main figure.four img{ width: calc((100% / 4) - var(--img-padding) * 4); }


/* TAGS */
article div.tags{ margin-top:1rem; font-size: 1.3rem; color: lightgrey; font-family: Consolas, Monaco, "Courier New", "monospace"; line-height: 2rem;}
article div.tags span{ margin-right:1rem; background-color: rgba(250,250,250,0.2);}


/*/ / CONTACT / /*/
form { display: flex; flex-flow: row wrap; align-items: flex-start; width: 100%; }
form input, form textarea { margin: 0.5rem 0; padding: 1rem; width: 100%; background-color: rgba(250,250,250,0.6); border: none; font-size: 1rem;}
form input:hover, form textarea:hover { background-color: rgba(250,250,250,0.8); }
form input:active, form textarea:active { background-color: rgba(250,250,250,0.9); }
form input[type=submit]{ width:auto; }


/* MEDIA QUERIES */
@media only screen and (min-height: 100px)  { html { font-size: 10px; } }
@media only screen and (min-height: 600px)  { html { font-size: 12px; } }
@media only screen and (min-height: 700px) { html { font-size: 14px; } }
@media only screen and (min-height: 800px) { html { font-size: 16px; } }
@media only screen and (min-height: 1200px) { html { font-size: 18px; } }

@media only screen and (orientation: landscape) {	
	/* HEADER */
	header{ height: 16vh; }
	header section#left{ width:17.5%; height:12vh; margin: 4vh; }
	header nav#menu{ display: none; }
	header section#right{ width: 65vw; height:16vh; margin-left:23.9vw; border-bottom: 5px double white;  }
	
	/* MAIN LAYOUT */
	main{ display: flex; padding:4vh;}
	main nav{ position:fixed; width: 20vw; max-width: 20vw; margin-right: 10vw; }
	main nav a{ padding: 0.5rem 0; }
	main div#main{ margin-left: 22vw; width: 65%;  }
	main div#main h1{ display:none; font-size:200%; }
	
	/* HEADINGS & PARAGRAPHS */
	blockquote{ width: 60%; margin-top:2vh; }
	
	/*/ / FIGURES AND IMAGES / /*/
	main figure.one{ height:50vh; }
	main figure.one img{ width: 60%; }
}

@media only screen and (orientation: portrait) {
    
	/* HEADER */
	header{ position:fixed; padding: 1vh; width:100vw; height: 12vh; z-index:5; background-color: var(--blue); }
	header section#left{ width:83%; margin: 2vh 0 15px 4vh; border-bottom: 5px double white;  }
	header section#left figure{ width:50%; }
	header section#left figure:hover{cursor: pointer;}
	header section#left figure img{ width: 100%; height: auto; object-position: bottom; object-fit: contain; padding-bottom: 5px;}
	header section#right{ margin-left:80%; height: auto; }
	header section#right h1{ display: none; }
	header section#right nav#menu{  }
	header section#right nav a { font-size: 5em; padding-left:2%; margin-top: -2%; text-decoration: none; color:white; position: fixed}
	
	/* MAIN LAYOUT */
	main{ display: flex; padding:4vh; z-index: 2;}
	main nav{ display: none; position:relative; width: 100vw; margin-top: 28vh; margin-right: 0; background-color: var(color-bg1); }
	main nav a{ display:block; text-align: center; padding: 1vw 0;}
	main div#main{ margin-top:12vh; padding: 1vh; overflow: hidden;}
	main div#main h1{ text-align: left; font-size: 250%; font-weight: bold; }
	
	/* HEADINGS & PARAGRAPHS */
	h3{ font-size: 150%; }
	blockquote{ width: 100%; margin-top:3vh;}
	
	/*/ / FIGURES AND IMAGES / /*/
	main figure.one{ height:100%; }
	main figure.one img{ width: 100%; }
}