Add webring thingy to each page

[website] / global.css

/* VARIABLES */

:root {
        --b    : #000    ;
        --g    : #212121 ;
        --w    : #fff    ;
        --grey : #6b6b6b ;
        --dpur : #aa2bd4 ;
        --lpur : #d56ef7 ;
        --pink : #ff297f ;
        --cyan : #00ffff ;
}

/* FONTS */

@font-face {
        font-family : Saviour                    ;
        src         : url( '/font/Savior4.ttf' ) ;
}

@font-face {
        font-family : Atkinson                                         ;
        src         : url( '/font/Atkinson-Hyperlegible-Regular.ttf' ) ;
}
@font-face {
        font-family : Atkinson                                      ;
        src         : url( '/font/Atkinson-Hyperlegible-Bold.ttf' ) ;
        font-weight : bold                                          ;
}
@font-face {
        font-family : Atkinson                                        ;
        src         : url( '/font/Atkinson-Hyperlegible-Italic.ttf' ) ;
        font-style  : italic                                          ;
}
@font-face {
        font-family : Atkinson                                            ;
        src         : url( '/font/Atkinson-Hyperlegible-BoldItalic.ttf' ) ;
        font-style  : italic                                              ;
        font-weight : bold                                                ;
}

/* ANIMATIONS */

@keyframes glitch {
        0%   { opacity : 0% ; }
        33%  {
                opacity   : 100%                                                    ;
                transform : rotateX( 10deg ) skewX( 90deg ) translate( -2em , 2em ) ;
        }
        66%  { transform : translate( 2em , -2em ) ; }
        100% { transform : rotateX( 0deg ) skewX( 0deg ) translate( 0 , 0 ) ; }
}

/* STYLES */

html {
        scrollbar-color     : var(--pink) var(--w)     ;
        overflow-x          : hidden                   ;
        background-image    : url( '/img/bgdark.png' ) ;
        background-repeat   : repeat-y                 ;
        background-position : center top               ;
        background-color    : var(--b)                 ;
}

@media all and ( max-width : 42em ) {
        body { background-size : 47px , 47px ; }
        #wrap { width : calc( 100% - 94px ) !important ; }
}

@media all and ( max-width : 70em ) {
        body {
                background-image    : url( '/img/bgthinright2.png' ) ,
                                      url( '/img/bgthinleft2.png'  ) !important ;
        }
        #wrap { width : calc( 100% - 188px ) ; }
}

@media all and ( min-width : 70em ) {
        body {
                background-image    : url( '/img/bgright.png' ) ,
                                      url( '/img/bgleft.png'  ) ;
        }
        #wrap { width : calc( 100% - 280px ) ; }
}

body {
        margin              : 0 auto               ;
        width               : 100%                 ;
        min-height          : 100vh                ;
        overflow-x          : hidden               ;
        font-family         : Atkinson             ;
        background-repeat   : repeat-y , repeat-y  ;
        background-position : left top , right top ;
}

#wrap {
        margin             : 0 auto             ;
        max-width          : 52em               ;
        min-height         : 100vh              ;
        display            : grid               ;
        grid-template-rows : auto auto 1fr auto ;
        color              : var(--w)           ;
}

#banner {
        display                    : block                                    ;
        margin                     : 0 auto                                   ;
        animation                  : glitch 0.2s linear 1s 1 normal backwards ;
        max-width                  : 100%                                     ;
        transition                 : transform 0.05s                          ;
        transition-timing-function : ease-out                                 ;
}

a:hover > #banner , a:focus > #banner {
        transform : rotate( -1.5deg ) scale( 1.05 ) ;
}

#head {
        text-align  : center                   ;
        font-family : Saviour                  ;
        color       : var(--lpur)              ;
        line-height : 0.7                      ;
        font-size   : clamp( 1em , 8vw , 4em ) ;
}

p , ul { font-size : clamp( 1em , 5vw , 2em ) ; }
ul { list-style-type : '- ' ; }

time {
        color      : var(--grey)                   ;
        font-size  : clamp( 0.01em , 4vw , 1.2em ) ;
        text-align : right                         ;
}

img:not(#banner) , audio {
        display   : block                                        ;
        margin    : 0 auto                                       ;
        max-width : calc( 100% - 4em )                           ;
        filter    : drop-shadow( -0.5em -0.2em 0px var(--pink) )
                    drop-shadow(  0.5em  0.2em 0px var(--cyan) ) ;
}

img:not(#banner) { max-height : 50em ; }

audio {
        width            : 100%     ;
        background-color : var(--b) ;
}

footer {
        max-width  : 100%               ;
        margin     : 1em auto           ;
        text-align : center             ;
        color      : var(--grey)        ;
        font-size  : min( 1em , 2.1vw ) ;
}

footer span {
        display : inline-block ;
        font-size : min( 1.5em , 3.1vw ) ;
        padding-bottom : 1em ;
}

#webring-previous { float : left  ; }
#webring-next     { float : right ; }

a {
        color                      : var(--lpur)       ;
        transition                 : text-shadow 0.03s ;
        transition-timing-function : ease-out          ;
}
a:hover , a:focus {
        text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
}