24 font-family : Saviour
;
25 src : url
( '/font/Savior4.ttf' ) ;
29 font-family : Hurmit
;
30 src : url
( '/font/Hurmit-Nerd-Font-Mono.otf' ) ;
34 font-family : Atkinson
;
35 src : url
( '/font/Atkinson-Hyperlegible-Regular.ttf' ) ;
38 font-family : Atkinson
;
39 src : url
( '/font/Atkinson-Hyperlegible-Bold.ttf' ) ;
43 font-family : Atkinson
;
44 src : url
( '/font/Atkinson-Hyperlegible-Italic.ttf' ) ;
48 font-family : Atkinson
;
49 src : url
( '/font/Atkinson-Hyperlegible-BoldItalic.ttf' ) ;
60 transform : rotateX
( 10deg ) skewX
( 90deg ) translate
( -2em , 2em ) ;
62 66% { transform : translate
( 2em , -2em ) ; }
63 100% { transform : rotateX
( 0deg ) skewX
( 0deg ) translate
( 0 , 0 ) ; }
69 scrollbar-color : var
(--pink
) var
(--w
) ;
71 background-image : url
( '/img/bgdark.png' ) ;
72 background-repeat : repeat-y
;
73 background-position : center top
;
74 background-color : var
(--b
) ;
77 @media all and
( max-width : 42em ) {
78 body
{ background-size : 47px , 47px ; }
79 #wrap { width : calc
( 100% - 94px ) !important
; }
82 @media all and
( max-width : 70em ) {
84 background-image : url
( '/img/bgthinright2.png' ) ,
85 url
( '/img/bgthinleft2.png' ) !important
;
87 #wrap { width : calc
( 100% - 188px ) ; }
90 @media all and
( min-width : 70em ) {
92 background-image : url
( '/img/bgright.png' ) ,
93 url
( '/img/bgleft.png' ) ;
95 #wrap { width : calc
( 100% - 280px ) ; }
102 overflow-x : hidden
;
103 font-family : Atkinson
;
104 background-repeat : repeat-y
, repeat-y
;
105 background-position : left top
, right top
;
113 grid-template-rows : auto auto
1fr auto
;
120 animation : glitch
0.2s linear
1s 1 normal backwards
;
122 transition : transform
0.05s ;
123 transition-timing-function : ease-out
;
126 a:hover
> #banner
, a:focus
> #banner
{
127 transform : rotate
( -1.5deg ) scale
( 1.05 ) ;
131 text-align : center
;
132 font-family : Saviour
;
133 color : var
(--lpur
) ;
135 font-size : clamp
( 1em , 8vw , 4em ) ;
138 p
, ul
, pre
{ font-size : clamp
( 1em , 5vw , 2em ) ; }
139 ul
{ list-style-type : '- ' ; }
141 text-align : justify
;
146 font-family : Saviour
;
147 color : var
(--lpur
) ;
148 font-size : clamp
( 1em , 8vw , 3em ) ;
153 overflow-x : scroll
;
154 scrollbar-color : var
(--pink
) var
(--g
) ;
158 min-width : calc
( 100% - 0.8em ) ;
159 padding : 0.8em 0.4em ;
160 font-size : clamp
( 0.5em , 3.5vw , 0.6em ) ;
164 font-family : Hurmit
, monospace
;
166 font-size : clamp
( 0.5em , 3.5vw , 0.8em ) ;
168 padding : 0.25em 0.4em ;
169 border-radius : 0.2em ;
170 background-color : var
(--g
) ;
171 display : inline-block
;
174 code span
.r
{ color : var
(--red
) ; }
175 code span
.g
{ color : var
(--grn
) ; }
176 code span
.y
{ color : var
(--ylw
) ; }
177 code span
.b
{ color : var
(--blu
) ; }
178 code span
.m
{ color : var
(--mag
) ; }
179 code span
.c
{ color : var
(--cyn
) ; }
182 color : var
(--grey
) ;
183 font-size : clamp
( 0.01em , 4vw , 1.2em ) ;
187 img:not
(#banner
) , audio
{
190 max-width : calc
( 100% - 4em ) ;
191 filter : drop-shadow
( -0.5em -0.2em 0px var
(--pink
) )
192 drop-shadow
( 0.5em 0.2em 0px var
(--cyan
) ) ;
195 img:not
(#banner
) { max-height : 50em ; }
199 background-color : var
(--b
) ;
205 text-align : center
;
206 color : var
(--grey
) ;
207 font-size : min
( 1em , 2.1vw ) ;
211 display : inline-block
;
212 font-size : min
( 1.5em , 3.1vw ) ;
213 padding-bottom : 1em ;
216 #webring-previous { float : left
; }
217 #webring-next { float : right
; }
220 color : var
(--lpur
) ;
221 transition : text-shadow
0.03s ;
222 transition-timing-function : ease-out
;
225 text-shadow : 0.2em 0 1px var
(--cyan
) , -0.2em 0 1px var
(--pink
) ;