/*
 * c64olors={
 * black:'0x000000',
 * white:'0xffffff',
 * red:'0x68372b',
 * cyan:'0x70a4b2',
 * purple:'0x6f3d86',
 * green:'0x588d43',
 * blue:'0x352879', (hmz : #003aff ..?)
 * yellow:'0xb8c76f',
 * orange:'0x6f4f25',
 * brown:'0x433900',
 * lightred:'0x9a6759',
 * darkgrey:'0x444444',
 * grey:'0x6c6c6c',
 * lightgreen:'0x9ad284',
 * lightblue:'0x6c5eb5', (hmz : #4e7fff; / 458aff) analogue tv's i guess ...
 * lightgrey:'0x959595'};
 * 
*/

@font-face {
   font-family: c64p;
   src: url('/media/fonts/c64p.ttf')
 }

@font-face {
   font-family: jb;
   src: url('/media/fonts/PICOBLA_.TTF')
 }
 
 @font-face {
   font-family: lookingfordebris;
   src: url('/media/fonts/VIBRA-Reg.ttf')
 }


body.page {

	#background:#70a4b2;
	background:#4e7fff;

}

div.centerit{

	position:absolute;
	left:50;
	top:50%;
	width:100%;
	transform:translate(0%,-50%);
	background:rgba(0,0,0,0.02)
	

}
div.skrull1 {

	-webkit-text-stroke: 1px black;
	font-family: jb;
	font-size: 64px;
	position:absolute;
	top:200px;
	left:5000px;
	text-align: left;
	#transform: rotate(-44deg);
	background : linear-gradient(to right, #000 5%,#FFF,10%,#000 15%, #FFF 20%, #000 30%, #FF0 40%,#FFF 41%, #000 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	animation: getin 10s ease-out 2;
	animation-direction : alternate;
	animation-delay: 2s;
}  

div.skrull2 {

	-webkit-text-stroke: 1px black;
	font-family: c64p;
	font-size: 64px;
	position:absolute;
	top:280px;
	left:5000px;
	text-align: left;
	#transform: rotate(-44deg);
	background : linear-gradient(to right, #000 5%,#FF0,10%,#000 15%, #FFF 20%, #000 30%, #FF0 40%,#000 41%, #AAA 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	animation: getin 10s ease-out 2;
	animation-direction : alternate;
	animation-delay: 4s;
}  

div.skrull3 {

	-webkit-text-stroke: 4px black;
	font-family: lookingfordebris;
	font-size: 64px;
	position:absolute;
	top:280px;
	left:5000px;
	text-align: left;
	#transform: rotate(-44deg);
	background : linear-gradient(to right, #000 5%,#FFF,10%,#000 15%, #FFF 20%, #000 30%, #FF0 40%,#FFF 41%, #000 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	animation: getin 10s ease-in 2;
	animation-direction : alternate;
	animation-delay: 6s;
}  

div.skrull4 {

	-webkit-text-stroke: 1px black;
	font-family: c64p;
	font-size: 64px;
	position:absolute;
	top:280px;
	left:5000px;
	text-align: left;
	#transform: rotate(-44deg);
	background : linear-gradient(to right, #000 5%,#FFF,10%,#000 15%, #FFF 20%, #000 30%, #F00 40%,#0F0 41%, #00F 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	animation: getin 10s ease-in 2;
	animation-direction : alternate;
	animation-delay: 8s;
}  



@keyframes getin {
	from {

		left:4000px;
	}
    to {

		left:0px;
		background-position: 100% center;
    }

 
}



div.logo {

 font-family: lookingfordebris;
 -webkit-text-stroke: 1px black;
 font-size: 128px;
 position:absolute;
 top:180px;
 left:130px;
 text-align: center;
  transform: rotate(-42deg);
#  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
# background: linear-gradient( 45deg, #000000 5%, #232528, #243756, #275cb2, #6d8fc6, #9dadc6 , #898b8e , #e3e5e8, #000000);
background : linear-gradient(to right, #000 5%,#FFF,10%,#000 15%, #FFF 20%, #000 30%, #FFF 80%);
  background-size: 200% auto;
  
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 5s linear infinite;
  
  }
  
  div.logo2 {
  
  #text-shadow : -4px -4px 0 #000, 10px -10px 0 #222, -2px 2px 0 #444, 2px px 0 #666;
  -webkit-text-stroke: 9px black;

 font-family: lookingfordebris;
 font-size: 128px;
 position:absolute;
 top:170px;
 left:160px;
 text-align: center;
  transform: rotate(-42deg);
#  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
# background: linear-gradient( 45deg, #000000 5%, #232528, #243756, #275cb2, #6d8fc6, #9dadc6 , #898b8e , #e3e5e8, #000000);
background : linear-gradient(to right, #000 5%,#FFF,10%,#000 15%, #FFF 20%, #000 30%, #FF0 40%,#FFF 41%, #000 80%);
  background-size: 200% auto;
  
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 1s linear infinite;
  
  }


@keyframes shine {
    to {
      background-position: 100% center;
    }

 
}
div.pagetmp{

	width: 100wh;
  height: 90vh;
  color: #fff;
  background: linear-gradient(45deg, #232528, #243756, #275cb2, #6d8fc6, #9dadc6 , #898b8e , #e3e5e8);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;

}

body.index {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background: linear-gradient(-45deg, #000000, #232528, #243756, #275cb2, #6d8fc6, #9dadc6 , #898b8e , #e3e5e8, #000000);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

div.page {

	width: 800px%;
	height: 100%;
	text-align: center;
    font-family: c64p;
}

div.scrollbox {

	background-color: #000000;
	margin: auto;
	width: 80%;
	height: 50%;
	border: 1px dotted green;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 5px;
}

div.actdata {

	font-family: c64p;
	font-size: 10px;
	background:#959595;
	padding:5px;
	border-style:double;
	border-color:#444444;
	text-align: left;
}

div.credzhedder1 {

	
}

div.credzhedder2 {

	font-family: c64p;
	background:#352879;
	color:#70a4b2;
	padding:2px;
	border:1px #70a4b2;
	padding-left:10px;
	margin:10px;
}

div.credzkouder {

	background:#003aff;
	#color:0x70a4b2;
	color:#4e7fff;
	padding:5px;
	margin:15px;
	border-style:double;
	border-color:#444444;
	text-align: left;
}

div.credzkouder2 {

	background:#444444;
	#color:0x70a4b2;
	color:#4e7fff;
	padding:5px;
	margin:15px;
	border-style:double;
	border-color:#444444;
	text-align: left;
}


div.diadiv {

	background:#959595;
	padding:5px;
	border-style:double;
	border-color:#444444;
	text-align: left;
}

div.section {

    margin: auto;
    text-align: center;
    width: 80%;
    border: none;

}

div.section1 {

    margin: auto;
    text-align: center;
    width: 90%;
    border: none;

}


div.section2 {

    margin: auto;
    text-align: left;
    width: 800px;
    border: none;

}


div.section_b {

    margin: auto;
    text-align: center;
    width: 90%;
    padding: 2px;
    border: 1px solid black;
}

div.section_nfotop {

    margin: auto;
    text-align: center;
    width: 90%;
    padding: 2px;
    border: 1px double black;
}


div.section_b2 {

    margin: auto;
    text-align: center;
    width: 90%;
    padding: 2px;
    font-family: c64p;
    border: 1px solid black;
}

div.logodiv{

	margin: auto;
	position:relative;
	width: 90%;
	border:3px double black;
}
div.section_scrollbox{

	background : #003aff;
	color : #4e7fff;
	text-align: center;
	width: 100%;
	height: 100px;
	font-family: c64p;
	border: 2px dotted black;
	overflow-x: hidden;
	overflow-y: scroll;
}

div.section_head{

	background : #003aff;
	color : #4e7fff;
	text-align: center;
	width: 100%;
	height: 100px;
	font-family: c64p;
	border: 2px dotted black;
}

div.OStats{

	background : #003aff;
	color : #4e7fff;
	text-align: center;
	width: 100%;
	height: 100px;
	font-family: c64p;
	border: 2px dotted black;
}

div.section_foot {

    margin: auto;
    text-align: center;
    width: 800px;
    border: 2px solid black;
    font-size: 75%;
}

pre {

 #color:#4e7fff;
 color:0x70a4b2;
}

pre.code64{

	background-color: #003aff;
	color: #458aff;
	text-align: left;
	margin: auto;
	width: 80%;
	max-height: 300px;
	border: 1px dotted green;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 5px;
	font-family:c64p;

}

th.menubtn {

    #background: #eaeaea;
    background : #4e7fff;
    color: #959595;
    padding-left: 4px;
    padding-right: 4px;
    padding-top : 2px;
    padding-bottom: 0px;
    border-style: none none double none;
    border-width : 3px;
    border-color: black;

}

.menuitem {

    background: #eaeaea;
    color: #959595;
    padding-left: 4px;
    padding-right: 4px;
    padding-top : 2px;
    padding-bottom: 0px;
    border-style: none none double none;
    border-width : 3px;
    border-color: black;
    font-family: c64p;

}

a {

    text-decoration: none;
    //background: #444444;
    color: #959595;
}

div.c64barblack {

	height:1px;
	display: block;
	width: 100%;
	background: #000000;
	font-family: c64p;
}
div.barblack {

	height:10px;
	display: block;
	width: 100%;
	background: #000000;
}

div.c64barwhite {

	height:1px;
	display: block;
	width: 100%;
	background: #FFFFFF;
}


div.c64bardarkgrey {

	height:1px;
	display: block;
	width: 100%;
	background: #444444;
	font-family: jb;
}
div.c64bargrey {

	height:1px;
	display: block;
	width: 100%;
	background: #6c6c6c;
}
div.c64bardarklightgrey {

	height:1px;
	display: block;
	width: 100%;
	background: #959595;
}


ol {

	width: 100%;
	#border: 30px double #352879;
	border-collapse: separate;
	border-spacing: 10px;
	#background : #352879;
	background : #003aff;
	font-family: c64p;
	#color: #4e7fff;
	text-align: left;
	padding: 1px;
}

ol.dia {

	width: 100%;
	#border: 30px double #352879;
	border-collapse: separate;
	border-spacing: 10px;
	#background : #352879;
	background : #444444;
	font-family: c64p;
	#color: #4e7fff;
	text-align: left;
	padding: 1px;
}

li.one {
background-image: linear-gradient(90deg,#000000 , #000000 , #000000, #444444, #000000, #6c6c6c, #000000,#444444, #6c6c6c, #000000, #959595, #000000, #ffffff, #959595,#ffffff, #6c6c6c, #959595, #6c6c6c, #444444, #000000 ,#444444, #000000 , #000000);

  background-size: 200% 100%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite;
	#background: #444444;
	padding-right: 20px;
	font-size:9px;
    padding: 10px;
    margin-left: 25px;
    margin: 2px;
}

li.two {

	background-image: linear-gradient(90deg,#000000 , #000000 , #000000, #444444, #6c6c6c, #959595, #ffffff, #959595, #6c6c6c, #444444, #000000 , #000000 , #000000);
	#background-image: linear-gradient(to right, #003aff, ##4e7fff);
    background-size: 200% 100%;
    -webkit-animation: Gradient 4s ease infinite;
    -moz-animation: Gradient 4s ease infinite;
    animation: Gradient 4s ease infinite;
    font-size:9px;
}
ol.subcred {

    margin: 10px;
    padding: 2px;
    background : #588d43;
}

ul.cred {
    list-style-type: circle;
    margin: 10px;
    color : #9ad284;
    background: #588d43;
        padding: 5px;
        font-family: c64p;
        font-size:9px;
        
    
    
  }
  
li.cred {

	background: #444444;
	border-bottom: 2px solid #959595;
	border-right: 2px solid #959595;
	padding: 2px;
    margin-bottom: 5px;
    #border: 2px;
}

div.jbscr{


	background-image: linear-gradient(to bottom right, #2eb2f3, #ffffff);
	width: 100%;
	height: 800px;
	border: 1px dotted black;
	overflow-x: hidden;
	overflow-y: scroll;
	border-radius: 0px 0px 40px 40px;
}

div.jbpic{

	background-image: linear-gradient(to bottom right, #ffffff, #2eb2f3);
	width: 100%;
	height: 800px;
	display : flex;

	align-items: center;
	border: 1px dotted black;
	border-radius: 0px 0px 40px 0px;
}



th.jb{

    margin: 10px;
    color : #000000;
    background: #2eb2f3;
	padding: 5px;
	font-family: jb;

}

ul.jb {
    list-style-type: circle;
    margin: 10px;
    color : #000000;
    background: #2eb2f3;
	padding: 5px;
	font-family: jb;
	font-size:20px;
        
    
    
  }
  
li.jb {

	background: #1da1f2;
	border-bottom: 2px solid #0c90e1;
	border-right: 2px solid #0c90e1;
	padding: 2px;
    margin-bottom: 10px;
    #border: 2px;
}
  
.cursor text::after {

	content: "";
	width:14px;
	height:14px;
	background: #70a4b2;
	display: inline-block;
	animation: cursor-blink 1.5s steps(2) infinite;
	
}
.cursor text{

	display:grid;
	#grid-template-rows: 1fr 2fr 1fr;
	#gap: 0px 14px;
}

@keyframes cursor-blink {

	0% {
		opacity: 0;
		}
}



table.maintable {
  table-layout: fixed;
  width: 100%;
  border: 30px double #352879;
  border-collapse: separate;
  border-spacing: 10px;
  #background : #352879;
  background : #003aff;
  font-family: c64p;
  #color: #4e7fff;
}

table.settable {
  table-layout: fixed;
  width: 100%;
  border: 30px double #352879;
  border-collapse: separate;
  border-spacing: 10px;
  #background : #352879;
  background : #003aff;
  font-family: c64p;
  #color: #4e7fff;
}

fieldset.one {

	font-family: c64p;
	background : #003aff;
	border : 3px double #4e7fff;
	border-radius : 8px;
	text-align: left;
}

fieldset.two {

	font-family: c64p;
	background : #003aff;
	border : 3px double #70a4b2;
	border-radius : 8px;
	color: #4e7fff;
}

h1.nftitle{

	font-family: c64p;
}

legend {

	font-family: c64p;
	background : #003aff;
	border : 5px double #70a4b2;
	border-radius: 40px 0px 0px 0px;
	padding : 10px;
	margin-bottom: 10px;
	color: #4e7fff;
}


@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
