-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.css
49 lines (45 loc) · 2.6 KB
/
main.css
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
/***************************
containers
***************************/
*{font-family: 'Nova Round', cursive !important; letter-spacing:2px; box-sizing:border-box; text-align:center;}
strong{font-weight:bold;}
em{font-weight:italic;}
.container{display:flex; align-items:center; flex-direction:row; justify-content:space-around;
background:url('http://68.media.tumblr.com/6a2fd8ae12f53e9a918b35f24ccde72d/tumblr_ojonq00tgk1sj6gx1o1_1280.jpg') center center; background-repeat:no-repeat; background-size:cover; min-height:100vh;
}/*inner-container*/
.secondary{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 0; margin-right:15px;}/*right-column*/
.primary{ text-align:center; color:white; display:flex; justify-content:center; align-items:center; font-size:6vw; padding:30px 0;}/*quote*/
.quote{text-shadow:5px 5px 5px #002b56;
transition:2s; padding:15px;}
/***************************
fan art link
***************************/
.fanart{background-color:rgba(0,0,0,.3); border-radius:5px; height:45px; font-size:1.25em; width:200px; margin-top:20px; display:flex; justify-content:center; text-align:center;}
.fanart a{color:#67CEB1; text-shadow:.1px 2px black; text-decoration:none;}
.fanart:hover{text-shadow:.1px 2px black; font-size:1.2em;}
/***************************
twitter
***************************/
.twitter{background-color:#55acee; border-radius:5px; height:45px; width:200px;}
.twitter a{color:white; text-decoration:none; font-size:1.7em; letter-spacing:4px; text-shadow:.1px 2px black;}
.twitter a:hover{letter-spacing:3px; text-shadow:.1px 1px #492153;}
/***************************
new quote
***************************/
.new{font-size:3em; color:white; padding:10px 40px; text-shadow:2.5px 2.5px black;}
.new:hover{color:#67CEB1; cursor:pointer; text-shadow:2.5px 2.5px #492153;}
.new, .wrap, .gradient, .twitter, .quotebox{display:flex; justify-content:center; align-items:center;}
/***************************
learn more
***************************/
.learn-more{width:220px; text-shadow:1px 1px navy; color:white; background-color:rgba(0,0,0,.3); border-radius:5px; padding:5px; line-height:19px;}
.learn-more a{color:#67CEB1; font-size:1.3em; text-decoration:none; text-shadow:2.5px 2.5px black;}
.learn-more a:hover{text-shadow:2.5px 2.5px black;}
.wiki{margin:20px 0; border-bottom:dotted #67CEB1 1px; text-align:center;}
/***************************
media query
***************************/
@media (max-width: 400px) {
.secondary{margin:0 auto;}
.container{display:flex; flex-direction:column; justify-content:center; align-items:center;}
}