@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Source+Code+Pro:wght@200;400&display=swap');

* { 
	scroll-behavior: smooth; 
}

html { font-size: 26px;
}

@media (min-width: 768px) {
	html { font-size: 32px; }
}

body { margin: 0 !important; padding: 0;  color: #fff; font-family: 'Source Code Pro', monospace; font-weight: 400;}

.top-img {
	width: 100%;
	height: 90vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url("../img/solblomma.jpg");
}
@media (min-width: 768px) {
	.top-img {
		height: 100vh;
	}
}

.outer-space {
	display: flex;
	width: calc(100% - 2rem);;
	height: 100%;
	margin: 0 auto;
	padding: 2rem 0;
	max-width: 1200px;
}
@media (min-width: 768px) {
	.outer-space { 
		width: 100%;
		padding: 2rem; 
	}	
}
		
h1 { 
	font-family: 'Audiowide', cursive;
	align-self: flex-end;
	margin: 0;
	padding: 0;
	line-height: 1em;
	font-size: 1.7rem;
	margin-bottom: -20px;
}
@media (min-width: 768px) {
	h1 {
		line-height: 1.4em;
		margin-bottom: 0;
		font-size: 2rem; 
	}
}
@media (max-width: 300px) {
	h1 {
		font-size: 1.4rem;
	}
}

/* FADE IN TEXT ANIMATION START */
.fadein span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}
.fadein span:nth-child(1) { animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(2) { animation: fade-in 0.8s 1.0s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(3) { animation: fade-in 0.8s 2.0s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(4) { animation: fade-in 0.8s 3.0s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(5) { animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(6) { animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(7) { animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(8) { animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(9) { animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(10) { animation: fade-in 0.8s 1.0s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(11) { animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(12) { animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(13) { animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(14) { animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(15) { animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(16) { animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(17) { animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0); }
.fadein span:nth-child(18) { animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0); }

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

h2 { 
	display: block;
	font-size: 1.5em;
	font-weight: 700;
	margin-top: 0;
	padding-bottom: 0.83em;
	padding-top: 0.83em;
	font-family: 'Audiowide', cursive;
}

p { 
	display: block;
	margin-bottom: 1.5em;
	margin-top: 1.5em;
	font-size: .5em;
	text-align: justify;	
	font-family: 'Source Code Pro', monospace;
	font-weight: 400;
	line-height: 1.6em;
}

@media (min-width: 768px) {
	p {
		font-weight: 200;
		line-height: 1.3em;
	}
}


p a { 
	font-size: 1.5em; font-weight: 100; text-decoration: none;   
	color: #2be5ab;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3);
	border-bottom: dotted #000 1px;
}

p a:hover { 
	font-size: 1.5em; text-decoration: none; color: #B7835A; 
	border-bottom: dotted white 1px;
	-webkit-transition: all 0.33s ease-in-out;
	-moz-transition: all 0.33s ease-in-out;
	-o-transition: all 0.33s ease-in-out;
	-ms-transition: all 0.33s ease-in-out;
	transition: all 0.33s ease-in-out;
	color: red;
}

#eee {
	font-weight: 100;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3);
}

.wrap {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url("../img/back.jpg");
}

.content {
	margin: 0 auto;
}
.content-story {
    margin: 0 auto;
    padding: 40px 32px 70px;
    background: #000;
}
@media (min-width: 768px) {
	.content-story {
		padding: 40px 70px 70px;
	}
}

@media (max-width: 300px) {
	.content-story {
		padding: 40px 10px 70px;
	}
}

#album-data {
	margin: 0;
	margin-top: -12px;
	
	width: 100%;
}
@media (min-width: 768px) {
	#album-data {
		margin-top: 0;
	}
}

#album-data span {
	display: block;
	font-size: 0.6em;
	font-weight: 200;
	line-height: 1.9em;
	border: 1px #fff solid;
	border-bottom: none;
	padding-left: 7px;
}
@media (min-width: 768px) {
	#album-data span { 
		font-size: 0.5em;
	}
}

#album-data span.highlight,
#album-data span.highlight a {
	
	text-decoration: none;
}
#album-data span.highlight a {
	font-weight: 400;
	color: #38d4e0;
}

#album-data span.highlight a:hover {
	opacity: .7;
}


#album-data span:last-child {
	border-bottom: 1px #fff solid;
}

.logo{
	width: 100%;
	max-width: 446px;
	margin: 0 auto;	
}

.logo img {
	width:100%;
}

@media (max-width: 600px) {
	.logo {
		max-width: 100%;
	}
}

/* HELPERS */

.rotate-45-right {
	transform: rotateY(0deg) rotate(90deg); /* needs Y at 0 deg to behave properly*/
    transition: transform 12s;
    color: #fff;
}
a.scroller {
	color: #fff;
}
a.scroller:hover {
	color: #000;
}