:root {
  --blue: #1e90ff;
  --white: #fff;
  --black: #000;
  --n9: rgba(0, 0, 0, 0.9);
  --n8: rgba(0, 0, 0, 0.8);
  --n7: rgba(0, 0, 0, 0.7);
  --n6: rgba(0, 0, 0, 0.6);
  --n5: rgba(0, 0, 0, 0.5);
  --n4: rgba(0, 0, 0, 0.4);
  --n3: rgba(0, 0, 0, 0.3);
  --n2: rgba(0, 0, 0, 0.2);
  --n1: rgba(0, 0, 0, 0.1);
  --n06: rgba(0, 0, 0, 0.06);
  --n04: rgba(0, 0, 0, 0.04);
  --link: #2d5eff;
}

html, body {
	overflow-x: hidden;
	margin: 0;
}

main {
	/* margin: 0 auto; */
  margin-top: 2rem;
  /* width: calc(400px + 600 * ((100vw - 600px) / 900)); */
}

.disable-selection {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


hr {
    margin-block-start: 9rem;
    margin-block-end: 8rem;
    /* width: 8%; */
    /* border-color: #ccc; */
    /* border-width: 7px; */
    border-style: none none none;

    opacity: .3;
    zoom: .8;
    width: 88px;
    height: 8px;
    /* background: url('data:image/svg+xml;utf8,<svg width="96" height="16" viewBox="0 0 96 16" fill="#CCCCCC" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" /><circle cx="48" cy="8" r="8"/><circle cx="88" cy="8" r="8" /></svg>') no-repeat center; */
    background: url(../assets/icons/ellipsis.svg) no-repeat center;
}


article {
  width: 100%;
}

#peace {
  background-image: url(../assets/img/peace-color.png?v=1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 48px;
  height: 48px;
  margin: auto;
  margin-top: 5rem;
}


article h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

article h2 {
  font-size: 2rem;
  margin-top: 5rem;
  margin-bottom: 1rem;
}

article h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2rem;
}

article h4 {
  font-size: 1.3rem;
  line-height: 140%;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  opacity: .6;
  margin-bottom: 1rem;
}

article h5 {
  font-size: 1rem;
  line-height: 140%;
  font-weight: 400;
  opacity: .6;
  text-align: center;
  margin-bottom: 1.5rem;
}


article p, article li, article strong, article em, article a, article del, p span, li span {
  font-size: 1.125rem;
}

small, article p small, article small a , p small {
  font-size: .8rem;
  letter-spacing: .4px;
  color: var(--n6);
  line-height: 80%;
  text-align: center;
}

article p a {
  /* color: #444; */
  /* text-decoration: underline; */
}

article img {
  display: block;
  /* max-width: 100%; */
}


#twin {
  flex-direction: row;
  gap: 1rem;
}

.post, .post-wide {
  /* position: relative; */
	margin-bottom: 2rem !important;
}

article > .post:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem !important;
}

.post-wide {
  /* margin: auto; */
	display: flex;
	align-content: center;
	align-items: center;
	clear: both;
  margin-bottom: 3rem !important;
}

#tags {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  /* margin-top: 1rem; */
}

.tag {
  background-color: var(--n06);
  text-transform: lowercase;
  color: var(--n6);
  border-radius: 1rem;
  padding: 4px 0.75rem;
  font-size: .9rem;
  text-align: center;
}

/* =============================
=============== Back on top
============================== */

#upBtn {
  /* display: none; */
  position: fixed;
  bottom: 0rem;
  right: 3rem;
  z-index: 99;
  outline: none;
  /* border: none; */
  background-color: var(--n04);
  background-image: linear-gradient(135deg, #ffffff00 0%, #ffffff00 20%, #ffffff88 50%, #ffffff00 80%, #ffffff00 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: 10px 10px; */
  animation: bg-move 12s ease-in-out infinite;
  border: 1px solid var(--n06);
  color: var(--n6);
  padding: 1.2rem;
  border-radius: 3rem;
  transform: translateY(0rem);
  transition: background-color 150ms ease 0s, -webkit-transform 250ms ease 0s, -webkit-backdrop-filter 150ms ease 0s;
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1.25rem;
  /* visibility: hidden; */
}

@keyframes bg-move {
  0%   { background-position: -500px 0; }
  50%   { background-position: -500px 0; }
  100% { background-position: 1000px 0; }
}

#upBtn:after {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  content: "\2191";
}

#upBtn:hover {
  background-color: var(--n1);
}

.show-on-top {
  opacity: 1 !important;
  transition: all .3s;
  transform: translateY(-3rem) !important;
  /* visibility: visible !important; */
}



/* =============================
=============== Password Protection
============================== */

#password-protector {
  position: fixed;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  z-index:9999999999999;
  background: linear-gradient(0deg, rgb(255, 255, 255,1) 0%, rgba(255, 255, 255,1) 40%, rgba(255, 255, 255, .5) 80%, rgba(255, 255, 255,0) 100%) !important;
  backdrop-filter: blur(.2rem);
  -webkit-backdrop-filter: blur(.2rem);
}

