/* ==== BROWSER RESETS  ==== */
*, ::after, ::before { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px; font-family: sans-serif }
img { width: 100%; height: auto; display: block }
table tr td img { width: 100%; height: auto; display: block }

html { scroll-behavior: smooth; scroll-padding-top: 72px }

/* Default font and colours */
body { 
	font-family: sans-serif;
	font-weight: 400;
	max-width: 1600px;
}

h1, h2, h3 { 
	font-family: 'Merriweather', 'Georgia', serif;
	font-weight: 400;
	color: #230cea;
	margin-bottom: 4px
}

p, li, td { font-family: 'Roboto', sans-serif; color: #023753; }


/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */

/* Desktop */
@media all and (min-width:768px) { .wrapper-content { padding: 2% 21% 1% 21% } }

/* Mobiles */
@media all and (max-width:767px) { .wrapper-content { padding: 4% 8% 2% 9% } }

/* Headings */
.wrapper-content h1 {
	line-height: 1.3; margin-bottom: 12px;
	 font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320)));
}

.wrapper-content h2 {
	line-height:1.3;
	font-size: calc(22px + (38 - 22) * ((100vw - 320px)/(1600 - 320)));
}

.wrapper-content h3 {
	line-height:1.3;
	font-size: calc(18px + (28 - 18) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Roboto', sans-serif";
}
	
/* Paragraphs and bullets */
.wrapper-content p,
.wrapper-content li {
	font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Roboto', sans-serif;
}

.wrapper-content ul li { list-style-type: none }
.wrapper-content ul li:before { 
		display: inline-block;
		content: '\01F87A';
		content: '\01F86A';
		color: #230cea;
		transform: translateY(2px);
}

.wrapper-content p b,
.wrapper-content ul li b,
.wrapper-content ol li b,
.wrapper-content ol li ul li b { color: #000 }

.wrapper-content p a, .wrapper-content li a { 
	font-weight: normal;
	color: #230cea;
	text-decoration: none;
	padding-bottom:2px;
	border-bottom-width: 2px;
	border-bottom-style: solid
}

.wrapper-content p a:link, .wrapper-content li a:link,
.wrapper-content p a:visited, .wrapper-content li a:visited {
	border-bottom-color: #230cea;
}

.wrapper-content p a:hover, .wrapper-content li a:hover,
.wrapper-content p a:active, .wrapper-content li a:active {
	border-bottom-color: #e74c3c;
}

/* Desktops */
@media screen and (min-width: 768px) {
	.wrapper-content h2 { margin: 0 0 4px 0 }
	.wrapper-content h3 { margin: 48px 0 4px 0 }
	.wrapper-content p  { margin: 0 0 24px 0; line-height: 1.5 }
	.wrapper-content ul, .wrapper-content ol { margin: 0 0 24px 20px }

	.wrapper-content p + ul { margin-top: -12px }
	.wrapper-content p + ol { margin-top: -12px }
	.wrapper-content ul { margin: 0 0 32px 0 }
	.wrapper-content ul { list-style-position: inside }
	.wrapper-content ul li { 
		padding-left: 20px ;
		text-indent: -20px ;
		margin: 0 32px 20px 20px;
		line-height: 1.6
	}
	.wrapper-content ul li:before { margin-right: 20px }
}


/* Mobiles */
@media screen and (max-width: 767px) {
	.wrapper-content h2 { margin: 0 0 4px 0 }
	.wrapper-content h3 { margin: 12px 0 4px 0 }
	.wrapper-content p  { margin: 0 0 16px 0; line-height: 1.4 }
	.wrapper-content ul, .wrapper-content ol { margin: 0 0 12px 20px }

	.wrapper-content p + ul { margin-top: -4px }
	.wrapper-content p + ol { margin-top: -4px }
	.wrapper-content ul { margin: 0 0 24px 0 }
	.wrapper-content ul { list-style-position: inside }
	.wrapper-content ul li { 
		line-height: 1.4;
		padding-left: 18px ;
		text-indent: -18px ;
		margin: 0 0 18px 18px
	}
	.wrapper-content ul li:before { margin-right: 18px; font-size: 90% }
}

.wrapper-content img { margin: 32px 0 40px 0 }

/* === Numbered Lists === */

.wrapper-content       ol { list-style-type: none; counter-reset: li-counter }
.wrapper-content  ol > li { position: relative }

.wrapper-content ol >  li:before {
	position: absolute; top: 6px; left: -32px; line-height: 1.2; text-align: center; 
	border-radius: 50%; padding: 2px 4px 2px 4px; font-weight: bold; color: #fff; background-color: #230cea; 
	content: counter(li-counter); counter-increment: li-counter;
}

/* Desktops */
@media screen and (min-width: 768px) {
	.wrapper-content ol { margin: 28px 0 20px 32px }
	.wrapper-content ol > li:before { width: 30px; height: 30px; padding-top: 5px; padding-bottom: 16px }
	.wrapper-content ol > li { margin-bottom: 32px; padding-left: 20px; line-height: 1.7; font-weight: normal  }
	.wrapper-content ol > li img { margin: 20px 0 30px 0 }
	.wrapper-content ol > li span.inside-ol,
	.wrapper-content ul > li span.inside-ol { display: block; line-height:1 }
	.wrapper-content ol > li > ul { margin: 12px 0 0 16px; list-style-type: disc }
	.wrapper-content ol > li > ul > li { padding-left: 24px; margin: 0 0 12px 0 }
}

/* Mobiles */
@media screen and (max-width: 767px) {
	.wrapper-content ol { margin: 0 0 20px 32px }
	.wrapper-content ol > li:before { width: 20px; height: 22px; padding-top: 1px }
	.wrapper-content ol > li { margin-bottom: 16px; padding-left: 16px; line-height: 1.4; font-weight: normal !important; }
	.wrapper-content ol > li img { margin: 8px 0 12px 0 }

	.wrapper-content li span.inside-ol { line-height: 0.6; display: block }
	.wrapper-content ol > li > ul { margin: 4px 0 0 16px; list-style-type: disc }
	.wrapper-content ol > li > ul > li { padding-left: 4px; margin: 0 0 12px 0 }
}

/* ==== FOR MARKING UP WITH HTML TUTORIAL  ==== */
div.typewriter {
	margin-top: 5%;
	border: solid 1px #000;
	padding: 2%;
	background: rgb(234,234,234);
	font-family: monospace
}
div.typewriter p {
	font-family: monospace;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1600 - 320)));
	line-height: 1.3;
	margin: 0 0 14px 0;
	color: #000;
	font-weight: normal;
	font-style: normal
}



