@font-face {
    font-family: 'RussellSquare';
    src: url('RussellSquare.eot');
    src: url('RussellSquare.eot?#iefix') format('embedded-opentype'),
        url('RussellSquare.woff2') format('woff2'),
        url('RussellSquare.woff') format('woff'),
        url('RussellSquare.ttf') format('truetype'),
        url('RussellSquare.svg#RussellSquare') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

*:not(i) {
        font-family: 'Inter', sans-serif;
        margin: 0 !important;
        padding: 0;
}

body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
		color: #fff;
		text-align: center;
		min-height: 500px;
}

.canvas-container.visible {
  visibility: visible !important;
}

.container {
		width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
		background-color: #000000;
		background-image: url("https://www.perlistenaudio.com/wp-content/uploads/2023/05/visualizer_bg.png");
		background-position: center left;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 100px;
		padding-bottom: 100px;
		height: 500px;
}

input, button, select {
        padding: 15px;
		font-weight: 300;
		font-size: 15px !important;
}

.canvas-container {
        position: absolute;
        top: 0;
        left: 0;
        background: #141414b0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
}

canvas {
        border-radius: 20px;
}

canvas, #toggleButton, #saveButton {
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
}

#toggleButton, #saveButton {
        background: transparent;
        border: none;
		min-width: 250px;
}

#toggleButton svg {
        width: 20px;
        cursor: pointer;
}

body[data-generated="true"] canvas, body[data-generated="true"] #toggleButton, body[data-generated="true"] #saveButton {
        opacity: 1;
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
}

body[data-open="true"] .canvas-container {
        opacity: 1;
        pointer-events: all;
}

.lottie {
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        opacity: 0;
        position: absolute;
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
}

.lottie img {
	border-radius: 300px !important;
}

body[data-open="true"] .lottie {
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
        opacity: 1;
}

body[data-generated="true"] .lottie {
        opacity: 0;
}

input {
	margin-left: 7px !important;
	margin-right: 7px !important;
}


/*/ Perlisten /*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

body {
        background: #000;
        font-family: "Lato", sans-serif !important;
}

p {
        font-family: "Lato", sans-serif !important;
		font-weight: 300;
}

.ai-project h1 {
        color: #fff;
}

.ai-project input {
        border: none;
        border-radius: 10px;
}

.ai-project button {
        background-image: linear-gradient(to top, #b56d51, #E6AF8B) !important;
        border-radius: 10px;
        border: none;
        color: #fff;
		padding-left: 30px;
		padding-right: 30px;
		width: 255px;
		font-weight: 300;
		font-size: 15px !important;
}

.ai-project button:hover {
        background-image: linear-gradient(to top, #E6AF8B, #b56d51) !important;
}

button {
	cursor: pointer;
}

h3 {
	color: #FFFFFF;
	font-family: 'RussellSquare', sans-serif;
	font-size: 70px;
	line-height: 70px;
	font-weight: 600;
}

h5 {
	color: #FFFFFF;
	font-family: 'RussellSquare', sans-serif;
	font-size: 22px;
	line-height: 22px;
	font-weight: 600;
}

p {
	line-height: 24px;
}

.disclaimer {
	font-size: 12px !important;
	font-weight: 400;
	max-width: 600px;
	margin: 0 auto !important;
}

.logo {
	height: 20px; 
	z-index: 999; 
	position: absolute; 
	padding-top: 305px; 
	padding-right: 0px !important;
}

	p.disclaimer {
		line-height: 16px;
	}

@media only screen and (max-width: 780px) {
	.ai-project {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	h3 {
		font-size: 40px;
		line-height: 40px;
  	}

	p, button {
		font-size: 14px !important;
	}

	p.disclaimer {
		font-size: 11px !important;
		padding-left: 20px;
		padding-right: 20px;
	}

	input {
		margin: 10px !important;
		font-size: 14px !important;
	}

	#song-img_color, #song-img_black {
		width: 320px;
		height: 320px;
	}

	.logo {
		height: 15px; 
		z-index: 999; 
		position: absolute; 
		padding-top: 135px; 
		padding-right: 0px !important;
	}

	input {
		margin-left: 3x !important;
		margin-right: 3px !important;
	}
}