/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


@font-face{font-family:'Spartan';font-style:normal;font-weight:200 900;font-display:swap;src:local("Spartan"),url(fonts/spartan_200-900_2021-08-03.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:'Newsreader';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/newsreader_regular_300-800_2021-08-03.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:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/newsreader_italic_300-500_2021-08-03.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-family: Spartan,Futura,"century gothic",sans-serif;
}

.has-secondary-font {
    font-family: Newsreader,georgia,serif;
}

html {
    background-color: #fff;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    --primary-color: #501254;
    --secondary-color: #f5e766;
    --secondary-color-light: #f8ee96;
    --grey-color: #f2f2f2;
    --dark-color: #1a1a1a;
}

body {
    color: var(--dark-color);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}


footer {
    margin-top: 3rem;
    padding: 3rem;
    font-size: .75rem;
    text-align: center;
}

main {
    position: relative;
    margin-bottom: 12rem;
}

header {
    height: 100%;
    padding: 2rem 1rem;
    z-index: 1;
    box-shadow: inset 0 -1rem 2rem 0 rgba(0,0,0,.125);

}

@media only screen and (min-width: 992px) {
    header {
        max-width: 25rem;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 23vw;
        padding-top: 4rem;
        box-shadow: 1rem -1rem 2rem -.5rem rgba(0,0,0,.125);
    }

    main, footer {
        margin-left: 25vw;
    }

    .is-narrow {
        width: 100%;
    }
}

@media only screen and (min-width: 1600px) {
    main, footer {
        margin-left: 25rem;
    }
    header {
        width: 25rem;
    }
}

header h1 {
    margin: 0;
}

a {
    color: var(--primary-color);
}

/* LAYOUT */

.is-narrow {
    max-width: 35rem;
    margin: 0 auto;
}

.container, .is-centered {
    display: flex;
    justify-content: center;
    align-items: center;
}


.container {
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
    scroll-margin-top: 1rem;
}

.container > * {
    margin: .25rem;
}

.is-fullwidth {
    width: 100%;
}

.has-scroll-top-margin {
    scroll-margin-top: 3rem;
}


.is-flex-stack {
    display: flex;
    flex-direction: column;
}

.is-flex-row {
    display: flex;
    flex-direction: row;
}

.vote-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 3;
    margin: .5rem auto 3rem;
}

/* ELEMENTS */
a {
	text-decoration: none;
}

.button {
	width: max-content;
    cursor: pointer;
	max-width: 25rem;
    min-width: 13rem;
	padding: .75rem 1.5rem;
    text-align: center;
	background-color: var(--primary-color);
	color: var(--grey-color);
	text-transform: uppercase;
	font-weight: 700;
	font-size: .75rem;
    margin: 1rem;
    border-radius: .125rem;
    border: 0;
    opacity: .95;
    transition: all .075s ease-in;
}

.button:hover, .button:focus {
    opacity: 1;
}

.button:active {
	transform: scale(0.975);
}

.button::before {
    content: attr(data-icon);
    margin-right: .5em;
}

.card {
    border: .125rem solid var(--primary-color);
    box-shadow: 0 1rem 2rem -1rem rgba(0,0,0,.125);
    background-color: #fff;
    color: var(--dark-color);
    border-radius: .125rem;
    margin: 1rem auto;
}

.block {
    margin-bottom: 3rem;
}

.block + .buttons {
    margin-top: -4rem;
}

/* COLORING */

.has-background-grey {
    background-color: var(--grey-color);
}


.is-themed-dark {
    background-color: var(--primary-color);
    color: var(--secondary-color-light);
    color: var(--grey-color);
}

.has-border-top {
    border-top: .125rem solid var(--primary-color);
}

.has-border-bottom {
    border-bottom: .125rem solid var(--primary-color);
}

.has-upper-shadow {
    box-shadow: 0 -3rem 2rem rgba(0,0,0,.125);
}

/* TYPOGRAPHY */

.is-hero {
    font-size: 3rem;
    font-weight: 200;
    letter-spacing: -0.05em;
    margin: 0;
    text-transform: uppercase;
}

.is-title {
    font-size: 3rem;
    font-weight: 200;
    letter-spacing: -0.05em;
    margin: 0;
    margin-bottom: 0.25rem;
}

.is-subtitle {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
    letter-spacing: -0.025em;
}

.is-heading {
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
}

.is-label, form label, legend {
    font-weight: 800;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: 0.025em;
    line-height: 1.75;
}

