Updated 26 files via CloudCannon

This commit is contained in:
CloudCannon 2020-09-18 10:06:10 +00:00
parent 61db0f8387
commit e86445f31b
26 changed files with 276 additions and 636 deletions

View file

@ -53,20 +53,38 @@ body { height: 100vh; width: 100%; font-family: "Poppins", "Arial", "Helvetica",
.wrapper { margin: 20px 40px; }
.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: 40px; position: relative; min-height: 80vh; width: 100vw; }
.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: 100vh; width: 100vw; }
.hero .textcontainer { background-color: var(--bg-alt); border-radius: var(--border-radius); max-width: 700px; padding: 20px 20px 40px 20px; }
.hero .textcontainer { background: #020024; background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); border-radius: var(--border-radius); max-width: var(--max-width); padding: 0px 40px 40px 40px; }
.hero div { z-index: 10; }
.hero div h1, .hero div p { flex: 1 0 100%; width: 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1, .hero div p { flex: 1 0 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1 { font-size: 1.8em; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 240px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 960px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer h4 { width: 90vw; /* height: auto; */ /* min-height: 100px; */ line-height: 1.011em; letter-spacing: -0em; color: var(--bg); font-size: 15vw; display: inline; opacity: 1; border-radius: var(--border-radius); position: absolute; bottom: 0; transform: rotate(-3deg); overflow: hidden; background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(1px); }
.hero .splash { background-color: transparent; display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.hero .splash .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.hero .splash .description > * { margin: 40px !important; }
.hero .splash h1, .hero .splash h2 { font-size: 2em; }
.hero .splash p, .hero .splash h1, .hero .splash h2, .hero .splash h3, .hero .splash h4 { text-align: left; margin-top: 20px; }
.hero .splash h1:first-child { margin-top: 0; }
.hero .splash div { max-width: unset; margin: 0; flex: 1 1 300px; }
.hero .splash .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .hero .splash div { min-width: 100%; padding: 20px 0; } .hero .splash .splash-logo { padding: 20px 0; } }
section { flex: 1 1 100%; background-color: var(--bg); z-index: 2; }
section .container { max-width: var(--max-width); margin: 0 auto; }
@ -77,7 +95,7 @@ section:first-of-type { -webkit-box-shadow: none; -moz-box-shadow: none; box-sha
.section-title { padding: 80px; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 400px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 200px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer a { color: var(--bg); }
@ -260,26 +278,6 @@ a:hover { color: var(--accent1); text-decoration-style: wavy; text-decoration-co
@media only screen and (max-width: 1000px) { .front-section:nth-child(even) .container { margin: 0 20px 0 20px; } }
.front-section:nth-of-type(2) { margin-top: 40px; }
.splash { background-color: transparent; }
.splash .container { display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.splash .container .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.splash .container h1, .splash .container h2 { font-size: 2em; }
.splash .container p, .splash .container h1, .splash .container h2, .splash .container h3, .splash .container h4 { text-align: left; margin-top: 20px; }
.splash .container h1:first-child { margin-top: 0; }
.splash .container div { max-width: unset; margin: 0; flex: 1 1 300px; padding: 0 0 0 80px; }
.splash .container .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .splash .container div { min-width: 100%; padding: 20px 0; } .splash .container .splash-logo { padding: 20px 0; } }
#contact { padding: 20px; }
#contact > div { max-width: var(--max-width); margin: auto; padding: 40px 20px; }
@ -356,7 +354,7 @@ nav li .button { display: block; }
/* Audio Player Styles
================================================== */
/* Default / Desktop / Firefox */
.album-player { display: flex; flex-wrap: wrap; padding: 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player { display: flex; flex-wrap: wrap; padding: 80px 40px 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player > div { margin: 20px 0; }

File diff suppressed because one or more lines are too long

View file

@ -85,20 +85,38 @@ body { height: 100vh; width: 100%; font-family: "Poppins", "Arial", "Helvetica",
.wrapper { margin: 20px 40px; }
.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: 40px; position: relative; min-height: 80vh; width: 100vw; }
.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: 100vh; width: 100vw; }
.hero .textcontainer { background-color: var(--bg-alt); border-radius: var(--border-radius); max-width: 700px; padding: 20px 20px 40px 20px; }
.hero .textcontainer { background: #020024; background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); border-radius: var(--border-radius); max-width: var(--max-width); padding: 0px 40px 40px 40px; }
.hero div { z-index: 10; }
.hero div h1, .hero div p { flex: 1 0 100%; width: 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1, .hero div p { flex: 1 0 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1 { font-size: 1.8em; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 240px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 960px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer h4 { width: 90vw; /* height: auto; */ /* min-height: 100px; */ line-height: 1.011em; letter-spacing: -0em; color: var(--bg); font-size: 15vw; display: inline; opacity: 1; border-radius: var(--border-radius); position: absolute; bottom: 0; transform: rotate(-3deg); overflow: hidden; background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(1px); }
.hero .splash { background-color: transparent; display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.hero .splash .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.hero .splash .description > * { margin: 40px !important; }
.hero .splash h1, .hero .splash h2 { font-size: 2em; }
.hero .splash p, .hero .splash h1, .hero .splash h2, .hero .splash h3, .hero .splash h4 { text-align: left; margin-top: 20px; }
.hero .splash h1:first-child { margin-top: 0; }
.hero .splash div { max-width: unset; margin: 0; flex: 1 1 300px; }
.hero .splash .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .hero .splash div { min-width: 100%; padding: 20px 0; } .hero .splash .splash-logo { padding: 20px 0; } }
section { flex: 1 1 100%; background-color: var(--bg); z-index: 2; }
section .container { max-width: var(--max-width); margin: 0 auto; }
@ -109,7 +127,7 @@ section:first-of-type { -webkit-box-shadow: none; -moz-box-shadow: none; box-sha
.section-title { padding: 80px; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 400px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 200px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer a { color: var(--bg); }
@ -259,26 +277,6 @@ a:hover { color: var(--accent1); text-decoration-style: wavy; text-decoration-co
@media only screen and (max-width: 1000px) { .front-section:nth-child(even) .container { margin: 0 20px 0 20px; } }
.front-section:nth-of-type(2) { margin-top: 40px; }
.splash { background-color: transparent; }
.splash .container { display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.splash .container .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.splash .container h1, .splash .container h2 { font-size: 2em; }
.splash .container p, .splash .container h1, .splash .container h2, .splash .container h3, .splash .container h4 { text-align: left; margin-top: 20px; }
.splash .container h1:first-child { margin-top: 0; }
.splash .container div { max-width: unset; margin: 0; flex: 1 1 300px; padding: 0 0 0 80px; }
.splash .container .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .splash .container div { min-width: 100%; padding: 20px 0; } .splash .container .splash-logo { padding: 20px 0; } }
#contact { padding: 20px; }
#contact > div { max-width: var(--max-width); margin: auto; padding: 40px 20px; }
@ -365,7 +363,7 @@ nav li .button { display: block; }
/* Audio Player Styles
================================================== */
/* Default / Desktop / Firefox */
.album-player { display: flex; flex-wrap: wrap; padding: 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player { display: flex; flex-wrap: wrap; padding: 80px 40px 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player > div { margin: 20px 0; }

File diff suppressed because one or more lines are too long

View file

@ -85,20 +85,38 @@ body { height: 100vh; width: 100%; font-family: "Poppins", "Arial", "Helvetica",
.wrapper { margin: 20px 40px; }
.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: 40px; position: relative; min-height: 80vh; width: 100vw; }
.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: 100vh; width: 100vw; }
.hero .textcontainer { background-color: var(--bg-alt); border-radius: var(--border-radius); max-width: 700px; padding: 20px 20px 40px 20px; }
.hero .textcontainer { background: #020024; background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); border-radius: var(--border-radius); max-width: var(--max-width); padding: 0px 40px 40px 40px; }
.hero div { z-index: 10; }
.hero div h1, .hero div p { flex: 1 0 100%; width: 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1, .hero div p { flex: 1 0 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1 { font-size: 1.8em; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 240px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 960px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer h4 { width: 90vw; /* height: auto; */ /* min-height: 100px; */ line-height: 1.011em; letter-spacing: -0em; color: var(--bg); font-size: 15vw; display: inline; opacity: 1; border-radius: var(--border-radius); position: absolute; bottom: 0; transform: rotate(-3deg); overflow: hidden; background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(1px); }
.hero .splash { background-color: transparent; display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.hero .splash .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.hero .splash .description > * { margin: 40px !important; }
.hero .splash h1, .hero .splash h2 { font-size: 2em; }
.hero .splash p, .hero .splash h1, .hero .splash h2, .hero .splash h3, .hero .splash h4 { text-align: left; margin-top: 20px; }
.hero .splash h1:first-child { margin-top: 0; }
.hero .splash div { max-width: unset; margin: 0; flex: 1 1 300px; }
.hero .splash .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .hero .splash div { min-width: 100%; padding: 20px 0; } .hero .splash .splash-logo { padding: 20px 0; } }
section { flex: 1 1 100%; background-color: var(--bg); z-index: 2; }
section .container { max-width: var(--max-width); margin: 0 auto; }
@ -109,7 +127,7 @@ section:first-of-type { -webkit-box-shadow: none; -moz-box-shadow: none; box-sha
.section-title { padding: 80px; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 400px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 200px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer a { color: var(--bg); }
@ -259,26 +277,6 @@ a:hover { color: var(--accent1); text-decoration-style: wavy; text-decoration-co
@media only screen and (max-width: 1000px) { .front-section:nth-child(even) .container { margin: 0 20px 0 20px; } }
.front-section:nth-of-type(2) { margin-top: 40px; }
.splash { background-color: transparent; }
.splash .container { display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.splash .container .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.splash .container h1, .splash .container h2 { font-size: 2em; }
.splash .container p, .splash .container h1, .splash .container h2, .splash .container h3, .splash .container h4 { text-align: left; margin-top: 20px; }
.splash .container h1:first-child { margin-top: 0; }
.splash .container div { max-width: unset; margin: 0; flex: 1 1 300px; padding: 0 0 0 80px; }
.splash .container .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .splash .container div { min-width: 100%; padding: 20px 0; } .splash .container .splash-logo { padding: 20px 0; } }
#contact { padding: 20px; }
#contact > div { max-width: var(--max-width); margin: auto; padding: 40px 20px; }
@ -355,7 +353,7 @@ nav li .button { display: block; }
/* Audio Player Styles
================================================== */
/* Default / Desktop / Firefox */
.album-player { display: flex; flex-wrap: wrap; padding: 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player { display: flex; flex-wrap: wrap; padding: 80px 40px 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player > div { margin: 20px 0; }

File diff suppressed because one or more lines are too long

View file

@ -85,20 +85,38 @@ body { height: 100vh; width: 100%; font-family: "Poppins", "Arial", "Helvetica",
.wrapper { margin: 20px 40px; }
.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: 40px; position: relative; min-height: 80vh; width: 100vw; }
.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: 100vh; width: 100vw; }
.hero .textcontainer { background-color: var(--bg-alt); border-radius: var(--border-radius); max-width: 700px; padding: 20px 20px 40px 20px; }
.hero .textcontainer { background: #020024; background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); border-radius: var(--border-radius); max-width: var(--max-width); padding: 0px 40px 40px 40px; }
.hero div { z-index: 10; }
.hero div h1, .hero div p { flex: 1 0 100%; width: 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1, .hero div p { flex: 1 0 100%; z-index: 10; color: var(--fg); max-width: var(--max-width); margin-top: 40px; }
.hero div h1 { font-size: 1.8em; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 240px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/vignette.svg"); background-size: 960px; background-repeat: repeat-x; background-position: bottom; z-index: 1; }
.hero .imagecontainer h4 { width: 90vw; /* height: auto; */ /* min-height: 100px; */ line-height: 1.011em; letter-spacing: -0em; color: var(--bg); font-size: 15vw; display: inline; opacity: 1; border-radius: var(--border-radius); position: absolute; bottom: 0; transform: rotate(-3deg); overflow: hidden; background: -webkit-linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(1px); }
.hero .splash { background-color: transparent; display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.hero .splash .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.hero .splash .description > * { margin: 40px !important; }
.hero .splash h1, .hero .splash h2 { font-size: 2em; }
.hero .splash p, .hero .splash h1, .hero .splash h2, .hero .splash h3, .hero .splash h4 { text-align: left; margin-top: 20px; }
.hero .splash h1:first-child { margin-top: 0; }
.hero .splash div { max-width: unset; margin: 0; flex: 1 1 300px; }
.hero .splash .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .hero .splash div { min-width: 100%; padding: 20px 0; } .hero .splash .splash-logo { padding: 20px 0; } }
section { flex: 1 1 100%; background-color: var(--bg); z-index: 2; }
section .container { max-width: var(--max-width); margin: 0 auto; }
@ -109,7 +127,7 @@ section:first-of-type { -webkit-box-shadow: none; -moz-box-shadow: none; box-sha
.section-title { padding: 80px; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 400px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer { width: 100%; padding: 160px 20px 200px 20px; background-color: var(--fg); color: var(--bg); background-image: url("../img/vignette-footer.svg"); background-size: 200px; background-repeat: repeat-x; background-position: top; box-sizing: border-box; z-index: 2; }
footer a { color: var(--bg); }
@ -259,26 +277,6 @@ a:hover { color: var(--accent1); text-decoration-style: wavy; text-decoration-co
@media only screen and (max-width: 1000px) { .front-section:nth-child(even) .container { margin: 0 20px 0 20px; } }
.front-section:nth-of-type(2) { margin-top: 40px; }
.splash { background-color: transparent; }
.splash .container { display: flex; flex-wrap: wrap; padding: 40px; align-items: flex-start; max-width: var(--max-width); margin: auto; }
.splash .container .description { border-radius: var(--border-radius); background: var(--bg-alt); background: linear-gradient(90deg, transparent 0%, var(--bg) 91%); }
.splash .container h1, .splash .container h2 { font-size: 2em; }
.splash .container p, .splash .container h1, .splash .container h2, .splash .container h3, .splash .container h4 { text-align: left; margin-top: 20px; }
.splash .container h1:first-child { margin-top: 0; }
.splash .container div { max-width: unset; margin: 0; flex: 1 1 300px; padding: 0 0 0 80px; }
.splash .container .splash-logo { padding: 0; margin: 0; }
@media only screen and (max-width: 759px) { .splash .container div { min-width: 100%; padding: 20px 0; } .splash .container .splash-logo { padding: 20px 0; } }
#contact { padding: 20px; }
#contact > div { max-width: var(--max-width); margin: auto; padding: 40px 20px; }
@ -365,7 +363,7 @@ nav li .button { display: block; }
/* Audio Player Styles
================================================== */
/* Default / Desktop / Firefox */
.album-player { display: flex; flex-wrap: wrap; padding: 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player { display: flex; flex-wrap: wrap; padding: 80px 40px 0 40px; justify-content: space-evenly; flex-direction: row-reverse; align-items: center; max-width: var(--max-width); margin: auto; }
.album-player > div { margin: 20px 0; }

File diff suppressed because one or more lines are too long