/*== Show/hide result button == */

.wrapper-button {
	text-align: right;
}

button.btn-show-hide-result {
    text-decoration: none;
	border-width: 2px;
	border-style: solid;
	font-weight: bold;
	border-radius: 4px;
	padding: 12px 24px;
	line-height: 1;
	margin: 0 0 32px 0;
	text-align:right;
	width: 160px;
	font-size: 16px;
	text-align: center;
}

button.btn-show-hide-result {
    border-color: blue;
    background-color: blue;
    color: #fff
}

button.btn-show-hide-result:hover, 
button.btn-show-hide-result:active {
    border-color: darkblue;
    background-color: darkblue;
    color: #fff
}

.console-log-outer-hide {
	max-height: 0;
	transition: max-height 0.4s ease-out;
	overflow: hidden;
}

.console-log-outer-show {
    max-height: 500px;
    transition: max-height 0.9s ease-in;
}

.console-log-show {
	opacity: 1;
	transition: opacity 0.4s;
	background-color: rgb(35,35,39);
	border-color: rgb(107,107,116);
}

.console-log-hide { 
    overflow: hidden;
	opacity: 0;
	transition: opacity 0.15s;
}

/* ============== FANCY HYPERLINKS =================== */

a.fancy-link:link, a.fancy-link:visited,
a.fancy-link:hover, a.fancy-link:active { 
    text-decoration: none;
    color: inherit;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 1px;
}