legend {
    line-height: 1;
}


.is-italic {
    font-style: italic;
}

.adjust-left {
    margin-left: -.125em;
}

.has-space-top {
    margin-top: 1.5rem;
}

.has-negative-space-top {
    margin-top: -3rem;
}

.is-aligned-center {
    text-align: center;
}

.is-upper {
    text-transform: uppercase;
}




/*
.artist-container {
    display: flex;
    padding: 2rem;
    justify-content: center;
    align-items: center;
}*/


/*
.artist__info {
    display: flex;
    flex-direction: column;
}
*/


.review__text {
    font-size: 1.125rem;
}


.review__rating {
    display: flex;
    flex-wrap: nowrap;
}

.review__star {
    width: 2rem;
}

.review__star::after {
    content: "⭐";
    font-size: 1.5rem;
    display: inline-block;
}

.is-interactive {
    transition: all .075s ease-in;
    margin: .25rem;
}

.is-interactive:hover,
.is-interactive:focus {
    transform: scale(1.1);
}

.is-interactive:active {
    transform: scale(0.9);
}

.is-inactive {
    opacity: .5;
    filter: grayscale(1);
}

.review__star--inactive {
    opacity: .5;
    filter: grayscale(1);
}

.is-interactive .review__star--inactive:hover,
.is-interactive .review__star--inactive:focus,
.is-interactive .review__star--inactive:active {
    opacity: 1;
    filter: unset;
}

.review__rating input {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap;
}


.notification {
	padding: 2rem 1rem;
	z-index: 1;
	position: fixed;
	bottom: 0;
	background: var(--secondary-color-light);
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset -.25rem -.25rem 1.25rem .25rem rgba(0,0,0,.125);
    width: 100%;
}

/* FORM */

.is-disabled {
    opacity: .5;
    user-select: none;
}

.is-inactive {
    opacity: .5;
}

#form-section {
    scroll-margin-top: 7rem;
    border-top: .25rem solid var(--primary-color);
    margin-top: 2rem;
}

form {
	width: 100%;
	max-width: 54rem;
}

fieldset {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 4rem auto;
    padding: 1rem 0;
    align-items: center;
    border: 0;
    border-top: .25rem solid var(--primary-color);
}

fieldset:first-child {
    margin-top: 1rem;
}

/* fieldset > * {
    margin: .5rem;
} */


@media only screen and (max-width: 768px) {
    fieldset { 
        flex-direction: column-reverse;
    }

    fieldset > div:first-of-type {
        border-top: 1px solid #bbb;
        margin-top: 2rem;
        padding: 2rem 1rem 1rem;
    }
}
@media only screen and (min-width: 769px) {
    fieldset > div:first-of-type {
        border-right: 1px solid #bbb;
        margin-right: 2rem;
        padding: 1rem 2rem 1rem 0;
    }
}

legend {
    padding: 0 .5rem;
    text-align: center;
}

.text-field {
	padding: .5rem .75rem;
    width: 100%;
}

.input-control {
    flex: 1 1 auto;
    display: flex;
    align-self: stretch;
}

.controls label {
    padding: 1rem;
    padding-left: .5rem;
    margin-right: 1rem;
}

.controls.is-inactive {
    user-select: none;
}

.torbens-choice label {
    background-color: var(--secondary-color-light);
    padding: 1rem;
    border-radius: 2rem;
    user-select: none;
}

.vote {
	margin: 0 .25rem;
}

.vote label {
    padding: .75rem;
    margin: 0 .25rem;
    background: var(--secondary-color-light);
    background-color: var(--secondary-color-light);
    border-radius: 2rem;
    user-select: none;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 700;
}
  
.vote input,
.torbens-choice input {
    display: none;
}

.vote label:hover,
.vote label:focus,
.vote label:active {
    outline: .075rem solid var(--primary-color);
}

.torbens-choice label:hover,
.torbens-choice label:focus,
.torbens-choice label:active {
    outline: .075rem solid var(--primary-color);
}

.vote input:checked + label,
.torbens-choice input:checked + label {
    outline: .125rem solid var(--primary-color);
}

.vote input + label::before {
    content: "⬜";
    padding-right: .5em;
}

.torbens-choice input + label::before {
    content: "🎲";
    padding-right: .5em;
}

.vote input:checked + label::before,
.torbens-choice input:checked + label::before {
    content: "✔️";
}