animewebdesign/style.css at main · PikachuUsedSurf/animewebdesign · 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
@font-face {
    font-family:robotroc; src:url(https://files.jcink.net/uploads/vonskins/fonts/Robot_Roc_Not_a_Tilter.otf);
  }

  @keyframes blink1 {
    0% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:0;}
  }

  html {height:100%;}
  body {background:#161616 url(https://i.imgur.com/GZFwick.jpg) fixed center/cover; margin:0; height:100%; font-family:share tech mono; color:#999;}

  a, a:link {color:var(--default2); text-decoration:none;}

  h1,h2,h3,h4,h5,h6 {margin:0;}
  :root {
    --default1:#cb293c;
    --default2:#c52e95;
  }

  #top, #bottom, #left, #right {position:fixed; z-index:9999;}
  #top, #bottom {height:20px; background:#999; width:100%; text-align:center;}
  #left, #right {width:20px; background:#999; height:100%;}
  #bottom {bottom:0;}
  #right {right:0;}


  #top:before {content:''; display:inline-block; position:relative; top:10px; width:300px; height:0;border-top:#999 solid 30px; border-left:transparent solid 25px; border-right:transparent solid 25px;}

  #bottom:before {content:''; display:inline-block; position:relative; bottom:20px; width:300px; height:0; border-bottom:#999 solid 30px; border-left:transparent solid 25px; border-right:transparent solid 25px;}


  .viridian {width:100%; margin:0 auto; text-align:center; position:relative; height:100%; display:flex; flex-flow:column wrap; align-items:center; justify-content:center; position:relative;}

  #nav {margin:0 0 20px; font-weight:bold;}

  .viridian .gif {content:''; display:block; width:120px; height:120px; position:absolute; mix-blend-mode:screen; margin:570px 0 0; border-radius:100%}

  .banner-img {width:800px;}

  .viridian-banner {position:absolute; margin:150px 0 0;}
  .viridian-banner h1 {font:150px RobotRoc; color:var(--default1); position:relative;}

  .viridian-banner h1 span {position:relative; top:-1px; left:-1px; z-index:2; mix-blend-mode:difference;}

  .viridian-banner h1:before {content:'AURAMEOW'; display:block; position:absolute; z-index:-1; font:150px RobotRoc; color:#eee; mix-blend-mode:screen;}

  .viridian-banner h1:after {content:'AURAMEOW'; display:block; position:absolute; top:1px; left:1px; font:150px RobotRoc; color:#440da6; mix-blend-mode:lighten;}

  .viribanner-info {display:flex; flex-flow: row nowrap; text-align:center; align-items:flex-start;}

  .vb-info {flex: 1 0 auto; text-align:left; color:#ddd; font:12px Share Tech Mono; text-transform:uppercase;margin:0 5px;}

  .vb-info h3 {padding:10px; background:#eee; font:RobotRoc 12px; color:#222; position:relative; -webkit-clip-path: polygon(100% 0, 100% 75%, 95% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 75%, 95% 100%, 0 100%, 0 0);}

  .vb-info h3:after {content:''; background:#222; width:10px; float:left; height:15px; margin:0 5px 0 0;}


  .vb-info section:before {content:''; display:block; width:5px; height:5px; background:#eee; margin:10px 0 5px;}

  #viridian-wrap {background: rgba(35,35,35,0.7);padding:100px 0 140px;}

  #wrapper {width:1200px; margin:0 auto;}

  .viri-header {display:flex; flex-flow:row nowrap; padding:70px; border-style: solid; border-width:10px 0; border-image:url(https://i.imgur.com/W93wQzw.png) 100 0% repeat;}
  .viri-gif {background:#333 url(https://i.imgur.com/aJD8SIZ.gif) center/cover; background-blend-mode:soft-light; width:450px; height:250px; position:relative;}

  .viri-gif:before {content:''; display:block; position:absolute; top:0; left:0; width:450px; height:250px; background:rgba(5,5,5,0.5);}

  .viri-button {display:flex; flex-flow:row nowrap; position:relative; top:-20px; left:-20px; width:240px;}
  box {display:block; border:var(--default1) solid 1px; width:59px; height:59px; position:relative; margin:0 10px 0 0; flex-shrink:0;}
  box:before {content:''; display:block; width:1px; height:83px; transform:rotate(45deg); background:var(--default1); position:absolute; top:-12px; right:29px;}

  .viri-button section {font:12px/150% Share Tech Mono;}

  .viri-button p {margin:10px 0 0;}

  .viri-button p:before {content:'users>viridian>  '; display:inline; color:#eee;}

  .viri-button p:after {content:''; display:inline-block; height:9px; width:8px; background:#aaa; animation:blink1 0.7s step-start infinite;}

  .viri-button h5 {color:var(--default2); font:35px/100% Roboto;}
  .viri-button span {color:#eee; display:inline-block; font:900 14px/80% Roboto;}

  .vb-misc {clip-path:polygon(100% 0, 100% 90%, 95% 100%, 0 100%, 0 0); -webkit-clip-path:polygon(100% 0, 100% 90%, 95% 100%, 0 100%, 0 0);flex: 1 1 auto; background:rgba(5,5,5,0.3); margin:0 0 0 40px; overflow:hidden; position:relative;}

  #misc-img {position:absolute; top:-100px; right:-250px; height:900px; mix-blend-mode:darken;}