/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:wght@400;500;600&display=swap');
/*
Serif:
Abhaya Libre - nok for tynd i det
Adamina - meget tæt på
Alice - måske lidt for svungent
Alegreya - mnjej
Amiri - mnjae
Baskervville - måske
Bodoni Moda - nej
Cormorant Infant - Nej
Cormorant Upright - Nej

Sans:
Archivo Narrow - nej for moderne
Arima - for feminin
Athiti - nej for moderne

Script:
Bad Script
Caveat

Tjekket google fonts frem til d*/

/* -------------------------- RESET -------------------------- */

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, hr {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
}
ul, ol {
	list-style: none;
}
fieldset, img, hr {
	border: none;
}
caption, th {
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td {
	vertical-align: top;
}
html {
	margin: 0px auto;
	padding: 0;
}
/* ------------------------------------front page----------------------------*/
#background, #gradient2, #themikkel {
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: fixed;
	margin: 0px;
}
#background {
	background-color: #ddd;
	background-image: url(/images/background.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}
body {
	background: linear-gradient(90deg, #eee, #fff, #fff, #fff, #eee);
}
/*-----------------------syng for----------------------*/
#settings, .solo, .ipad, .form, .chords, q, em {
	display: none;
}
/*-----------------------------------------------------syngmed og booking-----------------------------------*/

#theLyrics {
	padding: 50px 50px 200px 50px;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-family: 'Crimson Pro', serif;
	color: black;
	font-size: 3em;
	font-weight: bold;
	transition: 500ms;
	max-width: 1000px;
	margin: auto;
}
#theLyrics p {
	margin-bottom: 1.5em;
}
h1 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 2.5em;
	line-height: 1em;
	padding: 75px 0px 75px 0px;
}
#theLyrics h2 {
	font-family: Arial;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 2em;
	line-height: 1em;
	padding: 0px 0px 40px 0px;
}
#theLyrics p {
	line-height: 1.2em;
	margin: 0px 0px;
	color: #333;
}
#exit {
	position: fixed;
	width: 80px;
	height: 80px;
	top: 0px;
	right: 0px;
	background-image: url(/images/close.png);
	background-repeat: no-repeat;
	/*background-attachment: fixed;*/
    /*background-position: center;*/
	background-size: contain;
	mix-blend-mode: darken;
	z-index:10;
}

#info{
	
}

/*dark mode*/
@media (prefers-color-scheme: dark) {
body {
	background: #333;
}
h1 {
	color: #fff;
}
#theLyrics p {
	color: #ccc;
}
}
/*----------------------------------------menu og knapper-------------------------------*/

a {
	text-decoration: none;
	color: #000;
}
#menu {
	position: fixed;
	bottom: 30px;
	width:100%;
	margin:0px auto;	
    text-align: center;
	
}
#menu div {
	height: 100px;
	width: 275px;
	font-size: 3em;
	display:inline-block;
	margin:10px;
	align:center;
}
.button {
	text-align: center;
	height: 100px;
	width: 49%;
	background: #666;
	font-weight: 500;
	font-size: 3em;
	font-family: 'Roboto Mono', sans-serif;
}
.button span {
	color: #fff;
	position: relative;
	top: 14px;
}
#smaller {
	position: fixed;
	bottom: 0px;
	left: 0px;
}
#bigger {
	position: fixed;
	bottom: 0px;
	right: 0px;
}




/* Landscape orientation */
@media screen and (orientation: landscape) {
#menu {
	transform: scale(0.35);
	left: 41%;
	top: 80%;
}
#smaller, #bigger, #exit {
	display: none;
}
#theLyrics {
	font-size: 1em;
}
h1 {
	padding: 0px 0px 20px;
}
}

/*dark mode*/
@media (prefers-color-scheme: dark) {
html, body, #select {
	background-color: #000;
}
#select h1 {
	color: #ffffff;
	border-top: 2px dashed grey;
}
.song {
	color: #dcdcdc;
}
.song.selectedSong {
	color: #b2edc6;
}
}
/*----------------------------gradients-------------------------------*/
#gradient1 {
	background: linear-gradient(124deg, #000000, #ffffff69, #000000);
	background-repeat: no-repeat;
	background-size: 400% 400%;
	background-size: 100% 100%;
	animation: gradient 8s ease infinite;
	mix-blend-mode: overlay;
}
#gradient2 {
	background: linear-gradient(211deg, #ffffff85, #0065cd78, #ffffff7d);
	background-repeat: no-repeat;
	background-size: 400% 400%;
	animation: gradient 6s ease infinite;
	mix-blend-mode: color-dodge;
	transform: translateZ(0);
	-webkit-backface-visibility: visible;
}
#themikkel {
	background-image: url(/images/themikkel.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
 @keyframes gradient {
 0% {
 background-position: 0% 50%;
}
 50% {
 background-position: 100% 50%;
}
 100% {
 background-position: 0% 50%;
}
}
/*---------------------------------film gain--------------------------------*/
.grain:after {
	content: "";
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
	height: 300%;
	width: 300%;
	position: fixed;
	opacity: 0.15;
	animation: animateGrain 8s steps(10) infinite;
}
 @keyframes animateGrain {
 0%, 100% {
transform:translate(0, 0)
}
 10% {
 transform:translate(-5%, -10%)
}
 20% {
 transform:translate(-15%, -20%)
}
 30% {
 transform:translate(-5%, -10%)
}
 40% {
 transform:translate(-15%, -20%)
}
 50% {
 transform:translate(-5%, -10%)
}
 60% {
 transform:translate(-15%, -20%)
}
 70% {
 transform:translate(-5%, -10%)
}
 80% {
 transform:translate(-15%, -20%)
}
 90% {
 transform:translate(-5%, -10%)
}
 100% {
 transform:translate(-15%, -20%)
}
}
}