@import url("https://fonts.googleapis.com/css2??family=Bruno+Ace&family=Righteous&family=Gruppo&family=Anta&family=Goldman&family=Rubik+Doodle+Shadow&display=swap");

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

body {
  font-size: 100%; color:#fff; font-family: 'Goldman', sans-serif;  letter-spacing: 0.08em; background-color: #090A0E; }



a:link, a:hover, a:visited {color: #9DAEEC; text-decoration: underline; }
a:hover {color: #93F083; }

.caps {text-transform:uppercase; }

.nosto1 {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  margin: 0;
    background: url("img/texture-horiz-pack.jpg") no-repeat center center/cover;

}


.bruno {
  font-family: "Bruno Ace", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Goldman", sans-serif;
  font-weight: 800;
  font-size: 3em; 
}

.doodle {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-weight: 400;
  font-size: 3em; color: #EE8E8E; 
}

h2 {
  font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-size: 2em; 
  margin-top: 0.6em; 
}


.btnround {
  width: 14em;
  height: 2.5em;
  background-color: #8F9CE8;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  display: inline-block; 
  margin-right: 0.5em; 
  justify-content: center;
  align-items: center;
  border-radius: 10% / 50% ;
  margin-top: 0;
  color: #090A0E;
  font-family: "Goldman", sans-serif;
  text-transform: uppercase; 
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  border: transparent !important;
}

.btnround a{
color: #090A0E; 
text-decoration: none; 
}

.btnround:hover {
  color: #090A0E;
  background-color: #96EE8A;
  transition: all ease 0.5s;
}

img { 	width: 100%;}



.text {display: block; margin-top: 8em; margin-bottom: 8em; max-width:1040px;}
.column {float: left; margin-left: 2em; margin-bottom: 3em; }
.left {padding-left: 10%; width: 40%;}
.right {padding: 20px; width: 24%; background-color: rgba(0, 0, 0, 0.5); background: url("img/texture-vertic-pack.jpg") no-repeat center center/cover;}

img.hero {display: block; width: 80%; }
.larger {font-size: 1.2em; }

.lineup {font-size: 1.1em; display: block; padding-bottom: 0.8em; border-bottom: 1px solid #eee; }


.ekanosto {display: block; background-color: rgba(0, 0, 0, 0.0); border-top: 1px solid #fff; margin-top: 4em; margin-left:11%; margin-right: 36%;}
.track  {font-size: 1em; text-transform: uppercase; display: block; padding-bottom: 0.5em; border-bottom: 1px solid #eee; text-decoration: none; color: #fff; }

.simple {text-decoration: none; font-weight: 400; }
a.simple {text-decoration: none; font-weight: 400; }
.type {color: #aaa; }

img.story {
	width: 40%;
	float: left;
	margin-right: 3em; 

}

img.storyright {

	width: 45%;
	float: right;
	margin-left: 2em; 

}

.rounded {border-radius: 50%;}
.indent {margin-left: 11%; }

img.bottomlogo  {width: 25%;  opacity: 0.7; margin-top: 4em; }

.cover-flex {  display: flex;   flex-direction: row; max-width: 560px;  flex-wrap: wrap; margin-bottom: 4em; margin-left: 11%; }
.cover-flex > div { background-color: rgba(0,0,0,0.4);   padding: 1em; margin: 0.5em; flex: 25%; border: 1px solid rgba(225,225,225,0.2) ;  text-align: center; }


@media only screen and (min-width: 841px) and (max-width: 1080px) {

img.hero {width: 90%; }
h2 {font-size: 1.8em;  margin-top: 0.2em;}
.larger {font-size: 0.9em; }
.ekanosto {margin-left:6%; margin-right: 6%;}
.text {margin-left: 6%; margin-right: 6%; margin-top: 4em; margin-bottom: 4em; font-size: 0.9em; }

.column {float: left; margin-left: 2em; margin-bottom: 3em; }
.left {padding-left: 2%; width: 44%;}
.right {padding: 20px; width: 36%;}
.track  {font-size: 0.8em; }

img.story {width: 45%;  }
.lineup {font-size: 1em; }

}


@media only screen and (min-width: 300px) and (max-width: 840px){

h2 {font-size: 1.8em; }
img.hero {width: 90%; }
.larger {font-size: 0.9em; }
.ekanosto {margin-left:6%; margin-right: 6%; margin-top:3em; }

.indent {margin-left: 6%; }
.cover-flex { margin-left: 3%; line-height: 80%;}
.cover-flex > div { padding-bottom: 0; }

img.story { 	width: 100%; margin-bottom:1em; }

.simple {font-size: 0.8em;}
.type {font-size: 0.7em;  }

.text {margin-top: 4em; font-size: 0.8em;  }
.column {margin-left: 1%;}
.left {padding-left: 0; width: 95%;}
.right {width: 85%; margin-left:2%; }
.track {font-size: 0.8em;}
img.bottomlogo  {width: 75%;  opacity: 0.7;}

}




 .righteous {
  font-family: "Righteous", sans-serif;
}
 .gruppo {
  font-family: "Gruppo", sans-serif;
}
 .anta {
  font-family: "Anta", sans-serif;
}
 .goldman {
  font-family: "Goldman", sans-serif;
}

/* DOWN ARROW */

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 25px;
  display: block;
  text-align: center;
  font-size: 20px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 4s ease-in-out infinite;
  -moz-animation:    fade_move_down 4s ease-in-out infinite;
  animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}