a.fancy-link:link, a.fancy-link:visited { color: #044d6c; border-bottom-color: #000 }

a.fancy-link:hover, a.fancy-link:active { color: #000; border-bottom-color: #000 }



/* =================== JUMBOTRON =================== */

.jumbotron { 
	background: linear-gradient(#0460CD, #021b79); 
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px 0;
}

.jumbotron h1, .jumbotron h2, .jumbotron h3 { font-weight:bold; color: #fff; letter-spacing: 1px; line-height: 1.2 }

.jumbotron h2 { font-weight: normal }

.jumbotron h1 { 
	font-size: calc(30px + (48 - 30) * ((100vw - 320px)/(1600 - 320)));
}

.jumbotron h2 { 
	font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320)));
}

.jumbotron h3 { 
	text-transform:uppercase; font-family: sans-serif;
	font-size: calc(15px + (20 - 15) * ((100vw - 320px)/(1600 - 320)));
} 

.jumbotron h3 a { 
	text-decoration: none; color: #fff;
	border-bottom-width:2px;
	border-bottom-style: solid;
	padding-bottom: 3px
}

.jumbotron h3 a:link,
.jumbotron h3 a:visited { border-bottom-color: #fff  }
.jumbotron h3 a:hover,
.jumbotron h3 a:active { border-bottom-color: transparent }

/* Desktop */
@media all and (min-width:768px) {
	.jumbotron { 
		text-align: left;
		padding: 4% 20% 4% 20%;
		margin-bottom:32px;
	}
	.jumbotron h2 { margin-bottom: 3% }
	.jumbotron h3 { margin-bottom: 4% }
}


/* Mobiles */
@media all and (max-width:767px) {
	.jumbotron { 
		text-align: center; 
		padding: 6% 8% 8% 8%;
		margin-bottom: 5%;
	}
	.jumbotron h2 { margin-bottom: 6% }
	.jumbotron h3 { margin-bottom: 9% }
}


/* ============== TABLE OF CONTENTS ================= */

.wrapper-content .box-toc { 
	border: solid 1px #d8f5fe; background: #d8f5fe; padding: 0 20px 18px 30px
}

.wrapper-content .box-toc h2 { 
	font-weight: 400;
	color: #230cea;
}

.wrapper-content .box-toc p a { 
	font-weight: normal;
	color: #230cea;
	text-decoration: none;
	padding-bottom:2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	font-weight: bold;
}

.wrapper-content .box-toc p.toc-indent a { 
	font-weight: normal;
}


.wrapper-content .box-toc p a:link,
.wrapper-content .box-toc p a:visited {
	border-bottom-color: #230cea;
}

.wrapper-content .box-toc p a:hover,
.wrapper-content .box-toc p a:active {
	border-bottom-color: #e74c3c;
}

.wrapper-content .box-toc p a.further-title { font-weight: bold }


.wrapper-content .box-toc p.toc-indent {
	margin-left: 40px;
}


/* Desktops */
@media screen and (min-width: 768px) {
	.wrapper-content .box-toc { padding: 22px 20px 22px 30px }
	.wrapper-content .box-toc p { line-height: 1.8; margin-bottom: 8px; margin-top: 18px }
	.wrapper-content .box-toc p.toc-indent { line-height: 1.4; margin-bottom: 6px; margin-top: 0px }
}

/* Mobiles */
@media screen and (max-width: 767px) {
	.wrapper-content .box-toc { padding: 20px 20px 18px 20px }
	.wrapper-content .box-toc p { line-height: 1.6 }
}


pre {
	font-family: 'Roboto Mono', monospace, sans-serif;
	color: #fff;
	font-weight: bold;
	font-weight: 400;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1600 - 320)));
	line-height: 1.8;
	margin: 12px 0 24px 0;
	padding: 16px 16px 18px 24px;
	background-color: rgb(24,53,75);
	word-break: normal;
	hyphens: none;
	white-space: pre;
	border-radius: 6px;
	overflow-x: auto;
}

