2020-09-11 19:14:22 +02:00
@ font-face { font-family : 'Jetbrain-regular' ; font-style : normal ; font-weight : 400 ; src : local ( "Jetbrain Regular" ) , local ( "Jetbrain-Regular" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono_Regular . ttf ) format ( "truetype" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-Regular . woff ) format ( "woff" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-Regular . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Jetbrain-regular' ; font-style : italic ; font-weight : 400 ; src : local ( "Jetbrain Regular" ) , local ( "Jetbrain-Regular" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono_Italic . ttf ) format ( "truetype" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-Italic . woff ) format ( "woff" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-Italic . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Jetbrain-Extrabold' ; font-style : normal ; font-weight : 700 ; src : local ( "Jetbrain ExtraBold" ) , local ( "Jetbrain-ExtraBold" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono_ExtraBold . ttf ) format ( "truetype" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-ExtraBold . woff ) format ( "woff" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-ExtraBold . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Jetbrain-Extrabold' ; font-style : italic ; font-weight : 700 ; src : local ( "Jetbrain ExtraBold" ) , local ( "Jetbrain-ExtraBold" ) , url ( / assets / fonts / JetBrainsMono_ExtraBold_Italic . ttf ) format ( "truetype" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-ExtraBold-Italic . woff ) format ( "woff" ) , url ( / assets / fonts / jetBrainsMono / JetBrainsMono-ExtraBold-Italic . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Poppins' ; font-style : normal ; font-weight : 300 ; src : local ( "Poppins Light" ) , local ( "Poppins-Light" ) , url ( / assets / fonts / poppins / Poppins-Light . ttf ) format ( "truetype" ) , url ( / assets / fonts / poppins / popin-light . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Poppins' ; font-style : italic ; font-weight : 300 ; src : local ( "Poppins Light" ) , local ( "Poppins-Light" ) , url ( / assets / fonts / poppins / Poppins-LightItalic . ttf ) format ( "truetype" ) , url ( / assets / fonts / poppins / popin-light-italic . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Poppins' ; font-style : normal ; font-weight : 500 ; src : local ( "Poppins Medium" ) , local ( "Poppins-Medium" ) , url ( / assets / fonts / poppins / Poppins-Medium . ttf ) format ( "truetype" ) , url ( / assets / fonts / poppins / popin-medium . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
@ font-face { font-family : 'Poppins' ; font-style : italic ; font-weight : 500 ; src : local ( "Poppins Medium" ) , local ( "Poppins-Medium" ) , url ( / assets / fonts / poppins / Poppins-MediumItalic . ttf ) format ( "truetype" ) , url ( / assets / fonts / poppins / popin-medium-italic . woff2 ) format ( "woff2" ) ; unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ; }
2020-12-25 12:39:46 +01:00
@ font-face { font-family : 'Collects' ; font-style : normal ; font-weight : 500 ; src : local ( "Collects" ) , local ( "Collects" ) , url ( / assets / fonts / fz . otf ) format ( "opentype" ) ; }
2020-09-11 19:14:22 +02:00
: root { --border-radius : 3 px ; --max-width : 1000 px ; --anim-speed : 200 ms ; }
html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , big , cite , code , del , dfn , em , img , ins , kbd , q , s , samp , small , strike , strong , sub , sup , tt , var , b , u , i , center , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td , article , aside , canvas , details , embed , figure , figcaption , footer , header , hgroup , menu , nav , output , ruby , section , summary , time , mark , audio , video { margin : 0 ; padding : 0 ; border : 0 ; font-size : 100 % ; font : inherit ; vertical-align : baseline ; }
article , aside , details , figcaption , figure , footer , header , hgroup , menu , nav , section { display : block ; }
html { scroll-behavior : smooth ; }
body { line-height : 1.75 ; }
ol , ul { list-style : none ; }
blockquote , q { quotes : none ; }
blockquote : before , blockquote : after , q : before , q : after { content : '' ; content : none ; }
table { border-collapse : collapse ; border-spacing : 0 ; }
body { -webkit- text-size-adjust : none ; }
mark { background-color : transparent ; color : inherit ; }
input :: -moz-focus-inner { border : 0 ; padding : 0 ; }
input , select , textarea { -moz- appearance : none ; -webkit- appearance : none ; -ms- appearance : none ; appearance : none ; }
@ -webkit-keyframes infiniteRotate { 0 % { -webkit- transform : rotate ( 0 deg ) ; }
100 % { -webkit- transform : rotate ( 360 deg ) ; } }
@ -moz-keyframes infiniteRotate { 0 % { -webkit- transform : rotate ( 0 deg ) ; }
100 % { -webkit- transform : rotate ( 360 deg ) ; } }
@ keyframes infiniteRotate { 0 % { -webkit- transform : rotate ( 0 deg ) ; }
100 % { -webkit- transform : rotate ( 360 deg ) ; } }
@ -webkit-keyframes backgroundBlink { 0 % { background-position : 73 % 0 % ; }
50 % { background-position : 28 % 100 % ; }
100 % { background-position : 73 % 0 % ; } }
@ -moz-keyframes backgroundBlink { 0 % { background-position : 73 % 0 % ; }
50 % { background-position : 28 % 100 % ; }
100 % { background-position : 73 % 0 % ; } }
@ keyframes backgroundBlink { 0 % { background-position : 73 % 0 % ; }
50 % { background-position : 28 % 100 % ; }
100 % { background-position : 73 % 0 % ; } }
@ -webkit-keyframes backgroundSize { 0 % { background-size : 100 % 150 % ; }
50 % { background-size : 150 % 100 % ; }
100 % { background-size : 100 % 150 % ; } }
@ -moz-keyframes backgroundSize { 0 % { background-size : 100 % 150 % ; }
50 % { background-size : 150 % 100 % ; }
100 % { background-size : 100 % 150 % ; } }
@ keyframes backgroundSize { 0 % { background-size : 100 % 150 % ; }
50 % { background-size : 150 % 100 % ; }
100 % { background-size : 100 % 150 % ; } }
html , body { margin : 0 ; padding : 0 ; background-color : var ( - - bg ) ; }
body { height : 100 vh ; width : 100 % ; font-family : "Poppins" , "Arial" , "Helvetica" , sans-serif ; font-weight : 300 ; color : var ( - - fg ) ; letter-spacing : 0 em ; background-color : var ( - - bg ) ; }
# main-wrapper { display : flex ; flex-wrap : wrap ; width : 100 % ; -webkit- transition : filter var ( - - anim - speed ) ease-in ; -moz- transition : filter var ( - - anim - speed ) ease-in ; -ms- transition : filter var ( - - anim - speed ) ease-in-out ; transition : filter var ( - - anim - speed ) ease-in ; z-index : 1 ; }
. content-wrapper { max-width : var ( - - max - width ) ; margin : auto ; }
. wrapper { margin : 20 px 40 px ; }
2020-09-18 12:06:10 +02:00
. hero { display : flex ; flex-wrap : wrap ; flex-direction : row ; align-content : center ; background-color : transparent ; justify-content : center ; background-size : cover ; background-position : center ; background-repeat : no-repeat ; padding : 0 ; position : relative ; min-height : 100 vh ; width : 100 vw ; }
2020-09-11 19:14:22 +02:00
2020-09-18 12:21:23 +02:00
. hero . textcontainer { background : var ( - - bg - alt ) ; background : linear-gradient ( 33 deg , transparent 0 % , var ( - - bg ) 90 % , transparent 90 % ) ; border-radius : var ( - - border - radius ) ; max-width : var ( - - max - width ) ; padding : 0 px 40 px 40 px 40 px ; }
2020-09-11 19:14:22 +02:00
. hero div { z-index : 10 ; }
2020-09-18 12:06:10 +02:00
. hero div h1 , . hero div p { flex : 1 0 100 % ; z-index : 10 ; color : var ( - - fg ) ; max-width : var ( - - max - width ) ; margin-top : 40 px ; }
2020-09-11 19:14:22 +02:00
. hero div h1 { font-size : 1.8 em ; }
2020-09-18 12:06:10 +02:00
. hero . imagecontainer { position : absolute ; top : 0 ; left : 0 ; width : 100 % ; height : 100 % ; background-image : url ( "../img/vignette.svg" ) ; background-size : 960 px ; background-repeat : repeat-x ; background-position : bottom ; z-index : 1 ; }
2020-09-11 19:14:22 +02:00
2020-12-15 13:32:20 +01:00
. hero . imagecontainer h4 { width : 90 vw ; /* height: auto; */ /* min-height: 100px; */ line-height : 1.011 em ; letter-spacing : -0 em ; color : var ( - - bg ) ; font-size : 15 vw ; display : inline ; opacity : 1 ; border-radius : var ( - - border - radius ) ; position : absolute ; bottom : 0 ; transform : rotate ( -3 deg ) ; overflow : hidden ; background : -webkit- linear-gradient ( 90 deg , var ( - - bg ) 25 % , transparent 100 % ) ; -webkit- background-clip : text ; -webkit- text-fill-color : transparent ; filter : blur ( 2 px ) ; }
2020-09-11 19:14:22 +02:00
2020-09-18 12:06:10 +02:00
. hero . splash { background-color : transparent ; display : flex ; flex-wrap : wrap ; padding : 40 px ; align-items : flex-start ; max-width : var ( - - max - width ) ; margin : auto ; }
2020-12-25 21:20:59 +01:00
. hero . splash . description { border-radius : var ( - - border - radius ) ; background : var ( - - bg - alt ) ; box-shadow : 15 px 15 px 28 px 24 px var ( - - bg ) ; -webkit- box-shadow : 15 px 15 px 28 px 24 px var ( - - bg ) ; -moz- box-shadow : 15 px 15 px 28 px 24 px var ( - - bg ) ; }
2020-09-18 12:06:10 +02:00
. hero . splash . description > * { margin : 40 px !important ; }
2020-12-15 13:32:20 +01:00
. hero . splash . description > ul { display : flex ; justify-content : space-between ; flex-wrap : wrap ; }
2020-12-14 20:19:04 +01:00
2020-12-25 12:39:46 +01:00
. hero . splash . description > ul . button { background-image : linear-gradient ( 228 deg , var ( - - accent1 - alt ) , var ( - - accent2 - alt ) ) ; background-size : 400 % 400 % ; -webkit- animation : backgroundBlink 7 s ease infinite ; -moz- animation : backgroundBlink 7 s ease infinite ; animation : backgroundBlink 7 s ease infinite ; width : 100 px ; height : 100 px ; line-height : 100 px ; margin : 0 0 10 px 0 ; padding : 0 ; font-size : 65 px ; }
2020-09-22 10:56:35 +02:00
2020-09-18 12:06:10 +02:00
. hero . splash h1 , . hero . splash h2 { font-size : 2 em ; }
. hero . splash p , . hero . splash h1 , . hero . splash h2 , . hero . splash h3 , . hero . splash h4 { text-align : left ; margin-top : 20 px ; }
. hero . splash h1 : first-child { margin-top : 0 ; }
. hero . splash div { max-width : unset ; margin : 0 ; flex : 1 1 300 px ; }
. hero . splash . splash-logo { padding : 0 ; margin : 0 ; }
2020-12-25 21:20:59 +01:00
@ media only screen and ( max-width : 759px ) { . hero . splash { text-align : center ; } . hero . splash div { min-width : 100 % ; padding : 20 px 0 ; } . hero . splash . splash-logo { padding : 20 px 0 ; } }
2020-09-18 12:06:10 +02:00
2020-12-15 13:32:20 +01:00
@ media only screen and ( max-width : 480px ) { . hero . splash . description h1 { font-size : 1.1 em ; } . hero . splash . description > ul . button { width : 75 px ; height : 75 px ; line-height : 75 px ; font-size : 55 px ; } }
2020-12-11 13:46:22 +01:00
2020-09-11 19:14:22 +02:00
section { flex : 1 1 100 % ; background-color : var ( - - bg ) ; z-index : 2 ; }
section . container { max-width : var ( - - max - width ) ; margin : 0 auto ; }
section h2 { text-align : center ; padding : 40 px 0 ; }
section : first-of-type { -webkit- box-shadow : none ; -moz- box-shadow : none ; box-shadow : none ; margin-top : 0 ; padding-top : 40 px ; }
. section-title { padding : 80 px ; }
2020-12-25 12:39:46 +01:00
footer { width : 100 % ; padding : 160 px 20 px 200 px 20 px ; background-color : var ( - - border - alt ) ; color : var ( - - bg ) ; background-image : url ( "../img/vignette-footer.svg" ) ; background-size : 500 px ; background-repeat : repeat-x ; background-position : top ; box-sizing : border-box ; z-index : 2 ; }
2020-09-11 19:14:22 +02:00
footer a { color : var ( - - bg ) ; }
2020-11-18 11:48:10 +01:00
footer . icon { color : var ( - - bg ) ; border : 1 px solid var ( - - bg ) ; }
2020-09-11 19:14:22 +02:00
2020-12-25 12:39:46 +01:00
footer . icon : hover { border : 1 px solid var ( - - accent2 ) ; color : var ( - - accent2 ) ; }
2020-11-17 17:31:38 +01:00
2020-09-11 19:14:22 +02:00
footer . footframe { display : flex ; flex-wrap : wrap ; justify-content : space-between ; max-width : var ( - - max - width ) ; margin : auto ; padding : 20 px ; }
footer . footframe div { flex : 0 1 300 px ; margin-bottom : 80 px ; }
footer . footframe div img { margin : auto ; display : block ; width : 100 % ; }
2020-12-25 12:39:46 +01:00
footer . footframe div li { line-height : 2 ; font-size : 1.5 em ; }
2020-09-11 19:14:22 +02:00
footer . footframe div li a { font-weight : 700 ; text-decoration : none ; color : var ( - - bg ) ; }
2020-12-25 12:39:46 +01:00
footer . footframe div li a : hover { color : var ( - - accent2 ) ; }
2020-09-11 19:14:22 +02:00
footer . footframe small { flex : 0 0 100 % ; box-sizing : border-box ; margin : 0 ; text-align : center ; font-size : 0.8 em ; }
footer . footframe small . label { display : none ; }
@ media only screen and ( max-width : 679px ) { footer . footframe { justify-content : center ; } footer . footframe div { flex-grow : 1 ; } }
. post-navigation { margin : 0 ; }
. post-navigation . container { display : flex ; flex-wrap : wrap ; justify-content : space-between ; padding : 40 px ; align-items : flex-start ; max-width : var ( - - max - width ) ; margin : 0 auto ; }
. post-navigation . container h2 { flex : 0 0 100 % ; margin-top : 40 px ; text-align : center ; }
. post-navigation . container . post-nav , . post-navigation . container . post-nav-next { flex : 1 0 200 px ; }
. post-navigation . container . post-nav h4 , . post-navigation . container . post-nav-next h4 { font-size : 2 em ; justify-self : right ; }
. post-navigation . container . post-nav { margin : 0 40 px 0 0 ; text-align : left ; }
. post-navigation . container . post-nav-next { margin : 0 0 0 40 px ; text-align : right ; }
. releases { padding : 80 px 0 ; }
. releases . container { max-width : var ( - - max - width ) ; margin : 0 auto ; padding : 40 px ; display : flex ; flex-wrap : wrap ; justify-content : space-between ; }
. releases . container h2 { flex : 0 0 100 % ; margin : 20 px ; }
. releases . container article { flex : 0 1 280 px ; max-width : 480 px ; margin : 20 px 0 ; }
. releases . container img { width : 100 % ; height : 100 % ; object-fit : cover ; border-radius : 5 px ; }
2020-12-11 13:46:22 +01:00
. streambox { text-align : center ; line-height : 2 em ; padding : 0 ; }
2020-09-11 19:14:22 +02:00
. streamer { max-width : var ( - - max - width ) ; margin : 80 px auto ; padding : 0 40 px ; text-align : center ; display : flex ; flex-wrap : wrap ; justify-content : space-around ; }
. streamer p { text-align : center !important ; }
. streamer . icon { flex : 0 0 100 px ; margin : 0 ; justify-self : center ; }
2020-12-25 21:20:59 +01:00
# pleroma . container { display : flex ; flex-wrap : wrap ; box-shadow : 15 px 15 px 28 px 24 px var ( - - border - alt ) inset ; border-radius : var ( - - border - radius ) ; justify-content : space-between ; }
# pleroma . container div { flex : 1 1 280 px ; padding : 20 px ; margin : 20 px ; overflow : hidden ; text-overflow : ellipsis ; background-color : var ( - - bg - alt ) ; box-shadow : 15 px 15 px 28 px 24 px var ( - - border - alt ) ; border-radius : var ( - - border - radius ) ; }
# pleroma . container div img { max-width : 120 px ; height : auto ; }
# pleroma . container div . date { font-size : 0.6 em ; }
# pleroma . container div . date img { border-radius : 40 px ; width : 40 px ; height : 40 px ; }
# pleroma . container div h2 { padding-top : 0 ; margin-bottom : 0 px ; }
# pleroma . container div hr { margin-top : 20 px ; border : 1 px solid var ( - - fg - alt ) ; }
@ media only screen and ( max-width : 720px ) { # pleroma . container { width : 100 vw ; justify-content : center ; } # pleroma . container div { flex : 1 1 280 px ; } }
2020-09-11 19:14:22 +02:00
h1 , h2 , h3 , h4 , h5 , h6 { font-family : "Collects" , "Jetbrain-Extrabold" , "Lucida Console" , Monaco , monospace ; }
h1 { font-size : 2.5 em ; }
h2 { font-size : 1.75 em ; }
h3 { font-size : 1.5 em ; }
strong { font-weight : 500 ; }
2020-11-17 17:19:35 +01:00
a { text-decoration-style : wavy ; text-decoration-color : transparent ; color : var ( - - accent1 ) ; -moz- transition : all var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; -webkit- transition : all var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; -ms- transition : all var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; transition : all var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; }
2020-09-11 19:14:22 +02:00
2020-11-17 17:19:35 +01:00
a : hover { color : var ( - - accent2 ) ; text-decoration-style : wavy ; text-decoration-color : unset ; }
2020-09-11 19:14:22 +02:00
2020-10-20 13:15:20 +02:00
. center { text-align : center ; }
2020-11-16 16:52:27 +01:00
. button { background-color : var ( - - accent2 ) ; padding : 1 em ; margin-bottom : 20 px ; display : inline-block ; border-radius : var ( - - border - radius ) ; text-align : center ; text-decoration : none ; text-transform : uppercase ; font-weight : 500 ; color : var ( - - bg ) ; -webkit- box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; -moz- box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; -webkit- transition : all var ( - - anim - speed ) ease-in-out ; -moz- transition : all var ( - - anim - speed ) ease-in-out ; -ms- transition : all var ( - - anim - speed ) ease-in-out ; transition : all var ( - - anim - speed ) ease-in-out ; background-image : linear-gradient ( 228 deg , var ( - - accent1 - alt ) , var ( - - accent2 - alt ) ) ; background-size : 400 % 400 % ; -webkit- animation : backgroundBlink 2 s ease infinite ; -moz- animation : backgroundBlink 2 s ease infinite ; animation : backgroundBlink 2 s ease infinite ; }
2020-09-11 19:14:22 +02:00
. button : hover { background-color : var ( - - accent1 ) ; color : var ( - - bg ) ; -webkit- box-shadow : 0 px 11 px 10 px -3 px var ( - - border - alt ) ; -moz- box-shadow : 0 px 11 px 10 px -3 px var ( - - border - alt ) ; box-shadow : 0 px 11 px 10 px -3 px var ( - - border - alt ) ; -webkit- transition : all var ( - - anim - speed ) ease-in-out ; -moz- transition : all var ( - - anim - speed ) ease-in-out ; -ms- transition : all var ( - - anim - speed ) ease-in-out ; transition : all var ( - - anim - speed ) ease-in-out ; }
. button : active { -webkit- box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; -moz- box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; box-shadow : 0 px 0 px 0 px -3 px var ( - - border - alt ) ; }
2020-12-11 13:46:22 +01:00
@ media only screen and ( max-width : 480px ) { . button { font-size : 0.75 em ; padding : 0.75 em ; } }
2020-09-11 19:14:22 +02:00
. normal-section { display : flex ; flex-wrap : wrap ; justify-content : space-around ; padding : 20 px ; -webkit- box-shadow : unset ; -moz- box-shadow : unset ; box-shadow : unset ; }
. normal-section h2 { flex : 0 0 100 % ; margin : 20 px ; }
. normal-section p { margin-top : 20 px ; }
. normal-section ul { width : 100 % ; }
. normal-section . icon { flex : 0 0 100 px ; margin : 0 0 20 px 0 ; display : inline-block ; width : 100 px ; height : 100 px ; border-radius : 200 px ; font-size : 40 px ; line-height : 100 px ; text-align : center ; }
. normal-section img { width : 100 % ; height : 100 % ; object-fit : cover ; border-radius : var ( - - border - radius ) ; }
. label { display : none ; }
2020-11-17 17:31:38 +01:00
. icon { flex : 0 0 45 px ; margin : 20 px ; font-size : 45 px ; border-radius : 100 px ; width : 100 px ; height : 100 px ; line-height : 100 px ; border : 1 px solid var ( - - accent1 ) ; color : var ( - - accent1 ) ; text-align : center ; text-decoration : none ; -moz- transition : border var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; -webkit- transition : border var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; -ms- transition : border var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; transition : border var ( - - anim - speed ) ease-in-out , color var ( - - anim - speed ) ease-in-out ; }
2020-09-11 19:14:22 +02:00
2020-11-17 17:31:38 +01:00
. icon : hover { border : 1 px solid var ( - - accent2 ) ; color : var ( - - accent2 ) ; }
2020-09-11 19:14:22 +02:00
. small { border-radius : 80 px ; width : 70 px ; height : 70 px ; line-height : 70 px ; font-size : 45 px ; margin-left : 0 ; }
. smaller { border-radius : 30 px ; width : 30 px ; height : 30 px ; line-height : 30 px ; font-size : 18 px ; margin : 10 px 10 px 10 px 0 ; }
2020-10-20 13:15:20 +02:00
# author { flex : 0 0 280 px ; margin : 0 ; }
2020-09-11 19:14:22 +02:00
# author . date { font-size : .85 em ; }
# author . author-image { margin-right : 10 px ; background-repeat : no-repeat ; background-size : cover ; border-radius : 150 px ; width : 150 px ; height : 150 px ; }
. info { padding : 40 px ; margin : auto ; }
. info . info-pages { padding-top : 40 px ; max-width : var ( - - max - width ) ; margin : auto ; }
2020-11-16 16:52:27 +01:00
. info . info-pages . container img { margin-left : auto ; margin-right : auto ; width : 100 % ; max-width : 600 px ; height : auto ; display : block ; }
2020-10-22 14:40:16 +02:00
2020-11-16 16:52:27 +01:00
. info . info-pages . container h6 { font-size : 0.8 em ; text-align : center ; }
2020-10-23 13:48:20 +02:00
2020-11-16 16:52:27 +01:00
. info . info-pages . container blockquote { font-weight : 700 ; border-left : 3 px dotted var ( - - fg ) ; padding-left : 40 px ; }
. info . info-pages . container ul { list-style-type : circle ; padding-left : 40 px ; }
2020-10-23 13:48:20 +02:00
2020-09-11 19:14:22 +02:00
. info p { margin : 20 px 0 ; }
. info h2 , . info h3 , . info h4 , . info h5 , . info h6 { text-align : left ; }
. news , . links { margin-top : 40 px ; padding : 0 ; display : flex ; flex-wrap : wrap ; }
. news h2 , . links h2 { flex : 0 0 100 % ; margin-bottom : 20 px ; }
. news > div , . links > div { background-size : cover ; background-repeat : no ; background-position : center center ; flex : 1 1 512 px ; min-height : 80 vh ; padding : 40 px ; box-sizing : border-box ; text-align : left ; }
. news . description , . links . description { min-height : unset ; }
. news . description h2 , . news . description p , . news . description a , . links . description h2 , . links . description p , . links . description a { text-align : center ; }
. news . description p , . links . description p { margin-top : 20 px ; }
. news . description p : last-child , . links . description p : last-child { margin-bottom : 40 px ; }
. news : nth-child ( even ) , . links : nth-child ( even ) { flex-direction : row-reverse ; }
. links > div { min-height : unset ; }
. linksbg { background-size : 100 % ; background : var ( - - bg ) ; background : linear-gradient ( 180 deg , var ( - - bg ) 26 % , var ( - - accent2 - alt ) 100 % ) ; }
. front-section { flex-direction : row-reverse ; -webkit- box-shadow : unset ; -moz- box-shadow : unset ; box-shadow : unset ; padding : 0 ; display : flex ; flex-wrap : wrap ; }
. front-section p , . front-section h1 , . front-section h2 , . front-section h3 , . front-section h4 { text-align : left ; margin-top : 20 px ; max-width : 570 px ; }
. front-section p : last-child { margin-bottom : 40 px ; }
. front-section > div { background-size : cover ; background-repeat : no ; background-position : center center ; flex : 1 1 380 px ; min-height : 50 vh ; padding : 20 px ; box-sizing : border-box ; text-align : left ; }
. front-section . description { min-height : unset ; }
. front-section . container { max-width : 460 px ; margin : 0 20 px 0 auto ; }
@ media only screen and ( max-width : 1080px ) { . front-section . container { margin : 0 20 px 0 20 px ; } }
. front-section : nth-child ( even ) { flex-direction : row ; }
. front-section : nth-child ( even ) . container { margin : 0 auto 0 20 px ; }
@ media only screen and ( max-width : 1000px ) { . front-section : nth-child ( even ) . container { margin : 0 20 px 0 20 px ; } }
# contact { padding : 20 px ; }
# contact > div { max-width : var ( - - max - width ) ; margin : auto ; padding : 40 px 20 px ; }
# contact h2 { padding-top : 20 px ; }
. normal-section { display : flex ; flex-wrap : wrap ; justify-content : space-around ; padding : 20 px ; -webkit- box-shadow : unset ; -moz- box-shadow : unset ; box-shadow : unset ; }
. textspace { height : 100 px ; }
input , textarea , select { width : 100 % ; padding : 12 px 20 px ; margin : 8 px 0 ; display : inline-block ; border : 1 px solid #ccc ; border-radius : var ( - - border - radius ) ; box-sizing : border-box ; font-family : "Poppins" , "Arial" , "Helvetica" , sans-serif ; font-size : 1 em ; }
input [ type = submit ] { width : 200 px ; background-image : linear-gradient ( 223 deg , var ( - - accent1 ) , var ( - - accent2 ) ) ; background-size : 800 % 800 % ; -webkit- animation : backgroundBlink 2 s ease infinite ; -moz- animation : backgroundBlink 2 s ease infinite ; animation : backgroundBlink 2 s ease infinite ; color : var ( - - bg ) ; padding : 14 px 20 px ; margin : 8 px 0 ; border : none ; border-radius : var ( - - border - radius ) ; cursor : pointer ; }
input [ type = submit ] : hover { background-image : linear-gradient ( 223 deg , var ( - - accent2 ) , var ( - - accent1 ) ) ; background-size : 800 % 800 % ; -webkit- animation : backgroundBlink 2 s ease infinite ; -moz- animation : backgroundBlink 2 s ease infinite ; animation : backgroundBlink 2 s ease infinite ; }
. contact-info { display : flex ; flex-wrap : wrap ; justify-content : space-between ; }
. contact-info label { display : none ; }
. contact-info input { flex : 1 1 330 px ; min-width : 240 px ; }
/*specific classes related to Checkbox skins*/
/* CSS Created by CSS CHECKBOX */
/**********************************/
/**** www.CSScheckbox.com *********/
/*general styles for all CSS Checkboxes*/
label { -webkit- touch-callout : none ; -webkit- user-select : none ; -khtml- user-select : none ; -moz- user-select : none ; -ms- user-select : none ; user-select : none ; display : none ; }
input . css-checkbox [ type = checkbox ] { position : absolute ; overflow : hidden ; clip : rect ( 0 0 0 0 ) ; height : 1 px ; width : 1 px ; margin : -1 px ; padding : 0 ; border : 0 ; }
input . css-checkbox [ type = checkbox ] + label . css-label { padding-left : 20 px ; height : 15 px ; display : inline-block ; background-repeat : no-repeat ; background-position : 0 0 ; font-size : 1 em ; vertical-align : middle ; cursor : pointer ; }
input . css-checkbox [ type = checkbox ] : checked + label . css-label { background-position : 0 -15 px ; }
. css-label { background-image : url ( /assets/img/check.png ) ; }
input . css-checkbox . lrg [ type = checkbox ] + label . css-label . lrg { padding-left : 22 px ; height : 20 px ; display : inline-block ; line-height : 20 px ; background-repeat : no-repeat ; background-position : 0 0 ; font-size : 1 em ; vertical-align : middle ; cursor : pointer ; }
input . css-checkbox . lrg [ type = checkbox ] : checked + label . css-label . lrg { background-position : 0 -20 px ; }
/* NAVIGATION */
# navbar { z-index : 10000 ; display : block ; }
. logo { filter : blur ( 20 px ) ; opacity : 0 ; text-decoration : none ; position : fixed ; top : 0 ; width : 100 % ; height : 60 px ; z-index : 100 ; -webkit- transition : all var ( - - anim - speed ) ease-in ; -moz- transition : all var ( - - anim - speed ) ease-in ; -ms- transition : all var ( - - anim - speed ) ease-in ; transition : all var ( - - anim - speed ) ease-in ; background-color : transparent ; background-repeat : no-repeat ; background-position : center center ; background-size : 95 % 95 % ; -webkit- box-shadow : 0 px 12 px 32 px -25 px var ( - - border - alt ) ; -moz- box-shadow : 0 px 12 px 32 px -25 px var ( - - border - alt ) ; box-shadow : 0 px 12 px 32 px -25 px var ( - - border - alt ) ; display : flex ; flex-wrap : wrap ; justify-content : flex-end ; align-items : center ; }
. logo > a { height : 40 px ; }
. logo : hover { filter : blur ( 0 px ) ; opacity : 1 ; -webkit- transition : all var ( - - anim - speed ) ease-in ; -moz- transition : all var ( - - anim - speed ) ease-in ; -ms- transition : all var ( - - anim - speed ) ease-in ; transition : all var ( - - anim - speed ) ease-in ; background-color : var ( - - bg ) ; }
. sticky { filter : blur ( 0 px ) ; opacity : 1 ; background-color : var ( - - bg ) ; -webkit- transition : all var ( - - anim - speed ) ease-in ; -moz- transition : all var ( - - anim - speed ) ease-in ; -ms- transition : all var ( - - anim - speed ) ease-in ; transition : all var ( - - anim - speed ) ease-in ; }
. navmenu { margin : 0 40 px 0 20 px ; font-size : 34 px ; color : var ( - - accent1 ) ; }
nav { position : absolute ; width : 300 px ; max-height : 90 vh ; max-width : 90 vw ; top : 50 % ; left : 50 % ; transform : translate ( -50 % , -50 % ) ; background-color : var ( - - bg ) ; border-radius : var ( - - border - radius ) ; display : flex ; flex-wrap : wrap ; }
nav ul { padding : 20 px ; width : 100 % ; }
nav li { list-style-type : none ; margin : 20 px ; padding : 0 ; }
nav li a { display : block ; font-size : 14 px ; }
nav li . button { display : block ; }
. modalDialog { position : fixed ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; background : var ( - - bg - alt ) ; z-index : 10 ; opacity : 0 ; -webkit- transition : opacity var ( - - anim - speed ) ease-in ; -moz- transition : opacity var ( - - anim - speed ) ease-in ; -ms- transition : opacity var ( - - anim - speed ) ease-in ; transition : opacity var ( - - anim - speed ) ease-in ; pointer-events : none ; }
. modalDialog : target { opacity : 1 ; pointer-events : auto ; }
. modalDialog > div { display : flex ; align-items : center ; position : relative ; margin : 100 px auto ; padding : 20 px ; border-radius : var ( - - border - radius ) ; }
. close-button { background-color : var ( - - accent2 ) ; color : var ( - - accent1 ) ; margin : 0 auto ; line-height : 48 px ; position : absolute ; right : -12 px ; text-align : center ; top : -10 px ; width : 48 px ; height : 48 px ; text-decoration : none ; font-weight : bold ; border-radius : 48 px ; -webkit- transition : all var ( - - anim - speed ) ease-in ; -moz- transition : all var ( - - anim - speed ) ease-in ; -ms- transition : all var ( - - anim - speed ) ease-in ; transition : all var ( - - anim - speed ) ease-in ; }
. close-button : hover { background-color : var ( - - accent1 ) ; color : var ( - - accent2 ) ; }
# closearea { position : fixed ; width : 100 % ; height : 100 % ; }
/* Background Video */
. fullscreen-bg { position : absolute ; height : 100 % ; width : 100 % ; overflow : hidden ; z-index : 0 ; background : var ( - - bg ) ; top : 0 ; left : 0 ; right : 0 ; z-index : 0 ; }
. fullscreen-bg__video { object-fit : cover ; width : 100 vw ; height : 100 vh ; position : absolute ; top : 0 ; left : 0 ; }
# myVideo { position : absolute ; right : 0 ; bottom : 0 ; min-width : 100 % ; min-height : 100 % ; }
/ * Audio Player Styles
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/* Default / Desktop / Firefox */
2020-12-25 12:39:46 +01:00
. album-player { display : flex ; flex-wrap : wrap ; flex-direction : column-reverse ; padding : 0 px 40 px ; justify-content : space-around ; flex-direction : row-reverse ; align-items : center ; max-width : var ( - - max - width ) ; margin : auto ; flex : 1 1 auto ; }
2020-09-11 19:14:22 +02:00
2020-12-25 12:39:46 +01:00
. album-player > div { margin : 20 px 0 ; flex : 1 0 300 px ; }
2020-09-11 19:14:22 +02:00
audio { margin : 0 ; width : 100 % ; }
. player-wrap { flex : 1 1 400 px ; max-width : 700 px ; border-radius : 5 px ; width : 100 % ; }
2020-12-25 12:48:45 +01:00
. player-wrap . shadow { text-shadow : 0 px 0 px 15 px var ( - - bg ) , 0 px 0 px 15 px var ( - - bg ) , 0 px 0 px 30 px var ( - - bg ) , 0 px 0 px 45 px var ( - - bg ) ; }
2020-12-25 12:39:46 +01:00
2020-09-11 19:14:22 +02:00
# plwrap ul { list-style : none ; padding : 0 ; }
2020-12-25 12:48:45 +01:00
# plwrap ul li { border-top : solid 1 px var ( - - bg ) ; }
2020-09-11 19:14:22 +02:00
# plwrap ul li : first-child { border-radius : 5 px 5 px 0 0 ; }
2020-12-25 12:48:45 +01:00
# plwrap ul li : last-child { border-radius : 0 0 5 px 5 px ; border-bottom : solid 1 px var ( - - bg ) ; }
2020-09-11 19:14:22 +02:00
# audiowrap { background-color : var ( - - bg ) ; margin : 0 auto 0 auto ; }
# plwrap { margin : 0 auto ; }
# tracks { flex : 1 0 200 px ; min-height : 65 px ; position : relative ; text-align : center ; text-decoration : none ; padding-top : 20 px ; }
# nowPlay { display : flex ; width : 100 % ; height : 80 px ; flex-wrap : unset ; justify-content : flex-start ; align-items : center ; background-color : var ( - - bg ) ; }
# npTitle { flex : 1 1 100 % ; margin : 0 ; padding : 21 px ; }
# npAction { display : none ; margin : 0 ; padding : 21 px ; font-size : 12 px ; }
# plList { margin : 0 ; }
2020-12-25 12:48:45 +01:00
# plList li { background-color : var ( - - bg - alt ) ; cursor : pointer ; margin : 0 ; padding : 21 px 0 ; border-left : 1 px solid var ( - - bg ) ; border-right : 1 px solid var ( - - bg ) ; border-top : 0 ; transition : all 400 ms ease-in-out ; }
2020-09-11 19:14:22 +02:00
2020-12-25 21:20:59 +01:00
# plList li : hover { background-color : var ( - - accent2 - alt ) ; color : var ( - - bg ) ; transition : all 400 ms ease-in-out ; }
2020-09-11 19:14:22 +02:00
. plItem { position : relative ; }
. plTitle { left : 40 px ; overflow : hidden ; position : absolute ; right : 65 px ; text-overflow : ellipsis ; top : 0 ; white-space : nowrap ; font-weight : bold ; padding-right : 10 px ; }
. plNum { padding-left : 20 px ; width : 20 px ; }
. plLength { padding-left : 21 px ; position : absolute ; right : 21 px ; top : 0 ; }
2020-12-25 21:20:59 +01:00
. plSel { background-color : var ( - - accent1 - alt ) !important ; cursor : pointer !important ; color : var ( - - bg ) ; }
2020-09-11 19:14:22 +02:00
2020-12-25 21:20:59 +01:00
. plSel : hover { background-color : var ( - - accent2 - alt ) !important ; }
2020-09-11 19:14:22 +02:00
a [ id ^ = "btn" ] { font-size : 1.5 em ; color : var ( - - fg ) ; cursor : pointer ; margin : 0 ; padding : 0 27 px 0 21 px ; text-decoration : none ; }
a [ id ^ = "btn" ] :: -moz-focus-inner { border : 0 ; padding : 0 ; }
. coverart { flex : 1 1 400 px ; justify-content : center ; display : flex ; flex-wrap : wrap ; max-width : 700 px ; }
. coverart # author { margin : 40 px 0 0 0 ; flex : 1 1 auto ; text-align : center ; }
. coverartwrapper { width : 70 % ; padding-top : 70 % ; /* 1:1 Aspect Ratio */ position : relative ; /* If you want text inside of it */ }
. coverartwrapped { position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; border-radius : 100 % ; padding-bottom : 0 ; background-size : cover ; }
. spinnit { -webkit- animation : infiniteRotate 2 s linear infinite ; /* Safari */ -moz- animation : infiniteRotate 2 s linear infinite ; animation : infiniteRotate 2 s linear infinite ; }
. paused { animation-play-state : paused ; }
. track-picker { display : flex ; flex-wrap : wrap ; margin : 0 ; padding : 0 ; background-color : var ( - - accent1 ) ; margin : 0 ; padding : 0 ; min-height : 50 vh ; text-align : left ; }
. track-picker . button { background-color : var ( - - accent1 ) ; color : var ( - - bg ) ; }
. track-picker . button : hover { background-color : var ( - - accent2 ) ; }
. track-picker > div { flex : 1 1 auto ; width : 50 % ; min-width : 280 px ; margin : 0 ; padding : 0 ; background-color : var ( - - bg ) ; -webkit- box-shadow : inset 0 px 23 px 25 px -25 px var ( - - border - alt ) ; -moz- box-shadow : inset 0 px 23 px 25 px -25 px var ( - - border - alt ) ; box-shadow : inset 0 px 23 px 25 px -25 px var ( - - border - alt ) ; }
. track-picker > div > h2 , . track-picker > div p { text-align : left ; margin : 20 px 40 px ; }
. track-picker > div p : last-child { margin-bottom : 40 px ; }
. track-picker . full-image { width : 50 % ; min-width : 280 px ; min-height : 50 vh ; background-color : transparent ; background-size : cover ; background-position : center ; }
. track-picker : nth-child ( even ) { flex-direction : row-reverse ; background-color : var ( - - accent2 ) ; text-align : right ; }
. track-picker : nth-child ( even ) . button { background-color : var ( - - accent2 ) ; }
. track-picker : nth-child ( even ) . button : hover { background-color : var ( - - accent1 ) ; }
. track-picker : nth-child ( even ) > div > h2 , . track-picker : nth-child ( even ) > div a , . track-picker : nth-child ( even ) > div p { text-align : right ; }
# fixedPlayer { background-color : var ( - - bg ) ; margin : 0 ; padding : 0 ; position : fixed ; bottom : 0 ; left : 0 ; width : 100 % ; z-index : 100000 ; -webkit- box-shadow : 0 px 3 px 35 px 2 px rgba ( 0 , 0 , 0 , 0.3 ) ; -moz- box-shadow : 0 px 3 px 35 px 2 px rgba ( 0 , 0 , 0 , 0.3 ) ; box-shadow : 0 px 3 px 35 px 2 px rgba ( 0 , 0 , 0 , 0.3 ) ; -webkit- transition : all 400 ms ease-in ; -moz- transition : all 400 ms ease-in ; transition : all 400 ms ease-in ; }
. showplayer { height : 120 px ; }
. hideplayer { height : 0 ; }
@ media only screen and ( max-width : 559px ) { . track-picker { background-size : 100 % ; } . track-picker . full-image { min-height : 100 vw ; } # nowPlay { align-items : baseline ; padding-bottom : 20 px ; } # tracks { flex : 1 0 100 px ; width : 100 px ; position : relative ; text-align : center ; text-decoration : none ; } a [ id ^ = "btn" ] { font-size : 1 em ; color : var ( - - fg ) ; cursor : pointer ; margin : 0 ; padding : 0 0 0 20 px ; text-decoration : none ; } # npTitle { font-size : 0.8 em ; text-decoration : none ; margin : 0 ; padding : 0 0 0 20 px ; } }
# trackArt { z-index : 5 ; overflow-x : hidden ; flex : 1 1 50 % ; min-width : 512 px ; height : 100 vh ; padding : 0 ; margin : 0 ; background-size : 100 % ; background : var ( - - bg - alt ) ; background : linear-gradient ( 180 deg , var ( - - bg - alt ) 0 % , var ( - - accent1 - alt ) 180 % ) ; }
# trackArt > section { position : absolute ; height : 100 vh ; width : 50 % ; background : transparent ; padding : 0 ; margin : 0 ; text-align : center ; }
# trackArt > section > * { margin : 40 px ; }
# trackArt . coverartwrapper { margin-top : 120 px ; margin-left : 50 % ; transform : translateX ( -50 % ) ; width : 50 % ; padding-top : 50 % ; /* 1:1 Aspect Ratio */ position : relative ; /* If you want text inside of it */ }
# trackArt . coverartwrapped { position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; border-radius : 100 % ; padding-bottom : 0 ; background-size : cover ; }
# trackArt . playbutton { cursor : pointer ; justify-self : center ; }
# trackInfo { flex : 1 1 50 % ; z-index : 5 ; height : 100 vh ; overflow-y : scroll ; overflow-x : hidden ; margin : 0 ; padding : 0 ; }
# trackInfo section { padding : 20 px ; background-color : var ( - - bg ) ; }
# trackInfo section > * { margin : 20 px ; }
# trackInfo section . info { margin : 20 px ; padding : 0 ; }
# trackInfo section p : first-child { margin-top : 80 px ; }
# trackInfo . post-nav-next { text-align : right ; }
# trackInfo . post-nav { text-align : left ; }
@ media only screen and ( max-width : 1023px ) { # trackArt { z-index : 5 ; min-width : 100 % ; } # trackArt section { position : absolute ; top : 0 ; margin : 0 ; width : 100 % ; height : 80 vh ; } # trackInfo { z-index : 5 ; height : unset ; overflow-y : unset ; } # trackInfo section p : first-child { margin-top : 20 px ; } }
. bouncer { -webkit- animation : backgroundSize 10 s ease infinite ; -moz- animation : backgroundSize 10 s ease infinite ; animation : backgroundSize 10 s ease infinite ; }
/* cookies */
# cookie-notice { display : none ; text-align : right ; position : fixed ; bottom : 0 ; width : 100 % ; background-color : var ( - - bg ) ; flex-wrap : wrap ; justify-content : space - evenly ; align-content : center ; align-items : center ; z-index : 10000000 ; -webkit- box-shadow : 0 px -12 px 32 px -25 px var ( - - border - alt ) ; -moz- box-shadow : 0 px -12 px 32 px -25 px var ( - - border - alt ) ; box-shadow : 0 px -12 px 32 px -25 px var ( - - border - alt ) ; }
# cookie-notice p { flex : 1 0 250 px ; margin : 40 px 20 px 40 px 40 px ; font-size : 0.8 em ; font-family : "Poppins" , "Arial" , "Helvetica" , sans-serif ; font-weight : 300 ; }
@ media only screen and ( max-width : 651px ) { # cookie-notice p { text-align : center ; margin : 40 px 40 px 20 px 40 px ; } # cookie-notice . yes { margin : 20 px 40 px 40 px 40 px ; } }
2020-11-24 20:16:44 +01:00
# cookie-notice button { border : none ; font-size : inherit ; font-family : inherit ; }
2020-09-11 19:14:22 +02:00
. yes { flex : 0 0 250 px ; -moz- transition : all var ( - - anim - speed ) ease-in-out ; -webkit- transition : all var ( - - anim - speed ) ease-in-out ; -ms- transition : all var ( - - anim - speed ) ease-in-out ; transition : all var ( - - anim - speed ) ease-in-out ; text-align : center ; background-position-x : 0 % ; background-position-y : 0 % ; background-repeat : repeat ; background-attachment : scroll ; background-image : linear-gradient ( 228 deg , var ( - - accent1 - alt ) , var ( - - accent2 - alt ) ) ; background-origin : padding-box ; background-clip : border-box ; background-size : 400 % 400 % ; -webkit- animation : backgroundBlink 2 s ease infinite ; -moz- animation : backgroundBlink 2 s ease infinite ; animation : backgroundBlink 2 s ease infinite ; margin : 40 px 40 px 40 px 20 px ; }
. yes : hover { -moz- transition : all var ( - - anim - speed ) ease-in-out ; -webkit- transition : all var ( - - anim - speed ) ease-in-out ; -ms- transition : all var ( - - anim - speed ) ease-in-out ; transition : all var ( - - anim - speed ) ease-in-out ; }
. editor-link { display : none ; margin-top : 0 ; padding-top : 30 px ; }
. editor-link . btn { border : 0 ; border-radius : var ( - - border - radius ) ; width : 100 % ; max-width : 500 px ; box-sizing : border-box ; text-decoration : none ; padding : 10 px 15 px ; margin : 0 ; font-size : 18 px ; cursor : pointer ; background-color : #f7e064 ; color : #333 ; box-shadow : 1 px 1 px 5 px 0 rgba ( 0 , 0 , 0 , 0.2 ) ; }
. editor-link . btn : hover { background-color : #f4d525 ; color : #333 ; }
. cms-editor-active . editor-link { display : block ; }
. noJSalbum { display : none ; }
# linearGradient2060 stop { stop-color : var ( - - accent2 ) ; }
# linearGradient2060 stop : nth-child ( even ) { stop-color : var ( - - fg ) ; }
. staff { max-width : var ( - - max - width ) ; padding : 0 ; margin : auto ; list-style : none ; display : flex ; flex-wrap : wrap ; }
. staff li { flex : 1 1 300 px ; display : flex ; flex-direction : column ; padding : 30 px 20 px ; box-sizing : border-box ; width : 100 % ; text-align : center ; }
. staff li . square-image { background-size : cover ; background-position : center ; width : 100 px ; height : 100 px ; border-radius : 200 px ; margin : 0 auto ; }
. staff . name { margin-top : 20 px ; font-weight : 700 ; }
. staff . position { color : var ( - - fg ) ; font-size : 1 em ; }
@ media only screen and ( max-width : 769px ) { . staff li . square-image { width : 70 px ; height : 70 px ; } }
. logo , # sticky { filter : blur ( 0 px ) ; opacity : 1 ; background-color : var ( - - bg ) ; }
. blurredout { filter : blur ( 0 px ) ; opacity : 1 ; background-color : var ( - - bg ) ; -webkit- transition : all var ( - - anim - speed ) ease-in ; -moz- transition : all var ( - - anim - speed ) ease-in ; -ms- transition : all var ( - - anim - speed ) ease-in ; transition : all var ( - - anim - speed ) ease-in ; }
. hero { padding-top : 120 px ; }
. player-wrap { display : none ; }
. noJSalbum { display : unset ; flex : 0 1 400 px ; border-radius : var ( - - border - radius ) ; width : 100 % ; }
# fixed-player { display : unset ; height : unset ; }
. hideWhenNoJS { display : none ; }
2020-12-25 12:39:46 +01:00
/*# sourceMappingURL=noscripts-20201225.css.map */
