:root
{
  --color-almostblack: #181818;
  --color-code-bg: #1d1d1d;
  --color-pale: #d9d9d0;
  --color-accent: #ffffff;
  --color-code: #303132;
  --color-faded: #707070;
  --color-green: #4a683b;

  --svg-logo : url("../svg/irie.svg");
  --logo-size: 80px;

  --panel-padding: 45px;
}

/* debug
* { outline: 1px solid red; }
*/

::selection { color: var(--color-almostblack); background: var(--color-pale); }

html { min-height: 100%; }
body { min-height: 100%; width: 100%; box-sizing: border-box; line-height: 1.6; overflow-x: hidden; font-size: 16px; font-family: helvetica, sans-serif; background-color: var(--color-almostblack); margin: 0px; padding: 0px; transition: opacity 150ms; opacity: 1 !important; color: var(--color-pale) }

a { cursor: pointer; color: var(--color-pale); text-decoration: none; }
a:hover { color: var(--color-accent); }
header { grid-area: header; box-sizing: border-box; position: relative; width: 100%; min-height: var(--logo-size); background-size: cover; background-position: 50%; center; background-repeat: no-repeat; padding: var(--panel-padding); }
.logo { display: block; position: absolute; top: var(--panel-padding); left: var(--panel-padding); width: var(--logo-size); height: var(--logo-size); background-image: var(--svg-logo); background-size: contain; background-repeat: no-repeat; background-position-y: center; }

#wrap { display: grid; grid-template-columns: minmax(900px, 100%); grid-template-areas: "header" "nav" "main" "footer"; }

nav  { display: flex; box-sizing: border-box; overflow-x: auto; gap: 20px; padding: var(--panel-padding) 0 var(--panel-padding) var(--panel-padding); grid-area: nav; min-width: 300px;}
main { padding: var(--panel-padding); box-sizing: border-box; grid-area: main; max-width: 900px; }
  main section { margin-bottom: var(--panel-padding); }
  main img, main video { width:100%; max-width: 900px; display: block; margin-bottom: 15px; user-select: none; }
.date { color: var(--color-faded)}
    
