styles0.css

/**
 *
 * Welcome to my website! My name is Steven and I'm a Hr Process Engineer Professionally. 
 * 
 * 
 * As a hobby, I enjoy full stack web development, and have experience in various programming languages.
 *
 *
 * 
 * 
 *
 *
 *    **** How about a little live coding? ****
 *
 *
 *
 * You can skip everything by clicking skip animation at bottom.
 * 
 * 
 * Let's begin. We start by animating... well, everything.
*/

* {
 -webkit-transition: all 1s;
}



/**
* That didn't do much. But you'll see.
*
* Black on white is really boring,
* so let's do something about it.
*/

html {
 background: rgb(35, 45, 54);
}

/***
* Hold on...
*/

pre, a {
 color: white;
}

/**
* That's better. Sorry about your eyes.
*
* Working in this big empty space is tough.
*
* I'm going to make a nice area for us to work in.
*/

pre:not(:empty) {
 overflow: auto;
 background: rgb(31, 31, 31);
 border: 1px solid #ccc;
 max-height: 45vh;
 width: 49%;
 font-size: 14px;
 font-family: monospace;
 padding: 1vh 0.5vw;
 box-shadow: -4px 4px 2px 0 rgba(0,0,0,0.3);
 white-space: pre-wrap;
 outline: 0;
 margin: 1vh 0.5vw;
}

/**
* Okay. We're going to start filling up the screen.
* Let's get ready to do some work.
*/

#style-text {
 -webkit-transform: translateX(95%);
 position: absolute;
}

/**
* This is good, but all the text is white!
* Let's make it even more readable.
*/

.comment       { color: #857F6B; font-style: italic; }
.selector      { color: #E69F0F; }
.selector .key { color: #64D5EA; }
.key           { color: #64D5EA; }
.value         { color: #BE84F2; }
.value.px      { color: #F92772; }

/**
* Now we're getting somewhere.
* Time to get a little perspective.
*/

body {
 -webkit-perspective: 1000px;
}

#style-text {
 -webkit-transform: translateX(98.5%) rotateY(-10deg);
 -webkit-transform-origin: right;
 max-height: 93.1vh;
}

/**
* What is Markdown? Its a light-weight markup language. It's easy to read and write,
* and can be converted to HTML. It's a great way to write content for the web.
*/

pre:not(#style-text) {
 -webkit-transform: rotateY(10deg);
 wekkbit-transform-origin: left;
 
}