form#password-protect-form {
  display:flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  /* background-color: white; */
  /* border-radius: .5rem; */
  /* border: 1px solid #00000012; */
  /* box-shadow: 0 1rem 2rem 0 #00000024; */
  
  gap: .5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  max-width: 600px;
  min-width: 300px;
}

#input-group {
  display: flex;
  margin: auto;
  
  background-color: white;
  border: 1px solid var(--n2);
  border-radius:4rem;
  display: flex;
  align-items: center;
}

#lock {
  height: 24px;
  width: 24px;
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4913 1C9.87037 1 7.74567 3.1247 7.74567 5.74566V9H4C2.89543 9 2 9.89543 2 11V22C2 23.1046 2.89543 24 4 24H11V24.5H13V24H20C21.1046 24 22 23.1046 22 22V11C22 9.89543 21.1046 9 20 9H17.237V5.74566C17.237 3.1247 15.1123 1 12.4913 1ZM13 22H20V11H4V22H11V18.218C10.4022 17.8722 10 17.2258 10 16.4855C10 15.381 10.8954 14.4855 12 14.4855C13.1046 14.4855 14 15.381 14 16.4855C14 17.2258 13.5978 17.8722 13 18.218V22ZM15.237 9V5.74566C15.237 4.22927 14.0077 3 12.4913 3C10.9749 3 9.74567 4.22927 9.74567 5.74566V9H15.237Z" fill="black"/></svg>') no-repeat center;
  margin-bottom: 2rem;
}



input#password-entry {
  background: none;
  border-radius: .5rem;
  border-style: none;
  padding: 0 1rem !important;
  height: 40px;
  font-size: 1rem !important;
  margin: .25rem;
} input#password-entry:focus { outline: none; }


#passbutton {
  font-size: 0.001rem;
  border-radius: 5rem;
  margin: .25rem;
  /* padding: 0 2rem !important; */
  height: 40px;
  width: 40px;
  /* background: url(../assets/icons/go-arrow.svg) no-repeat 50% 50%; */
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 12H22.5M22.5 12L12.5 2M22.5 12L12.5 22" stroke="white" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center;
  background-color:black;
  transition: all .2s ease-in-out;
}

#passbutton:hover { 
  background-color: #444;
  transition: all .2s ease-in-out;
}


#password-error {
  visibility: hidden;
  color:crimson;
  /* margin-top: 1rem; */
}

/* =============================
=============== Grids
============================== */


.hl {
  background-color: moccasin;
  /* border-radius: .5rem; */
  padding: 2px 4px;
}

pre {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background-color: var(--n04);
}

code {
  line-height: 160%;
  white-space: pre-wrap;
  color: var(--n5);
  text-transform: lowercase;
  font-style: italic;
}

blockquote {
  margin: 3rem auto;
  display: flex;
  gap: 1rem;
}
blockquote::before, blockquote::after {
  font: 5rem  Georgia, serif !important;
  opacity: .1;
  height: 0;
}
blockquote::before { content: "“";}
blockquote::after {content: "”";}

blockquote p {
  font-size: 1.6rem;
  line-height: 120%;
  opacity: .6;
  font-style: italic;
  margin-bottom: 0;
}


.list {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--n04);
  margin-bottom: 1rem;
}
.list ul, .list ol { margin-bottom: 0; text-indent: .5rem; }
.list ul { list-style-type: "–";  }
.list li, .list p, .list strong, .list del { font-size: 1rem; margin-bottom: 0;}
  
ul {
  /* padding-left: 2.4rem; */
  /* list-style-type: "→"; */
  margin-left: 1rem;
  list-style-type: disc;
  list-style-position: outside;
  text-indent: 0rem;
  margin-bottom: 2rem;
}

ul li {
  display: list-item;
}

/* Ordered Lists
---------------- */

ol {
  padding-left: 2.4rem;
  margin-bottom:  1.9rem;
}

ol ul,
ol ol,
ul ol,
ul ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}

ol ol,
ul ol {
  list-style-type: circle;
}


/* Tables
---------------- */
table {
  display: table;
  margin-top: 2rem;

  table-layout: fixed;
  border: 1px solid var(--n2);
  border-radius: .5rem;
  width: 100%;
  margin-bottom: 2rem;

  border-collapse: separate;
  text-indent: initial;
  border-spacing: 0px;
}

table tr {
  /* display: table-row; */
  display: flex;
  border-top: 1px solid var(--n2);
  /* vertical-align: middle; */
}

table thead tr {
  border-top: none;
}

table tbody tr:first-child {
  /* border-top: 1px solid var(--n2); */
}

table tbody tr:last-child {
  /* border-bottom: 1px solid var(--n2); */
}


table td,
table th {
  flex: 1;
  flex-grow: 1;
  border-left: 1px solid var(--n2);
  padding: .75rem 1rem;
  line-height: 140%;
  /* border: 1px solid var(--n2); */
}

/* table th br {
  display: block;
  margin: .5rem 0;
  content: " ";
} */