pre.language-html { color: rgb(128,128,128); color: #fff }
pre.language-html .token.selector { color: rgb(206,145,120) }
pre.language-html .token.content { color: #fff }
pre.language-html .blue-dark { color: rgb(86,156,202 ) }
pre.language-html .blue-light { color: rgb(156,220,254 ) }
pre.language-html .brown { color: rgb(206,145,120) }
pre.language-html .yellow { color: rgb(220,220,170) }
pre.language-html .green-bright { color: rgb(78,201,143) }
pre.language-html .white { color: #fff }

pre.language-css .token.asterisk { color: rgb(62,196,202) }
pre.language-css .token.class { color:  rgb(215,186,125) }
pre.language-css .token.punctuation { color: #fff }
pre.language-css .token.property { color: rgb(123,220,254) }
pre.language-css .token.number, pre.language-css .token.unit { color: rgb(181,206,168) }
pre.language-css .token.value-text { color: rgb(206,145,81) }
pre.language-css .purple { color: rgb(197,134,161); }

pre.language-html .token.comment,
pre.language-css  .token.comment { color: rgb(106,153,85) }
pre.language-html .yellow,
pre.language-css  .yellow { color: rgb(220,220,170) }
/*
span.bold { font-weight: bold}
span.comment { color: rgb(106,153,85) }
span.white { color: #fff; font-weight: bold }



span.green-light { color: rgb(147,206,168); font-style: normal; font-weight: bold }


span.green-bright { color: rgb(78,201,143) }

span.green-dark { color: rgb(106,153,85) }

span.var, span.purple { color: rgb(130,167,255); font-weight: bold }
span.blue-em { color: rgb(103,216,219); font-style:italic; font-weight: bold }

span.string { color: rgb(255,51,51); font-style:italic; font-weight: bold }
span.red { color: rgb(255,51,51); font-weight: bold }
span.green { color: #7FFF00; font-weight: bold }

span.orange { color: #FF7F50; font-style: normal; font-weight: bold }
span.orange-light { color: rgb(215,186,125); font-style: normal; font-weight: bold }
span.purple { color: rgb(197,134,161); font-style: normal; font-weight: bold }

span.orangered { color: orangered; font-style: italic; font-weight: bold }
span.erroneousLine { background: yellow; color: red; font-weight: bold }


.brown-code    { color: #f08d49}
.string        { color: #00fbca }
.blue-light    { color: rgb(123,220,254) }
.blue-dark     { color: rgb(86,156,214) }
.comment-code  { color: rgb(106,153,85) }
.keyword-code  { color: rgb(197,134,161) }
.function-code { color: rgb(220,220,170) }
.green-number  { color: rgb(181,206,168) } 
.deep-purple   { color: rgb(197,134,192) }

*/

p .fake-link,
ol > li .fake-link, 
ol > li > ul > li .fake-link, ul > li .fake-link { color: rgb(3,102,217) }
p .fake-link b, 
ol li .fake-link b,
ol li ul li .fake-link b {  font-weight: bold; color: rgb(3,102,217) }

h1 .text-mono, h2 .text-mono, h3 .text-mono { font-size: 92% }
p .text-mono, ul li .text-mono, ol li .text-mono { font-size: 78% }


span.syn { 
	color: #fff; 
	background-color: #230cea; 
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: 'Roboto Mono', sans-serif;
	border-radius: 4px;
	font-style: normal;
}

span.csyn { 
	background-color: #000; 
	color: rgb(241,199,51);
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: 'Roboto Mono', sans-serif;
	border-radius: 4px;
	font-style: normal;
}

span.atsyn { 
	background-color: #d8f5fe; 
	color: #000;
	padding: 1px 6px 1px 6px;
	font-size: 92%;
	font-family: 'Roboto Mono', sans-serif;
	border-radius: 4px;
	font-style: normal;
}


/*
span.bold { font-weight: bold}
span.comment { color: rgb(106,153,85) }
span.white { color: #fff; font-weight: bold } */

table.table-gray {
	background-color: #f0f5f4;
	width: 100%;
	margin-bottom: 32px;
	padding:20px 20px 10px 20px;
}

table.table-gray td {
  vertical-align: top;
}


p.defhead0 {
	font-weight: bold;
	margin-bottom:0;
	margin-top:48px;
	background-color: yellow;
	padding: 10px 10px 10px 10px;
}

p.deftext0 {
	margin-top:0;
	background-color: #ffffe0;
	padding: 10px 10px 10px 10px;
	border-left: solid 1px yellow;
	border-right: solid 1px yellow;
	border-bottom: solid 1px yellow;
	margin-bottom:48px;
}
h2 span, h3 span {
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    font-weight: 500;
    letter-spacing: -1px;
}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
    margin-bottom: 32px;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}