@import url('https://fonts.googleapis.com/css?family=Fira+Code');

#coding-blog-post {
	
	A:link { 
	text-decoration: none; 
	color: white; 
	}

	A:visited { 
		text-decoration: none; 
		color: white; 
	}

	A:active {
		text-decoration: none; 
		color: white; 
	}

	A:hover { 
		text-decoration: none; 
		color:#0000ff;
	}
	
	h1 {
		/*font-family: monospace, sans-serif;*/
		font-family: "Fira Code",  monospace, sans-serif;
		/*font-weight: bold;*/
		font-style: italic;
		font-size: 2.08vwpx;
		color: #ED00AE;
		margin-top: 0.26vw;
		margin-bottom: 0.26vw;
		line-height: 1;
	}
	
	h2 {
		font-family: Times New Roman, serif;
		color: #000000;
		font-weight: normal;
		font-size: 1.56vw;
	}
	
	cursor: url('https://idylladrian.github.io/graphics/pencil-0.gif'), auto;
	-webkit-ind-animation: cursor 3200ms infinite;
	animation: cursor 3200ms infinite;

	p {
		font-family: arial, sans-serif;
		/*color: #000000;*/
		color: #ED5200;
		margin: 0px;
		
	}

	/*background: #08006C;*/
	background: cyan;
	/*background: #00ECED;*/
	/*background: #00A2ED;*/
/* 	background-image: url('https://idylladrian.github.io/graphics/index_background.jpg');
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: top;
	background-attachment: fixed; */
	
	image-rendering: pixelated;
	/* overflow: hidden; */
	
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

@-webkit-ind-keyframes cursor {
  0% {cursor: url('https://idylladrian.github.io/graphics/pencil-0.gif'), auto;}
  15% {cursor: url('https://idylladrian.github.io/graphics/pencil-1.gif'), auto;}
  30% {cursor: url('https://idylladrian.github.io/graphics/pencil-2.gif'), auto;}
  45% {cursor: url('https://idylladrian.github.io/graphics/pencil-3.gif'), auto;}
  60% {cursor: url('https://idylladrian.github.io/graphics/pencil-4.gif'), auto;}
  75% {cursor: url('https://idylladrian.github.io/graphics/pencil-5.gif'), auto;}
} 

@keyframes cursor {
  0% {cursor: url('https://idylladrian.github.io/graphics/pencil-0.gif'), auto;}
  15% {cursor: url('https://idylladrian.github.io/graphics/pencil-1.gif'), auto;}
  30% {cursor: url('https://idylladrian.github.io/graphics/pencil-2.gif'), auto;}
  45% {cursor: url('https://idylladrian.github.io/graphics/pencil-3.gif'), auto;}
  60% {cursor: url('https://idylladrian.github.io/graphics/pencil-4.gif'), auto;}
  75% {cursor: url('https://idylladrian.github.io/graphics/pencil-5.gif'), auto;}
}

.loader-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.loader {
	display: block;
	background-image: url('https://idylladrian.github.io/graphics/frog_loader.gif');
	width: 5.2vw;
	height: 3.12vw;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 3.9vw;
	animation: loader 0.9s infinite ease;
}

@keyframes loader {
	0% { transform: translateX(0px);}
	7% { transform: translateX(-30px);}
	14% { transform: translateX(-50px);}
	21% { transform: translateX(-80px);}
	28% { transform: translateX(-110px);}
	35% { transform: translateX(-120px);}
	42% { transform: translateX(-130px);}
	49% { transform: translateX(-140px);}
	56% { transform: translateX(-150px);}
	63% { transform: translateX(-150px);}
	70% { transform: translateX(-150px);}
	77% { transform: translateX(-150px);}
	84% { transform: translateX(-150px);}
	91% { transform: translateX(-60px);}
	100% { transform: translateX(0px);}
}
	

#header {
	display: block;
	position: absolute;
	top: 0px;
	margin-left: 0px;
	padding: 0px;
	height: 5.2vw;
	width: 100%;
	background: #F6F6F6;
}

#left {
	position: absolute;
	padding: 1.3vw;
	left: 0px;
	top: 0px;
	/* width: 10.4vw; */
	width: 15vw;
	height: 100%;
	background: #F6F6F6;
}

.layout {
  width: 100%;

  display: grid;
  grid:
    "sidebar body" 1fr
    / auto 9fr 1fr;
  gap: 8px;
}

.sidebar { 
	grid-area: sidebar; 
	font-family: monospace, sans-serif;
	/*color: #ED9300;*/
	color: white;
	padding-left: 15px;
	padding-right: 10px;
}

.body { 
	grid-area: body; 
	font-family: "Fira Code", monospace, sans-serif;
	color: #8E00ED;
	line-height: 2;
}

.right-space{
	grid-area: body;
}

#main-text {
	position: relative;
}

.blink-h1 {
  font-weight: bold;
  animation: blink-h1 1s step-end infinite;
}

@keyframes blink-h1 {
  from, to { color: transparent }
  50% { color: #ED00AE }
}

.blink-p {
	font-weight: bold;
  animation: blink-p 1s step-end infinite;
}

@keyframes blink-p {
	from, to { color: transparent }
  50% { color: #8E00ED }
}

.blink-code {
	font-weight: bold;
  animation: blink-code 1s step-end infinite;
}

@keyframes blink-code {
	from, to { color: transparent }
  50% { color: white }
}

.blur-pane {
	position: fixed;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(1px);
	z-index: -1;
}

.fake-code {
	position: fixed;
	height: 100%;
	width: 100%;
	color: white;
	font-family: monospace, sans-serif;
	z-index: -10;
	white-space: pre-wrap;
}

.inline {
  display:inline-block;
  position: relative;
}
.inline .content {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 99999;
  border-style: solid;
  background-color: white;
}
.inline:hover .content {
  display: block;
  width: 20vw;
}

#code-logo{
	filter: brightness(200);
	width: 10%;
}

.note-formatting {
	font-size: 1vw;
	color: white;
}