table img {
  max-width: 100%;
}


table td:first-child,
table th:first-child {
  /* padding-left: 0; */
  border-left: none;
}

table td:last-child,
table th:last-child {
  /* padding-right: 0; */
  border-right: none;
  overflow-wrap: anywhere;
}

table th {
  font-weight: normal;
  text-align: left;
}

table code {
  /* background-color: var(--n06); */
  /* padding: .25rem 0.25rem; */
  /* line-height: 169%; */
  line-height: 150%;
  color: var(--n5);
}



/* Tasks
---------------- */
.task-list-item {
  list-style-type: none;
}

.task-list-item input {
  font-size: 1rem;
  margin: 0 0 0 -1.6rem;
  vertical-align: middle;
  width: 1.3rem;
}

.task-list-item p {
  margin-bottom: calc(.5 *  1.9rem);
}


/* =============================
=============== Perportions
============================== */

.img {
	display: block;
	margin: auto;
	max-width: 100%;
}

video {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-height: 512px;
}

.aspectRatioPlaceholder {
  height: min-content;
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}

.aspect-ratio-fill {
  width: 100%;
  max-height: 400px;
  /* padding-bottom: 100%; */
  /* height: 400px; */
  /* height: auto; */
  /* display: none; */
}

.aspectRatioPlaceholder .img {
  position: absolute;
  /* position: relative; */
	/* top: 0; */
	/* left: 0; */
	/* width: auto; */
	max-height: 400px;
}

.aspectRatioPlaceholder p {
  padding-bottom: 0;

}


figure {
  /* width: 100%; */
  /* height: 200px; */
  width: auto;
  max-width: 750px;
  max-width: unset;
  /* display: flex; */
  display: table;
  position: relative;
  clear: both;
  margin: 0 auto;
  justify-content: center;
  /* margin-bottom: 2rem; */
}

figure.left{
	margin-left: 0;
}

figure.right{
	margin-right: 0;
}

figure.full{
	margin-left:0;
	margin-right:0;
}


.one-third {
	width: calc(100%/3);
}

.half {
	width: 50%;
  /* width: auto; */
  max-height: 200px;
}

.two-third {
	width: calc(100%/3*2);
}

.full {
	width: 100%;
  /* height: ; */
}

.left{
	float: left;
}

.right{
	float: right;
}



/* =============================
=============== MediumLightbox style
============================== */

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

.zoom-effect .img{
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
	backface-visibility: hidden;
}

.zoom-effect .zoomImg,
.zoom-effect .zoomImg-wrap {
	position: relative;
	z-index: 900;
	transition: all 300ms;
}

.zoom-effect .zoomImg-wrap--absolute {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.zoom-effect .zoomImg {
	cursor: pointer;
	cursor: -webkit-zoom-out;
}

.zoom-effect .zoomOverlay.show{
	opacity: 1;
}

.zoom-effect .zoomOverlay {
	z-index: 800;
	background: #fff;
	position: absolute;
	transition: opacity 300ms;
	opacity: 0;
	cursor: pointer;
	cursor: -webkit-zoom-out;
}





/* =============================
=============== RESPONSIVE
============================== */

/* Desktop LG
---------------- */
@media only screen and (min-width: 1200px)  {
  
  #page {
    display: grid;
    grid-template-rows: min-content auto min-content;
  }

  header, .footer-wrapper {
    width: 1024px;
  }

  main  { width: 80%; }

  .post {
    width: 640px;
    margin: auto;
  }

  .post-wide {
    width: 80%;
    margin: auto;
  }

  .post, .post-wide {
    max-width: 1024px;
  }

}

/* Desktop SM
---------------- */
@media only screen and (min-width: 640px) and (max-width: 1200px)
{

header, main, .footer-wrapper {
    width: 600px;
}

}

/* Mobile
---------------- */
@media only screen and (max-width: 640px) {

  article > .post:first-child {
    margin-bottom: 0rem !important;
  }

  article h1 {
    font-size: 1.8rem;
    margin-bottom: .75rem;
  }
  
  article h2 {
    font-size: 1.6rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
  }
  
  article h3 {
    font-size: 1.2rem;
    margin-top: 2rem;
  }
  
  article h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }
  
  article h5 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .tag {
    padding: 4px 0.5rem;
    font-size: .7rem;
  }

  article p, article li, article strong, article em, article a, article del, p span, li span {
    font-size: 1rem;
  }


.logo-name > a[title="name"] {
    display: none;
  }

main, .footer-wrapper {
    padding: 0 1.5rem;
}

header {
    padding: 2rem 1.5rem;
}

.half {
  width: 100%;
}

#twin {
  flex-direction: column;
}

hr {
  margin-block-start: 6rem;
  margin-block-end: 5rem;
}

#upBtn {
  right: 1.5rem;
  /* bottom: -2rem; */
  padding: 1.5rem;
  font-size: 1.5rem;
}

.show-on-top {
  transform: translateY(-2rem);
}

table td, table th, table strong, code {
  font-size: .8rem;
}

}