Compare text

Find the difference between two text files

Real-time editor
Hide whitespace changes
Hide unchanged lines
Disable line wrap
Layout
Diff precision
Text styles
Syntax highlighting

Untitled diff

Created Diff never expires
4 removals
100 lines
10 additions
100 lines
body {
body {
background: black;
background: black;
}
}
#earth,
#earth,
#moon,
#moon,
#asteroid,
#asteroid,
#sun {
#sun {
position: absolute;
position: absolute;
border-radius: 50%;
border-radius: 50%;
}
}
#earth {
#earth {
height: 40px;
height: 40px;
width: 40px;
width: 40px;
background: deepskyblue;
background: deepskyblue;
box-shadow: 0 0 10px blue;
box-shadow: 0 0 10px blue;
top: 50%;
top: 50%;
left: 50%;
left: 50%;
margin: -200px 0 0 -20px;
margin: -200px 0 0 -20px;
-webkit-animation: Erevolve 12s linear infinite;
-webkit-animation: Erevolve 12s linear infinite;
animation: Erevolve 12s linear infinite;
animation: Erevolve 12s linear infinite;
transform-origin: 20px 200px;
transform-origin: 20px 200px;
z-index: 100;
z-index: 100;
}
}
#moon {
#moon {
top: -30px;
top: -40px;
left: 10px;
left: 15px;
height: 10px;
height: 10px;
width: 10px;
width: 10px;
background: white;
background: white;
-webkit-animation: Mrevolve 2s linear infinite;
/* -webkit-animation: Mrevolve 2s linear infinite; */
animation: Mrevolve 2s linear infinite;
/* animation: Mrevolve 2s linear infinite; */
transform-origin: 5px 30px;
/* transform-origin: 5px 30px; */
}
}
#asteroid {
#asteroid {
top: -10px;
top: -15px;
left: 0px;
left: 0px;
height: 6px;
height: 6px;
width: 6px;
width: 6px;
background: #aaa;
background: #aaa;
-webkit-animation: Arevolve 2s linear infinite;
-webkit-animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
transform-origin: 3px 10px;
transform-origin: 3px 20px;
}
}
#sun {
#sun {
height: 100px;
height: 100px;
width: 100px;
width: 100px;
background: gold;
background: gold;
box-shadow: 0 0 50px gold;
box-shadow: 0 0 50px gold;
top: 50%;
top: 50%;
left: 50%;
left: 50%;
margin: -50px 0 0 -50px;
margin: -50px 0 0 -50px;
}
}
@-webkit-keyframes Erevolve {
@-webkit-keyframes Erevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Erevolve {
@keyframes Erevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@-webkit-keyframes Mrevolve {
@-webkit-keyframes Mrevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Mrevolve {
@keyframes Mrevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@-webkit-keyframes Arevolve {
@-webkit-keyframes Arevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
@keyframes Arevolve {
@keyframes Arevolve {
0% {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
}
100% {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
Saved diffs