.topicblock { display: block; float: none; min-width: 200px; margin-bottom: 20px; white-space: nowrap; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.topicblock .topichead { display: inline-block; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; font-size: 24px; user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.topicblock .topic { display: block; margin-bottom: 5px; width:auto; }
.topicblock a:after, h2 a:after { content: ""; }
.topicblock a:hover:after, h2 a:hover:after { margin-right: 2px; content: " •"; transition: all 150ms; text-decoration: none; }

.breadcrumb a { background: none; color: var(--color-faded); padding: 0px; }
.breadcrumb a:hover { background: none; color: var(--color-accent); }
.breadcrumb span { margin: 10px 0px; }

.toc { font-weight: bold; }
  .toc a { background: none; color: var(--color-pale); padding: 0px;}
  .toc a:hover { background: none; color: var(--color-accent); }
  .toc li { line-height: 14px; }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }
h1 { font-size:45px; text-transform: capitalize; font-weight: bold; margin-bottom: 20px;}
h2 { font-size:30px; text-transform: capitalize; font-weight: bold; margin-bottom: 20px; display: block;}
  h2 a span { text-decoration: underline; text-decoration-color: var(--color-faded); }
h3 { font-size:20px; text-transform: capitalize; font-weight: bold; margin-bottom: 20px;}
h4 { font-size:18px; text-transform: capitalize; font-weight: bold; margin-bottom: 20px;}
h5 { font-size:16px; text-transform: capitalize; margin-bottom: 20px;}
h6 { font-size:14px; text-transform: capitalize; margin-bottom: 20px;}
hr { border-top: #ffffff solid 1px; margin: 15px 0 20px 0;}
p  { margin-bottom: 2em; line-height: 1.5em; }
  p a { padding: 2px 4px 1px 4px; font-weight: bold; background-color: var(--color-pale); color: var(--color-almostblack); border-radius: 2px; }
  p a:hover { background-color: var(--color-code); }
  del { color: var(--color-faded); text-decoration: line-through; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
blockquote { border-left: 4px solid var(--color-accent); padding-left: 20px; font-style: italic; margin: 20px 0; }
.pretty { border: none; padding: 20px; font-style: italic; margin: 15px 0; font-size: 26px; font-weight: 200; }

ul, ol { margin: 0 0 2em 1em; padding-left: 1.6em; }
  ol li { margin-bottom: 0.5em; list-style-type: decimal; }
  ul li { margin-bottom: 0.5em; list-style: disc; line-height: 20px; }
    li a { padding: 2px 4px 1px 4px; font-weight: bold; background-color: var(--color-pale); color: var(--color-almostblack); border-radius: 2px; }
    li a:hover { background-color: var(--color-code); }

table { width: 100%; border-collapse: collapse; margin-bottom: 3em; }
  th, td { padding: 10px; border: 1px solid var(--color-pale); }
  th { font-weight: bold; background-color: none; color: var(--color-accent) }
  td { vertical-align: top; }

pre  { background-color: var(--color-code); border: none; padding: 10px; overflow-x:auto; margin-bottom: 2em; border-radius: 4px; }
code { background-color: var(--color-code); padding: 0px; border-radius: 4px; font-family: monospace; white-space: pre; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none; white-space: pre; }
map  { background-color: var(--color-code); color: var(--color-faded); display: block; padding: 25px; line-height: 1.2em; border-radius: 4px; font-family: monospace; font-size: 1.1em; white-space: pre; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none; overflow-x:initial; }
  map a:after { content: ""; color: var(--color-pale); }
  map a:hover:after { margin-right: 2px; content: " •"; transition: all 150ms; text-decoration: none; }

.panorama { display: block; width: 100%; height: 45vh; min-height: 240px; max-height: 600px; margin-bottom: 2em; border: none; border-radius: 8px; -webkit-border-radius: 8px; overflow: hidden; }

.offer-box { max-width: 900px; display: block; box-sizing: border-box; margin: 0px auto 0px 340px; padding: 20px; background: var(--color-green); border-radius: 8px; }

.offer-box h3 { margin-bottom: 20px; color: #fff; font-size: 1.8rem; font-weight: 600; }
.offer-box form { display: flex; justify-content: left; align-items: center; gap: 12px; flex-wrap: wrap; }
.offer-box input { padding: 14px 16px; border: none; border-radius: 8px; background: #fff; font-size: 1rem; width: 230px; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.offer-box input:focus { outline: none; box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.4); transform: translateY(-1px); }

.offer-box button { padding: 14px 28px; border: none; border-radius: 10px; background: linear-gradient(135deg, #4f8cff, #276ef1); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.offer-box button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(39,110,241,.35);}
.offer-box button:active { transform: translateY(0);}

.offer-box input::placeholder { color: #888;}

footer                  { width: 100%; grid-area: footer; box-sizing: border-box; margin-bottom: 60px;  line-height: 30px; padding: var(--panel-padding); }
footer a.icon           { width: 20px; height: 30px; margin: 0px 8px; background-size: contain; background-repeat: no-repeat; background-position-y: center; display: block; float: right; }
footer a.icon.github    { background-image: url("../svg/github.svg"); }
footer a.icon.twitter   { background-image: url("../svg/twitter.svg"); }
footer a.icon.youtube   { background-image: url("../svg/youtube.svg"); }
footer a.icon.instagram { background-image: url("../svg/instagram.svg"); }
footer a.icon.merveilles{ background-image: url("../svg/merveilles.svg");}

@media (max-width: 768px)
{
    :root { --panel-padding: 20px; }
    #wrap { display:block; }
    main { width: 100%; max-width: none; }
    header { height:40vh !important; min-height:220px; }
    .panorama { height: 30vh; }
}