2021-04-14 18:01:51 -05:00
: root {
2021-07-19 23:07:49 -05:00
--font-sans : ' IBM Plex Sans ' , - apple-system , BlinkMacSystemFont , ' Segoe UI ' , Roboto , Oxygen , Ubuntu , Cantarell , ' Open Sans ' , ' Helvetica Neue ' , sans-serif ;
--font-mono : ' IBM Plex Mono ' , Consolas , ' Andale Mono WT ' , ' Andale Mono ' , ' Lucida Console ' , ' Lucida Sans Typewriter ' , ' DejaVu Sans Mono ' , ' Bitstream Vera Sans Mono ' ,
' Liberation Mono ' , ' Nimbus Mono L ' , Monaco , ' Courier New ' , Courier , monospace ;
2021-07-21 09:45:34 -05:00
--color-accent : #ff5d01 ;
2021-04-14 18:01:51 -05:00
}
* {
2021-07-19 23:07:49 -05:00
box-sizing : border-box ;
margin : 0 ;
2021-04-14 18:01:51 -05:00
}
html {
2021-07-19 23:07:49 -05:00
background-color : #000014 ;
2021-04-14 18:01:51 -05:00
}
2021-07-19 23:07:49 -05:00
html ,
body {
padding : 0 ;
font-size : clamp ( 14 px , calc ( 1 rem + ( 3 vw - 1 .2 rem )) , 20 px ) ;
font-family : var ( -- font-sans ) ;
font-weight : 400 ;
background-repeat : no-repeat ;
color : #f3f4f6 ;
2021-04-14 18:01:51 -05:00
}
. visually-hidden {
2021-07-19 23:07:49 -05:00
clip : rect ( 0 0 0 0 ) ;
clip-path : inset ( 50 % ) ;
height : 1 px ;
overflow : hidden ;
position : absolute ;
white-space : nowrap ;
width : 1 px ;
2021-04-14 18:01:51 -05:00
}
a {
2021-07-19 23:07:49 -05:00
position : relative ;
text-decoration : none ;
2021-07-21 09:44:15 -05:00
color : var ( -- color - accent ) ;
2021-07-19 23:07:49 -05:00
padding : 0 .05 em 0 .125 em ;
margin : - 0 .05 em - 0 .125 em ;
transition : color 120 ms cubic-bezier ( 0 .23 , 1 , 0 .32 , 1 ) ;
z-index : 0 ;
display : inline-block ;
2021-04-14 18:01:51 -05:00
2021-07-19 23:07:49 -05:00
& : hover ,
& : focus {
color : rgba ( 0 , 0 , 0 , 1 ) ;
2021-04-14 18:01:51 -05:00
2021-07-19 23:07:49 -05:00
& : : before {
transform : scaleY ( 1 ) ;
2021-07-21 09:44:15 -05:00
background : var ( -- color - accent ) ;
2021-04-14 18:01:51 -05:00
}
2021-07-19 23:07:49 -05:00
}
2021-04-14 18:01:51 -05:00
2021-07-19 23:07:49 -05:00
& : visited {
2021-07-21 09:44:15 -05:00
// color: var(--color-accent);
color : var ( -- color - accent ) ;
2021-07-19 23:07:49 -05:00
& : hover ,
& : focus {
color : rgba ( 0 , 0 , 0 , 1 ) ;
2021-04-16 12:48:59 -05:00
}
2021-07-19 23:07:49 -05:00
}
2021-04-16 12:48:59 -05:00
2021-07-19 23:07:49 -05:00
& : : before {
transform-origin : bottom center ;
content : ' ' ;
display : block ;
position : absolute ;
top : 0 ;
right : 0 ;
bottom : 0 ;
left : 0 ;
inset : 0 ;
2021-07-21 09:44:15 -05:00
background : var ( -- color - accent ) ;
2021-07-19 23:07:49 -05:00
pointer-events : none ;
transform : scaleY ( 0 .05 ) ;
transition : transform 120 ms cubic-bezier ( 0 .23 , 1 , 0 .32 , 1 ) , background 120 ms cubic-bezier ( 0 .23 , 1 , 0 .32 , 1 ) ;
z-index : - 1 ;
}
2021-04-14 18:01:51 -05:00
}
2021-07-21 09:44:15 -05:00
a + a {
margin-left : 2 px ;
}
header {
text-align : center ;
}
header a {
color : var ( -- theme-text-lighter ) !important ;
font-weight : bold ;
}
header a : : before ,
header a : hover : : before {
background : none ;
}
header a : hover {
background : rgba ( 255 , 255 , 255 , 0 .1 ) ;
text-decoration : underline ;
}
header h1 a : hover {
}