@font-face {
font-family: 'Prociono';
src: local('Prociono Regular'), local('Prociono-Regular'),
url('https://ai.mof.x10.bz/res/p.woff2') format('woff2'),
url('https://ai.mof.x10.bz/res/p.woff') format('woff'),
url('https://ai.mof.x10.bz/res/p.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Nothing You Could Do';
src: local('Nothing You Could Do'), local('NothingYouCouldDo'),
url('https://ai.mof.x10.bz/res/n.woff2') format('woff2'),
url('https://ai.mof.x10.bz/res/n.woff') format('woff'),
url('https://ai.mof.x10.bz/res/n.ttf') format('truetype');
font-weight: 100;
font-display: swap;
}
@font-face {
font-family: 'Dream Orphanage Rg';
src: local('DreamOrphanageRg-Regular'),
url('https://ai.mof.x10.bz/res/do.woff2') format('woff2'),
url('https://ai.mof.x10.bz/res/do.woff') format('woff'),
url('https://ai.mof.x10.bz/res/do.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {
background-color: #FFF;
color: #000;
font-family: 'Prociono', serif;
font-size: 16px;
min-width: 100%;
min-height: 100%;
background-attachment: fixed;
cursor: url(res/cursor.png), auto;
-ms-interpolation-mode: nearest-neighbor;
/*image-rendering: crisp-edges;
image-rendering: pixelated;*/
}
a {
color: inherit;
text-decoration: none;
}
body {
margin: 0 !important;
padding: 0 !important;
background: #EEE url('bg/body.jpg') repeat 0 0;
-webkit-animation: 30s linear 0s normal none infinite animate;
-moz-animation: 30s linear 0s normal none infinite animate;
-ms-animation: 30s linear 0s normal none infinite animate;
-o-animation: 30s linear 0s normal none infinite animate;
animation: 30s linear 0s normal none infinite animate;
}
#index {
background-color: #FFF;
background-image: url(/index.png);
background-attachment: fixed;
background-position: center;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 5em;
padding-bottom: 5em;
}
.seperator {
background-image: url(bg/seperator.png);
background-position: center;
background-repeat: no-repeat;
height: 80px;
}
.line {
height: 3px;
background-color: black;
}
h1 {
font-family: 'Garamond', serif;
font-size: 2em;
}
.padded {
padding-left: 10vw;
padding-right: 10vw;
}
#flyer {
width: 100%;
height: 0px;
background-color: #000;
background-image: url(res/home.png);
background-attachment: fixed;
background-position: center;
transition: height 5s, opacity 5s;
}
#bg {
width: 100%;
height: 100vh;
background-color: #FFF;
background-repeat: no-repeat;
background-image: url(bg/1.jpg) no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-filter: grayscale(75%);
filter: grayscale(75%);
}
#bg2 {
width: 100%;
height: 50vh;
background-color: #FFF;
background-repeat: no-repeat;
background-image: url(bg/1.jpg) no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-filter: grayscale(75%);
filter: grayscale(75%);
}
#bg #ai {
position: absolute;
top: 10vh;
right: 15vw;
transition: top 0s;
width: 60vh;
}
#bg h1 {
position: absolute;
left: 20vw;
top: 40vh;
font-family: 'Garamond', serif;
font-size: 3vw;
text-shadow: 2px 3px #000, 0px -1px #000, 0px 1px #000, -1px 0px #000, 1px 0px #000, -1px -1px #000, 1px 2px #000, -1px 1px #000, 1px -1px #000;
transition: top 0s;
}
#header {
position: relative;
z-index: 1;
}
#headerbar {
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 25px;
background-color: #FFF;
box-shadow: 0px 1px #FFF, 0px 2px #000;
}
#fadeleft {
position: fixed;
left: 0px;
top: 0px;
z-index: 10;
}
#faderight {
position: fixed;
right: 0px;
top: 0px;
z-index: 10;
}
#headernews {
width: 100%;
font-family: 'Nothing You Could Do', cursive;
font-size: 19px;
color: black;
letter-spacing: 1px;
}
#headernews p {
display: inline;
position: relative;
}
#knob {
cursor: help;
position: fixed;
left: 0;
top: 27px;
}
#knob2 {
position: fixed;
right: 0;
top: 27px;
cursor: crosshair;
}
#knob3 {
position: fixed;
right: 50%;
margin-right: -80px;
top: 27px;
cursor: grab;
}
#knob4 {
position: fixed;
left: 144px;
top: 27px;
cursor: alias;
}
#knob5 {
position: fixed;
right: 108px;
top: 27px;
cursor: help;
}
#knobqr {
position: fixed;
left: 0px;
top: 89px;
cursor: help;
}
#knoben {
position: fixed;
right: 0;
top: 54px;
cursor: ne-resize;
}
.button {
width: 40vw;
background-color: rgba(255, 255, 255, 0.0);
border: 2px solid #000;
font-family: 'Dream Orphanage Rg';
font-size: 2em;
cursor: crosshair;
transition: 1s;
}
.button:hover {
background-color: #FFF;
color: #595959;
}
#prog-bar-cont {
width: 700px;
height: 31px;
position: fixed;
left: 50%;
margin-left: -350px;
bottom: 0%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
#prog-bar {
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 1px 3px rgba(255, 255, 255, 0.75) inset;
}
#background {
width: 100%;
height: 100%;
background: linear-gradient(270deg, #508030, #503F3f, #9fC7D3, #F5EcFf, #5b86b0, #f4c54f, #76a555);
background-size: 400% 400%;
-webkit-clip-path: polygon(228px 0, 0 0, 0 100%, 198px 100%); /* 664 633 */
clip-path: polygon(228px 0, 0 0, 0 100%, 198px 100%);
transition: clip 3s;
-webkit-transition: clip 3s;
-webkit-animation: background 30s ease infinite;
-moz-animation: background 30s ease infinite;
animation: background 30s ease infinite;
-webkit-filter: grayscale(40%);
filter: grayscale(40%);
}
#bar {
position: fixed;
left: 50%;
margin-left: -350px;
bottom: 0%;
}
@-webkit-keyframes animate {
from {background-position:0 0;}
to {background-position: 550px 250px;}
}
@-moz-keyframes animate {
from {background-position:0 0;}
to {background-position: 550px 250px;}
}
@-ms-keyframes animate {
from {background-position:0 0;}
to {background-position: 550px 250px;}
}
@-o-keyframes animate {
from {background-position:0 0;}
to {background-position: 550px 250px;}
}
@keyframes animate {
from {background-position:0 0;}
to {background-position: 550px 250px;}
}
@-webkit-keyframes background {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
@-moz-keyframes background {
0% {background-position: 0% 50%	}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
@keyframes background {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}



table {
border: 1px solid #000;
display: inline-block;
padding: 10px;
background: rgba(255, 255, 255, .5);
}
.codeimage {
height: 52px;
}
.codeimage:hover {
border: 5px #ddd outset;
}
.imgtd {
line-height: 0;
}
.codeimage.expanded {
height: initial;
max-height: 90vh;
max-width: 50vw;
}
.pages {
margin-top: 2em;
}
.page {
width: 1em;
/* height: 1em; */
height: 55px;
border: 1px solid #000;
margin-right: 0.25em;
margin-left: 0.25em;
margin-top: 0.25em;
background: rgba(255, 255, 255, .2);
font-size: 2em;
font-family: 'Nothing You Could Do', cursive;
display: inline-block;
transition: .5s;
}
.page:hover {
background: rgba(255, 255, 255, .8);
border: 1px dotted;
}
.thispage {
color: #000;
background: rgba(255, 255, 255, .9);
}
.collapser {
width: 11em;
height: 31px;
font-size: 17px;
font-weight: bold;
vertical-align: top;
}