@import url('https://fonts.googleapis.com/css?family=Cherry+Swash|Inconsolata|Poller+One|Raleway|Share+Tech+Mono|Sonsie+One|Stalinist+One&display=swap');
/*
font-family: 'Cherry Swash', ;
font-family: 'Inconsolata', ;
font-family: 'Poller One', ;
font-family: 'Raleway', ;
font-family: 'Sonsie One', ;
font-family: 'Stalinist One', ;
font-family: 'Share Tech Mono', ;
*/
html {
   scroll-behavior: smooth;
 }

/********************************************************************* styles voor html tags */
body, body *{box-sizing: border-box;}

body{
   font-size: 16px;
   background-color: #FFF;
   margin: 0;
   font-family: 'Raleway', sans-serif;
}

h1{
   font-size: 250%;
   font-weight: normal;
}

h2{
   font-size: 150%;
   font-weight: normal;
}
h3{
   font-size: 120%;
   font-weight: normal;
}
blockquote{
   border-left: 10px solid #C5C5C5;
   margin: 1em 4em; /*boven-onder:1em, links-rechts: 4em*/
   padding-left:1em;
   font-style: italic;
}
p, li, h1, h2, h3{
   line-height: 1.5em;
   margin:0;
   padding: .5em 0;
}
p{
   color: #222226;
}
.tekst > ul,
.tekst > ul li{
   margin: 0; 
   padding: 0;
   list-style: none;
}
.tekst > ul ul{
   margin: .5em 0; /*boven-onder:1em, links-rechts: 4em*/
   padding: 0;
}
.tekst > ul ul li{
	position: relative;
}
.tekst > ul > li{
   margin: 0;
   padding: 0;
}

.tekst > ul:last-child{padding-bottom: 1em;}
/********************************************************** styles voor classes*/
#container{
   margin: 0 auto;
   max-width: 900px;
   padding:0 40px;
   background-color: #FCFBFB;
   min-height: 100vh;   
   box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.tekst > ul > li > h2, 
.tekst > ul > li > h3 {
    padding-bottom: 0;
    border-bottom: 1px solid #e8e8e8;
}
.datum {
    text-align: right;
    float: right;
    color: #999;
    font-size: .8em;
	margin-top: -56px;
}
.code{
	position: relative;
	font-family: 'Share Tech Mono';
	background-color: rgb(90, 93, 97);
    color: #fcfbfb;
	padding:0 .5em;
	margin: 0 1.5em 0 0;
	/*width: 210px;*/
	display: inline-block;
	margin-bottom: 1px;
	text-decoration: none;
	border:1px solid transparent;
	transform-origin: right center;
	
}
.code::after {
	left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(90, 93, 97, 0);
    border-left-color: #5a5d61;
    border-width: 13px;
    margin-top: -13px;
}

.code:hover{
	transform: scale(1.5);
	border-color: #fff;
	background-color: rgba(239,242,246,1.00);
	color:rgba(22,21,21,1.00);
	transition: all .2s ease-in-out;
	z-index: 999;
}
.code:hover:after,
.code.verplicht:hover:after{
	border-left-color: rgba(239,242,246,1.00);
}

.verplicht{
   background-color: red;
}
.code.verplicht::after {
   border-left-color: red;
}

.tekst > ul > li > ul > li:after{
	content: '';
	width: 0;
	position: absolute;
	height: 1px;
	left: 0;
	top:100%;		
	background-color: rgba(230,234,238,1.00);
}
.tekst > ul > li > ul > li:hover:after{
	width: 100%;
	transition: all 1s ease-in-out;
}
/*
.code:hover{
	color: #000;
	background-color: #F6F6F6; 
}
*/
/*************************************************************typo logo met fonts.google.com */
.img{
   background-color: grey;
   padding: 2em;
   border-bottom: 10px dashed grey;
   position: relative;
   display: block;
   margin: 0 auto 4em auto;
   width: 455px;
}
.img span{display: block; padding: 0; line-height: 1em;}
.img .img1{
   font-size: 100px;
   font-family: 'Stalinist One', cursive;
   color: rgb(189, 237, 255);
}
.img .img2{
   font-size: 17px;
   font-family: 'Raleway', sans-serif;
   color: white;
   margin-top: -8px;
   letter-spacing: 0.013em;
   margin-left: 10px;
   text-align: left;
}
.img .img3{
   font-size: 44.5px;
   font-family: 'Sonsie One', cursive;
   color: rgb(255, 200, 0);
   text-indent: .2em;
   text-align: left;
}


.img:after {
   top: calc(100% + 10px);
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(191, 140, 140, 0);
   border-top-color: #808080;
   border-width: 228px;
   margin-left: -50%;
   transform: scaleY(.1);
   transform-origin: left top;
}

/*voorbeeld text-align*/
.flex-container{
   display: flex;
   flex-flow: row wrap;
}
.flex-container > div{
   flex: 0 1 calc(50% - 20px);
   background-color: #fcebe8;
   margin: 10px;
   padding: 1em;
}

input.codetext{
   font-family: 'Share Tech Mono';
   font-size: 1.5em;
   border-radius: 5px;
   border: 1px solid red;
   line-height: 1.5em;
   padding: 0 .5em;
}

p:has(> input){/*alleen op safari vanaf 15.4*/
   text-align: left;
}
.flex-container > div > p:nth-last-child(1){text-align: left;}
.flex-container > div > p:nth-last-child(1):before{
   content:'Kopieer deze code.';
}
input[type=text]:focus{
   background-color: blue;
   color: white;
}
.flex-container > div p input[type=text]:focus + span::after{
   content: 'Code is gekopieerd en zit in je klembord. Nu kun je hem plakken in je eigen code.';
   display: block;
   text-align: left;
}

.streamer {
   font-size: 1.5em;
   border-left: 10px solid #321c18;
   padding: 0 0 0 0.5em;
   margin: 0 0 0 .5em;
   line-height: 1.5;
   background: #e4b1a8;
   width: 70%;
   position: relative;
   float: right;
   font-style: italic;
   color: #321c18;
   text-align: left;

}