html
{
	font: 300 17px/26px var(--font-body);
	letter-spacing:0.00rem;
	color:var(--text-color);
	background-color:var(--background);
	cursor:default;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body,html
{
	background-color:var(--background);
	margin:0;
	padding:0;
}
page
{
	overflow: hidden;
}
p
{
	margin:0;
	margin-bottom:1rem;
}
b
{
	font-weight: 600;
}
h1
{
	color: var(--h1-color);
	font-family: var(--font-header);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 3rem;
	line-height: 3.5rem;
	margin-bottom: 4.5rem;
}
h2
{
	color: var(--h2-color);
	font-family: var(--font-header);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 2rem;
	line-height: 2.5rem;
	margin-top:3rem;
}
h3
{
	color: var(--h3-color);
	font-weight:700;
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 1.5rem;
	margin-top: 1.5rem;
	letter-spacing:0.02rem;
}
h4
{
	color: var(--h4-color);
}
a, a:visited
{
	text-decoration: none;
	transition: all 0.1s;
	font-weight: 600;
	color:var(--a-color);
}
a:hover
{
	transition: all 0.1s;
	color: var(--a-hover-color);
}
table caption
{
	color: var(--table-caption);
	padding: 1rem;
	font-weight: bold;
	font-style: italic;
}
.scroll-x
{
	overflow-x:scroll;
}
table
{
	overflow-x: auto;
	min-width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
	/*word-break: break-word;*/
}
th, tr, td
{
	padding: 0rem;
	margin: 0rem;
	border: none;
}
th, td
{
	padding: 0.5rem;
}
th
{
	overflow: ellipsis;
}
thead
{
	text-align: left;
	background-color: var(--table-header-background);
	color: var(--table-header-color);
	border-radius: 0.5rem 0rem;
}
thead th:first-of-type
{
	border-radius: 0.5rem 0rem 0rem 0rem;
}
thead th:last-of-type
{
	border-radius: 0rem 0.5rem 0rem 0rem;
}
tbody tr
{
	background-color: var(--table-row-background);
}
tbody tr:nth-of-type(even)
{
	background-color: var(--table-row-background-alt);
}
tbody tr:last-of-type
{
	border-bottom: thin solid var(--table-header-background);
}
.phonetic
{
	font-family: 'Noto Sans', sans-serif !important;
}
@font-face {
  font-family: Oko;
  src: url(/content/fonts/Oko.otf);
}
.form-group {
    position: relative;
}

.form-group input:focus {
    border-color: var(--input-border-focused);
}

.form-group input::placeholder {
    color: transparent;
}

.form-group .form-label {
	font-family: var(--font-header);
    position: absolute;
    top: 1.25rem;
    left: 0.5rem;
    font-size: 0.7rem;
    font-weight:600;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    line-height:1rem;
    padding: 0 0.5rem;
    color: var(--input-label-color);
    pointer-events: none;
    transition: 0.1s all ease;
}

.form-group input:focus + .form-label,
.form-group input:not(:placeholder-shown) + .form-label {
    transform: translate(0rem, -0.75rem);
}
.form-group input:focus, .form-group input:not(:placeholder-shown)
{
	border:0.1rem solid var(--input-border);
	background-color: transparent;
}
.form-group input:focus
{
	border:0.1rem solid var(--input-color);
}
input[type=text], input[type=email], input[type=password]
{
	padding: 1rem;
	padding-top:1.5rem;
	border:none;
	min-width: 15rem;
	font-size: 1rem;
	line-height: 1rem;
	background:var(--input-background);
	border:0.1rem solid var(--input-background);
	color: var(--input-color);
	border-radius: 0.5rem;
	margin-bottom:0.5rem;
	transition: 0.1s all ease;
}
button, button:visited, .button, .button:visited, [class*="button-"],[class*="button-"]:visited,input[type=submit],input[type=submit]:visited,input[type=button],input[type=button]:visited
{
	margin-right: 0.2rem;

	position: relative;
	overflow:hidden;
	z-index: 1;

	font-size: 0.8rem;
	font-family: var(--font-header);
	font-weight:600;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.2s all ease;

	display: inline-block;
	font-size: 0.8rem;
	line-height: 1rem;

	color: var(--button-color);
	background-color: var(--button-background);
	
	padding: 1rem;
	cursor:pointer;

	border-radius: 0.5rem;
	border:none;

	
}
button:hover, .button:hover, [class*="button-"]:hover,input[type=submit]:hover,input[type=button]:hover
{
	transition: 0.3s all ease;
	color: var(--button-color-hover);
	background-color: var(--button-background-hover);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--text-color);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--text-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--text-color);
}
*, :after, :before, section
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
[class*="col-"]
{
	float:left;
}
.col-0{display: none;}
.col-s-1 {width: 8.33%;}
.col-s-1-2{width:10%;}
.col-s-1-5{width: 12.5%;}
.col-s-2 {width: 16.66%;}
.col-s-2-4{width:20%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
.body-wrapper
{
	clear: both;
	position: relative;
	min-height: 101vh;
	min-width: 100%;
	display: flex;
	flex-direction: column;
}
header,main,footer{width: 100%}
header
{
	position: fixed;
	padding: 0rem 2rem;
	background-color: rgba(17,19,21,0.95);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 100;
}
.header-inner
{
	min-height: 4rem;
	width: 100%;
	display: inline-block;
}
.header-logo, .header-menu-icon
{
	width:50%;
	display: inline-block;
	position:relative;
}
.header-logo
{
	float: left;
	line-height: 4rem;
	height: 100%;
}
.header-logo img
{
	height:1rem;
	vertical-align: middle;
}
.header-user
{
	text-align: center;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}
.header-links
{
	flex-grow: 1;
	line-height: 4rem;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}
.header-links a, .header-links a:visited, .header-user-name, .header-user-name:visited, .header-login, .header-login:visited
{
	text-align: center;
	display: block;
	font-size: 1rem;
	text-decoration: none;
	font-family: var(--font-header);
	font-weight: 600;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: all 0.3s;
	line-height: 2rem;
	color: var(--header-link) !important;
}
.header-links a:hover, .header-user-name:hover, .header-login:hover
{
	transition: all 0.15s;
	color: var(--header-link-hover) !important;
	background-color: var(--color-faded);
}
.header-menu-icon, .header-menu-icon:visited
{
	color: var(--header-link) !important;
	display: block;
	font-size:2rem;
	line-height:4rem;
	float:right;
	padding-right:1rem;
	text-align: right;
}
.header-menu-icon:hover
{
	color: var(--header-link-hover) !important;
}
.header-menu
{
	display:none;
	float: left;
	width: 100%;
}
.header-login
{
	font-size: 1rem;
	line-height: 2rem;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	display: block;
	text-decoration: none;
}
.header-login:hover
{
	background-color: var(--color-faded);
}
.header-user-links
{
	float: left;
	width: 100%;
}
.header-user-desktop
{
	display: none;
}
main
{
	margin-top:4rem;
	padding:1rem 0rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-image: url('/content/images/background.png');
}
footer
{
	padding: 1rem;
	text-align: center;
	font-size: 0.8rem;
	color: var(--footer-color);
	background-color: var(--footer-background);
}
.footer-title
{
	float:left;
	display:block;
	margin:0;
	padding:0;
	width:100%;
	margin-top:1rem;
	margin-bottom:1rem;
}
.footer-title
{
	height:3rem;
	-webkit-user-select: none;
  	-moz-user-select: none; 
  	-ms-user-select: none; 
  	-o-user-select: none;
  	user-select: none; 
}
.footer-social,.footer-legal, .footer-links
{
	padding:1rem;
	margin:auto;
	width:100%;
	max-width:400px;
}
.footer-social
{
	margin-top:1rem;
	font-size:2rem;
	line-height:2rem;
}
.footer-social a, .footer-social a:visited { color: var(--footer-social-color) !important; }
.footer-social a:hover { color: var(--footer-social-hover) !important; }
.footer-title img
{
	height:100%;
}
.footer-legal
{
	font-weight: normal;
	font-size:0.8rem;
	line-height:0.9rem;
	text-transform: none;
	letter-spacing:0.05rem;
	-webkit-user-select: none;
  	-moz-user-select: none; 
  	-ms-user-select: none; 
  	-o-user-select: none;
  	user-select: none; 
}
.footer-links a, .footer-links a:visited
{
	text-transform: uppercase;
	letters-spacing:0.1rem;
	text-decoration: none;
	font-family: var(--font-header);
	font-weight:600;
	padding:0rem 1rem;
	color:var(--footer-link-color) !important;
}
.footer-links a:hover
{
	color: var(--footer-link-hover) !important;
}
.back-to-top
{
	font-size:1rem;
	line-height:1rem;
	position: fixed;
	bottom:2rem;
	right:2rem;
	border-radius:0.5rem;
	padding:1rem;
	color:var(--button-color);
	background-color:var(--button-background);
	transition: all 0.3s;
	display: block;
	z-index: 2;
	opacity:0;
	visibility:hidden;
}
.back-to-top:hover
{
	transition: all 0.1s;
	color:var(--button-color-hover);
	background-color:var(--button-background-hover);
}
.show
{
	display:inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.command
{
	width: 100%;
	position: relative;
  	display: inline-block;
  	padding-bottom: 1rem;
  	line-height: 3rem;
}
.command-part
{
	position: relative;
  	display: inline-block;
  	line-height: 1rem;
  	border-radius: 1rem;
  	font-size: 1rem;
  	margin-right: 0.5rem;
}
.command-cost
{
	padding: 1rem;
	background-color: var(--command-cost-background);
	color: var(--command-cost);
}
.command-fixed
{
	padding: 1rem;
	color: var(--command-fixed);
	background-color: var(--command-fixed-background);
}
.command-options-title
{
	color: var(--command-option);
	background-color: var(--command-option-background);
	padding: 1rem;
	border-radius: 1rem;
}
.command-part:hover .command-options-title,.command-part:active .command-options-title
{
	color: var(--command-option-hover);
	background-color: var(--command-option-background-hover);
}
.command-options
{
	cursor: pointer;
	color: var(--command-option-dropdown);
	background-color: var(--command-option-dropdown-background);
	padding: 0rem;
	display: none;
  	position: absolute;
  	z-index: 1;
  	border-radius: 0.5rem;
  	box-shadow:0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}
.command-part:hover .command-options, .command-part:active .command-options {
  display: block;
}
.command-options span {
  	display: block;
  	padding: 0.5rem 1rem;
}
.command-options span:hover, .command-options span:active
{
	color: var(--command-option-dropdown-hover);
	background-color: var(--command-option-dropdown-background-hover);
}
.command-options span:first-of-type:hover,.command-options span:first-of-type:active
{
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}
.command-options span:last-of-type:hover,.command-options span:last-of-type:active
{
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.container-row
{
	padding: 0rem;
	max-width:60rem;
	margin:auto;
}
/*
.container-outer::before
{
	margin-top: 0.5rem;
	position: absolute;
	top: -0.5rem;
	width: 100%;
	display: inline-block;
	height: 0.5rem;
	border-radius: 0.5rem 0.5rem 0 0;
	content: '';
	background: var(--container-header-background-basic);
}*/
.container
{
	padding: 0.5rem;
	animation: fadeIn 0.3s;
}
.container-outer
{
	position: relative;
	width: 100%;
	border-radius: 0.5rem;
	box-shadow:0 0.1rem 0.1rem var(--container-shadow);
	background-color: var(--container-background);
}
.container-inner
{
	width: 100%;
	padding: 0.5rem 1rem;
	display: flex;
	flex-direction: column;
	transition: all 0.5s;
	padding-bottom: 1rem;
}
.container-header
{
	width: 100%;
	line-height: 3rem;
	padding-bottom: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	font-size:0.8rem;
	letter-spacing:0.05rem
}
.container-header-title
{
	float: left;
	font-family: var(--font-header);
	font-weight: 600;
	color: var(--h2-color);
}
.container-header-menu
{
	float: right;
}
.colour-swatch
{
	width: 1.5rem;
	height: 1.5rem;
	content: "";
	border-radius: 0.5rem;
	float: left;
	display: inline-block;
}
.button-container-menu, .button-container-menu:visited
{
	font-size: 0.8rem;
	padding: 0.6rem;
	line-height: 0.8rem;
	vertical-align: middle;
}
.button-login-twitch
{
	color: #fff;
	background-color: #5c16c5;
}
.button-login-steam
{
	color: #fff;
	background-color: #444;
}
.button-locked, .button-locked:visited, .button-locked:hover
{
	color: #aaa !important;
	background-color: #777 !important;
	cursor: default;
}
.music-cover
{
	margin-bottom: 2rem;
}
.music-cover img
{
	width: 100%;
	border-radius: 0.5rem;
}
.music-artist .music-cover img
{
	border-radius: 50rem;
}
.music-page-title, .music-page-artist
{
	float: left;
	padding-top: 1rem;
	width: 100%;
}
.music-page-title
{
	color: var(--h1-color);
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 3rem;
	line-height: 3rem;
}
.music-page-artist
{
	font-size: 1.5rem;
	line-height: 1.5rem;
	color: var(--h2-color);
	font-family: var(--font-header);
	font-weight: 600;
	padding-bottom: 2rem;
}
.music-release, .music-artist
{
	padding: 0.5rem;
	margin-bottom: 1rem;
}
.music-release, .music-release:visited, .music-artist, .music-artist:visited
{
	color: var(--text-color);
}
.music-release-title, .music-release-date, .music-artist-title
{
	float: left;
	width: 100%;
	font-size: 1rem;
	padding: 0;
	margin: 0;
}
.music-release-title, .music-artist-title
{
	transition: all 0.1s;
	color: var(--h1-color);
	font-weight: 600;
}
.music-artist-title
{
	text-align: center;
}
.music-release-date
{
	font-size: 0.9rem;
}
.music-release:hover, .music-release:hover .music-release-title, .music-artist:hover, .music-artist:hover .music-release-title
{
	transition: all 0.1s;
	color: var(--a-color);
}
.character-bio
{
	padding-top:2rem;
}
.character-name
{
	color: var(--h1-color);
	font-family: var(--font-header);
	font-weight: 600;
	font-size: 3rem;
	line-height: 3.5rem;
	margin-top:2rem;
	padding-bottom:2rem;
	width:100%;
	text-align:center;
	border-bottom: 1px solid var(--color-faded);
}
.character-portrait
{
	width: 20rem;
	height: 20rem;
	background-size: cover;
	border-radius: 10rem;
	margin: auto;
}
.character-mini
{
	padding:0.5rem;
}
.character-mini-inner
{
	width:100%;
	padding-top:100%;
	position: relative;
}

.character-portrait-mini
{
	width: 100%;
	padding-top:100%;
	background-size: cover;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	top:0;
	left:0;
}
.character-mini-name
{
	padding: 1.5rem;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	text-align: center;
	vertical-align: middle;
	font-size: 1.2rem;
	line-height: 1.2rem;
	text-transform: uppercase;
	font-family: var(--font-header);
	color: white;
	text-shadow: 0rem 0rem 0.5rem black;
}
.zoom-wrapper
{
	width:100%;
	padding-bottom:153%;
	overflow:hidden;
	border-radius:0.5rem;
	position: relative;
}
.zoom-image
{
	transition: transform 0.5s;
	height:100%;
	width:100%;
	position: absolute;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.zoom-wrapper:hover .zoom-image
{
	transform: scale(1.05);
}
.story-outer
{
	font-family: 'Baskervville', serif;
	font-size:1.2rem;
	line-height:1.8rem;
	text-align: justify;
}
.story-inner
{
	padding:2rem;
	margin:auto;
	max-width:32rem;
}
.story p
{
	text-indent: 2rem;
	margin-bottom:0rem;
}
.story h1
{
	font-family: 'Baskervville', serif;
	text-align: center;
	text-transform: none;
	padding-top: 8rem;
	padding-bottom:0rem;
	font-weight: 400;
	margin:0;
}
.story h2
{
	font-family: 'Baskervville', serif;
	font-style: italic;
	text-align: center;
	text-transform: none;
	font-size:1.2rem;
	padding-top: 0rem;
	padding-bottom:4rem;
	font-weight: 400;
	margin:0;
}
.story-page
{
	width:100%;
}
.story-page-number
{
	width:50%;
	margin:auto;
	text-align:center;
	padding:2rem;
	margin-top:2rem;
	margin-bottom:2rem;
	border-bottom: 1px solid white;
}
.story img
{
	width:100%;
}
.story-book
{
	color:white !important;
	padding:0.5rem;
	font-family: 'Baskervville', serif;
	text-align: center;
	border: 0.1rem solid rgba(1,1,1,0);
}
.story-preview
{
	z-index:1;
	padding:0.5rem;
	border: 0.1rem solid red;
	color: red;
	position: absolute;
	border-radius: 0.5rem;
	margin: 1rem;
	font-family: var(--font-header);
	background-color: black;
	opacity: 0.7;
}
.story-book:hover
{
	color: var(--a-hover-color) !important;
	border: 0.1rem solid white;
}
.story-book-info
{
	width:100%;
	padding:0.5rem;
}
.story-book-title
{
	font-size: 1rem;
}
.story-book-author
{
	font-weight:400;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--text-color);
}
.story-book img
{
	width:100%;
}
.content
{
	/*
	display: grid;
	grid-template-columns: repeat(auto-fill, [col-start] minmax(400px, 1fr) [col-end]);
	grid-auto-rows: auto;
	grid-column-gap: 0.2rem;
	grid-row-gap: 0.2rem;
	padding:0.5rem;
	*/
	width:100%;
	overflow: auto;
	white-space: nowrap;
}
.content-header
{
	padding: 1rem;
	padding-top:3rem;
	color: white;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.02rem;
	line-height: 1.8rem;
	justify-content: space-between;
	display: flex;
}
.content-header div
{
	display: inline-block;
}
.content-header-more
{
	font-size:0.8rem;
}
.content-header-more i
{
	font-size:0.7rem;
}
.content-header-more a
{
	color: white;
	font-weight: 300;
}
.content-header-more a:hover
{
	text-decoration: underline;
}
.content-item
{
	display: inline-block;
	box-sizing: border-box;
	padding:0.5rem;
	transition: padding 0.5s;
}
.content-item:hover
{
	cursor: pointer;
}
.content-item:hover .content-middle
{
	margin-bottom:0rem;
}
.content-item:hover .content-inner
{
	background-color: rgba(0,0,0,0.4);
}
.content-inner
{
	box-sizing: border-box;
	border-radius: 1.5rem;
	position: relative;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: background-color 0.5s;
}
.content-inner-location { height: 30vh; width: 40vh; border-radius: 2rem; }
.content-inner-character { height: 30vh; width: 40vh; border-radius: 2rem; }
.content-inner-story { height: 46vh; width: 30vh; border-radius: 0.5rem;  }
.content-inner-music { height: 30vh; width: 30vh; border-radius: 2rem; }
.content-inner-post { height: 30vh; width: 40vh; border-radius: 2rem; }
.content-inner-art { height: 30vh; width: 30vh; border-radius: 2rem; }
.content-inner-other { height: 30vh; width: 40vh; border-radius: 2rem; }
.content-image, .content-info
{
	height:100%;
	width:100%;
	position: absolute;
	top:0;
}
.content-image
{
	transition: transform 0.5s, opacity 0.5s;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
.content-info
{
	z-index:1;
	padding:0.5rem;
}
.content-item:hover .content-image
{
	transform: scale(1.05);
}
.content-item:hover .content-bottom
{
	bottom: 1rem;
}
.content-top
{
	font-size:0.6rem;
	line-height: 0.6rem;
	margin-top: 0.2rem;
	margin-left:0.2rem;
	color:white;
}
.content-type, .content-date
{	
	padding:0.4rem;
	border-radius:5rem;
	background-color: black;
	float:left;
	display: inline-block;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.content-date
{
	margin-left:0.2rem;
}
.content-title
{
	font-size: 0.9rem;
	line-height: 0.9rem;
	font-weight: 600;
	display: block;
	white-space: normal;
}
.content-subtitle
{
	font-size:0.7rem;
	line-height: 0.7rem;
	padding-top:0.3rem;
	font-weight: 300;
	color:white;
	opacity: 0.8;
	display: block;
}
.content-bottom
{
	transition: bottom 0.5s;
	color:white;
	left:0.5rem;
	position: absolute;
	padding: 1rem;
	bottom:0.5rem;
	float:left;
	margin-right:0.5rem;
	border-radius: 1.5rem;
	background-color:black;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.content-middle
{
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.2rem;
	bottom:50%;
	left:1rem;
	right:1rem;
	color:white;
	margin-bottom:-0.6rem;
	transition: margin-bottom 0.5s;
}
.fade-in
{
	opacity: 0;
}
.faded-in
{
	opacity: 1;
	transition: all 0.5s ease;
}
.map
{
	width:100%;
}
@media only screen and (min-width: 800px)
{
	th, td
	{
		padding: 0.5rem 1rem;
	}
	.header-menu-icon
	{
		display: none !important;
	}
	.header-menu
	{
		display: flex !important;
		flex-grow: 1;
		float: none !important;
		width: auto !important;
	}
	.header-links
	{
		padding-right: 1rem;
		border-right: 1px solid #333;
	}
	.header-links a, .header-links a:visited, .header-login, .header-user-name
	{
		font-size: 0.8rem !important;
		display: inline-block !important;
		padding: 0rem 0.5rem !important;
		vertical-align: middle;
	}
	.header-logo
	{
		width: auto !important;
	}
	.header-user
	{
		float: right;
		padding: 0rem 0.5rem;
		padding-left:1rem;
		text-align: center;
		width: auto;
		line-height:4rem;
	}
	.header-user-name
	{
		font-size: 0.8rem;
		line-height:1rem;
	}
	.header-user-name, .header-user-name:visited
	{
		display: block;
	}
	.header-user-desktop, .header-user-links
	{
		width: auto !important;
		float: left;
	}
	.header-user-desktop
	{
		display: block;
	}
	.container
	{
		padding:0.5rem;
	}
	.container-row
	{
		padding: 0rem 1rem;
	}
	.container-inner
	{
		padding: 2rem;
	}
	.header-login
	{
		width: auto;
	}
	.music-release, .music-artist
	{
		padding: 0;
	}
	.music-cover
	{
		padding-right: 1rem;
	}
	.music-cover
	{
		max-width: 25rem;
		margin-bottom: 0;
	}
	.content
	{
		grid-column-gap: 0.5rem;
		grid-row-gap: 0.5rem;
		grid-template-columns: repeat(auto-fill, [col-start] minmax(400px, 1fr) [col-end]);
	}
	.col-m-1 {width: 8.33%;}
	.col-m-1-2{width:10%;}
	.col-m-1-5{width: 12.5%;}
	.col-m-2 {width: 16.66%;}
	.col-m-2-4{width:20%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}
} 
@media only screen and (min-width: 1000px)
{
	.col-l-1 {width: 8.33%;}
	.col-l-1-2{width:10%;}
	.col-l-1-5{width: 12.5%;}
	.col-l-2 {width: 16.66%;}
	.col-l-2-4{width:20%;}
	.col-l-3 {width: 25%;}
	.col-l-4 {width: 33.33%;}
	.col-l-5 {width: 41.66%;}
	.col-l-6 {width: 50%;}
	.col-l-7 {width: 58.33%;}
	.col-l-8 {width: 66.66%;}
	.col-l-9 {width: 75%;}
	.col-l-10 {width: 83.33%;}
	.col-l-11 {width: 91.66%;}
	.col-l-12 {width: 100%;}
}