cellproductions.github.io/index.css at master · CalciumKid/cellproductions.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
html
{
	height: 100%;
}

body
{
    margin: 0;
	background: rgb(155,154,152);
	background: -moz-linear-gradient(top,  rgba(155,154,152,1) 0%, rgba(191,190,188,1) 10%, rgba(221,221,221,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,154,152,1)), color-stop(10%,rgba(191,190,188,1)), color-stop(100%,rgba(221,221,221,1)));
	background: -webkit-linear-gradient(top,  rgba(155,154,152,1) 0%,rgba(191,190,188,1) 10%,rgba(221,221,221,1) 100%);
	background: -o-linear-gradient(top,  rgba(155,154,152,1) 0%,rgba(191,190,188,1) 10%,rgba(221,221,221,1) 100%);
	background: -ms-linear-gradient(top,  rgba(155,154,152,1) 0%,rgba(191,190,188,1) 10%,rgba(221,221,221,1) 100%);
	background: linear-gradient(to bottom,  rgba(155,154,152,1) 0%,rgba(191,190,188,1) 10%,rgba(221,221,221,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9a98', endColorstr='#dddddd',GradientType=0 );
	padding: 50px;
}

.banner
{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

#blog:hover
{
	cursor: pointer;
}

#main
{
	display: table;
    margin-left: auto;
    margin-right: auto;
	border-spacing: 10px;
	margin-top: 30px;

	position: static;
}

.project
{
	text-align: center;
	background-color: #aaaaaa;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;

	display: table-cell;
	padding: 16px 16px 4px 16px;
	font-family: "Trebuchet MS", Monaco, monospace;
	font-size: 22px;
}

.back-desc
{
	text-align: center;
}

.flip
{
	perspective: 1000;
	transition: 0.6s;
	transform-style: preserve-3d;
}

.front, .back
{
	backface-visibility: hidden;
	top: 0;
	left: 0;
}

.front
{
	z-index: 2;

	transform: rotateY(0deg);
}

.back
{
	transform: rotateY(180deg);
	position: absolute;
}

.flip:hover
{
	transform: rotateY(180deg);
}