/*
spectacol.eu - styles
*/

@font-face {
		font-family:Inter;
		src: 
			url('/fonts/Inter-VariableFont_opsz,wght.ttf') 
			format(‘truetype supports variations’),
			url('/fonts/Inter-VariableFont_opsz,wght.ttf') 
			format('truetype-variations');
		font-stretch: 25% 150%;
		font-style: oblique 0deg 10deg;
		font-weight: 100 900;
		font-display: swap;
	}

@font-face {
		font-family:Alata;
		src:url('/fonts/Alata-Regular.ttf') format('truetype');
}

	
:root {
	--bright-color:#F2F4F3;
	--key-color:#2a9d8f;
	--light-color:#47807A;
	--key-color-shade1:#073d38;
	--roundcorners:10px;
}

::selection {
  color:var(--bright-color);
  background-color:var(--key-color);
}

* {
  box-sizing: border-box;
}

body { 
	background:var(--bright-color);
	color:var(--key-color);
	margin:0;
	padding:0;
	font-size:1rem;
	font-family:Inter, sans-serif;
	font-weight:400;
	font-style: normal;
}

p {
	font-size:1.7rem;
}

a {
	color:var(--key-color);
	text-decoration:none;
	font-weight:700;
}

/* Header */
header {
	clear:both;
    padding:0;
	width:auto;
    margin:3rem 0;
    height:3rem;
}

header #logo { float:left; width:auto; height:3rem; line-height:3rem; margin-right:2rem; }

header #logo a {
	font-family:Alata, serif;
	font-size:2.2rem;
	background: linear-gradient(90deg, #2a9d8f 40%, #19FFE4 50%, #2a9d8f 60%);
	background-size: 200% auto;
	color:var(--key-color); /* Fallback for browsers that don't support background-clip */
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	animation: logo-gradient 10s linear infinite;
	display: inline-block;
	font-weight:700;
}

header #logo a:hover 
{
	background:var(--key-color-shade1);
	color:var(--key-color-shade1);
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
	transition: background ease-in-out 1s;
}

@keyframes logo-gradient {
  0% {
	background-position: 0% center;
  }
  100% {
	background-position: 200% center;
  }
}










/* Searchbox */
header #search { float:left; width:55%; height:2.5rem; margin-top:0.5rem; line-height:2.5rem; }
header #search input#searchinput { color:#FFFFFF; border-radius:99px; font-size:1rem; height:2.5rem; line-height:2.5rem; background:rgba(0,0,0,0.1); padding:0 2.5rem; box-sizing:border-box; border: none; width:100%; transition: all 0.1s ease-in-out; }
header #search input#searchinput::placeholder { color:var(--bright-color); }
header #search input#searchinput:hover,
header #search input#searchinput:active,
header #search input#searchinput:focus { outline: none; border:none; background:rgba(0,0,0,0.25); color:#FFFFFF; }
header #search input#searchinput::selection { background:rgba(0,0,0,0.25); }





header #usermenu { float:right; height:3rem; line-height:3rem;  }
header #usermenu span { border-radius:99px; height:3rem; width:3rem; line-height:3rem; text-align:center; border:2px solid var(--key-color); color:var(--key-color); }

/* Section */
section {
	clear:both;
    padding:0;
	margin:0 7rem;
	width:auto;
}

/* Buttons */
a.button {
	background:var(--bright-color);
	display:inline-block;
	width:auto;
	font-size:0.9rem;
	margin:0;
	text-align: center;
	padding:1rem 3rem;
	color:var(--key-color);
	text-decoration:none;
	border-radius:var(--roundcorners);
	cursor:pointer;
	font-weight:300;
	transition: all 0.2s ease-in-out;
}

a.button:hover {
	background:var(--key-color-shade1);
	color:var(--bright-color);
	text-decoration:none;
	transition: all 0.2s ease-in-out;
	
}

a.button.button-outline { background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,0.2); background: radial-gradient(circle,rgba(25, 255, 228, 0.15) 0%, rgba(25, 255, 228, 0.05) 100%); }
a.button.button-outline:hover { background:rgba(25, 255, 228, 0.2); border:1px solid rgba(255,255,255,0.2); color:#FFFFFF; }

/* Homepage infoboxes */
.infobox1 {
	margin:6rem 0;
}

.infotext1 {
	font-family:Alata, serif;
	color:var(--key-color);
	font-size:4rem;
	text-align:center;
	font-weight:700;
	line-height:80%;
	margin-bottom: 3rem;
}

.infotext1 span {
	background: linear-gradient(45deg, #2a9d8f 25%, #19FFE4 50%, #2a9d8f 75%);
	background-size: 100% auto;
	color:var(--key-color); /* Fallback for browsers that don't support background-clip */
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
}

.infotext2 {
	font-size:1.5rem;
	color:var(--light-color);
	text-align:center;
	line-height:140%;
	font-weight:400;
	margin:0;
	padding:0;
}

.infotext2 a {
	color:var(--bright-color);
	text-decoration:none;
	display: inline-block;
	position: relative;	
}
.infotext2 a:hover {
	color:var(--key-color);
	text-decoration:none;
	
}

.infotext2 a:hover:after {
	background-color:var(--key-color);
}



.infoboxOuterContainer1 { 
	margin-top:3rem;
	clear:both;
	background: #073d38;
	background: linear-gradient(45deg, rgba(7, 61, 56, 1) 0%, rgba(25, 128, 116, 1) 100%);
}

.infoboxInnerContainer1 { 
	display: flex;
	min-height: 300px;
	width: 100%;
	flex-wrap: wrap;
	clear:both;
	gap:1rem;
	padding:6rem 0;
}

.infotext8 {
	background:none;
	font-family:Alata, serif;
	font-size:3.3rem;
	font-weight:700;
	padding:6rem 0 0 0;
	text-align:center;
	background: linear-gradient(90deg, #2a9d8f 10%, #19FFE4 50%, #2a9d8f 90%);
	background-size: 200% auto;
	color:var(--key-color); /* Fallback for browsers that don't support background-clip */
	background-clip: text;
	-webkit-background-clip: text;
	text-fill-color: transparent;
	-webkit-text-fill-color: transparent;
}

.infobox2 { flex: 1; border:1px solid rgba(255,255,255,0.2); background: radial-gradient(circle,rgba(25, 255, 228, 0.12) 0%, rgba(25, 255, 228, 0) 100%);
 padding:2rem; border-radius:var(--roundcorners); }
.infobox3 { flex: 1; border:1px solid rgba(255,255,255,0.2); background: radial-gradient(circle,rgba(25, 255, 228, 0.12) 0%, rgba(25, 255, 228, 0) 100%);
 padding:2rem; border-radius:var(--roundcorners); }
.infobox4 { flex: 1; border:1px solid rgba(255,255,255,0.2); background: radial-gradient(circle,rgba(25, 255, 228, 0.12) 0%, rgba(25, 255, 228, 0) 100%);
 padding:2rem; border-radius:var(--roundcorners); }

.infotext3 {
	background:none;
	font-family:Alata, serif;
	color:var(--bright-color);
	font-size:1.5rem;
	font-weight:700;
	margin:0 0 1rem 0;
	text-align: center;
}

.infotext4 {
	background:none;
	font-size:1rem;
	color:var(--bright-color);
	text-align:left;
	line-height:140%;
	margin:0;
	padding:0;
	font-weight:300;
	text-align: center;
	opacity: 0.8;
	min-height:200px;
}

/* Roadmap */
.roadmap { background:var(--key-color-shade1); padding:6rem 0;  text-align: center; font-family:Alata, serif; }
.roadmap .circle,
.roadmap .bar {
  display: block;
  background:var(--key-color);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  vertical-align:top;
  z-index:99;
  position: relative;
}
.roadmap .circle.active { z-index:100; background:var(--bright-color); position: relative; }
.roadmap .bar {
  position: relative;
  width: 6px;
  height: 100px;
  margin: -2px 0px -2px 7px;
  border-radius: 0;
  top:0;
  vertical-align:top;
  left:0;
}
.roadmap .circle .title {
  color:var(--key-color);
  font-size: 1.2rem;
  line-height: 20px;
  padding-left: 55px;
  display: block;
  width: calc(100vw - 130px);
  text-align:left;
}
.roadmap .circle .title.active { font-size:1.5rem; color:var(--bright-color); }



.infobox5 {
	background:var(--key-color);
	padding:5rem;
	border-radius:var(--roundcorners);
	margin:3rem 0;
	cursor:default;
}

.infotext5 {
	font-family:Alata, serif;
	color:var(--bright-color);
	font-size:4rem;
	font-weight:700;
	line-height:80%;
	margin:0 0 3rem 0;
	text-align: center;
	cursor:default;
}

.infotext5 span { color:var(--key-color-shade1); }

.infotext6 {
	font-size:1.5rem;
	color:var(--bright-color);
	line-height:130%;
	font-weight:400;
	margin:0;
	padding:0;
	text-align: center;
	cursor:default;
}

.infotext7 {
	display: block;
	text-align: center;
	font-size:1.5rem;
	margin-top:3rem;
}

.infotext9 {
	font-size:1rem;
	margin:0;
	padding:0;
	text-align: center;
}

/* App */
#app { padding:0; }

/* Video thumbnails */
#app .videothumbs_heading { clear:both; font-family:Alata, serif; font-size:1.6rem; color:var(--key-color); margin:6rem 0 1rem 0; font-weight:700; }
#app .videothumbs_heading a { color:var(--key-color); font-weight:700; }
#app .videothumbs_heading a:hover { color:var(--key-color); font-weight:700; text-decoration:none; }
#app .videothumbs {
	display: flex;
	flex-wrap: wrap;
	clear:both;
	gap: 1rem; 
}
#app .videothumbs .videothumb { background:rgba(0,0,0,0.1); border-radius:var(--roundcorners); box-sizing: border-box; flex: 1 1 calc(100% / 3 - (2rem * 2 / 3)); overflow: hidden; transform: scale(1.0); transition: all 0.2s ease-in-out; 	min-width: 150px; }
#app .videothumbs.videothumbs-x5 .videothumb { flex: 1 1 calc(100% / 5 - (2rem * 4 / 5));}
#app .videothumbs .videothumb .videothumb-thumbnail { padding:0; }
#app .videothumbs .videothumb.videothumb-scena .videothumb-thumbnail { padding:0; }
#app .videothumbs .videothumb .videothumb-thumbnail img { width:auto; height:auto; max-width:100%; }
#app .videothumbs .videothumb .videothumb-title { margin-left:1rem; font-family:Alata, serif; font-size:1.2rem; }
#app .videothumbs .videothumb .videothumb-info { margin-left:1rem;  font-size:0.8rem; font-weight:400; color:var(--light-color); margin-bottom:1rem; }
#app .videothumbs .videothumb.videothumb-scena .videothumb-info { margin-bottom:0; }
#app .videothumbs .videothumb:hover { background:var(--key-color-shade1); transform: scale(1.02); }
#app .videothumbs .videothumb:hover .videothumb-title,
#app .videothumbs .videothumb:hover .videothumb-info { color:var(--bright-color); }

/* Video player */
#video { clear:both; }
#video #videoplayer video { max-width:100%; max-height:auto; height:auto; border-radius:var(--roundcorners); margin:0 0 3rem 0; }
#video #videoplayer.scena { text-align:center; }
#video #videoplayer.scena video { max-width:auto;  max-height:auto; height:500px; }
#video #videoboxleft { float:left; width:65%; }
#video #videoboxleft #videotitle { font-family:Alata, serif; font-size:4rem; line-height:100%; font-weight:900; color:var(--key-color-shade1); margin:0 0 0.5rem 0; cursor:default; }
#video #videoboxleft #videodescription { font-size:1.5rem; line-height:140%; font-weight:400; color:var(--light-color); margin:3rem 0; clear:both; cursor:default; }
#video #videoboxright { float:right; width:25%; margin-left:10%; }
#video #videoboxright #videotools { background:var(--key-color-shade1); border-radius:var(--roundcorners); color:var(--bright-color); padding:1rem 2rem; font-size:1rem; }
#video #videoboxright #videouser { display: flex; align-items:center; color:var(--key-color-shade1); font-weight:700; height:60px; line-height:30px; margin:1rem 0; cursor:default; }
#video #videoboxright #videouser img { width:60px; height:60px; border-radius:var(--roundcorners); margin-right:1rem; display:inline-block; }
#video #videoboxright #videoinfo { color:var(--light-color); font-size:0.9rem; font-weight:400; cursor:default; }
#video #videoboxright #videokeywords { clear:both; margin:3rem 0; }
#video #videoboxright #videokeywords a { background:#FFFFFF; color:var(--key-color-shade1); font-size:0.7rem; font-weight:400; border-radius:99px; padding:0.5rem 1rem; display:inline-block; margin:0 0.5rem 0.5rem 0; opacity:1; }
#video #videoboxright #videokeywords a:hover { opacity:0.7; }

/* Footer */
footer {
	background:var(--key-color-shade1);
	color:var(--bright-color);
	text-align:center;
	margin:3rem 0 0 0;
	padding:3rem 0;
	clear:both;
}

footer a {
	font-weight:700;
	color:var(--bright-color);
}

footer a:hover {
	color:var(--key-color);
    text-decoration:none;
}




/* Responsive Design */
@media (max-width: 916px) {
	header { margin:1rem; }
	section {
		padding:0;
		margin:0 1rem;
		width:auto;
		
	}
	
	
	.infotext1 {
		font-size:2rem;
		margin-bottom: 1rem;
	}
	
	.infotext2 {
	font-size:1.2rem;
	}
		
		
	.infoboxcontainer1 { 
		display: flex;
		min-height: auto;
		width: 100%;
		clear:both;
		margin:6rem 0;
	}
	.infobox2,
	.infobox3,
	.infobox4 { flex: 1 1 100%; padding:1rem; }


		
	#app .videothumbs .videothumb .videothumb-title { margin-left:1rem; font-size:1rem; }
	#app .videothumbs .videothumb .videothumb-info { margin-left:1rem; font-size:0.6rem; }
	
	#video #videoboxleft { float:none; width:100%; }
	#video #videoboxleft #videotitle { font-size:1.5rem; }
	#video #videoboxleft #videodescription { font-size:1rem; margin:0; }
	#video #videoboxright { float:right; width:25%; margin-left:10%; }
	#video #videoboxright { float:none; width:100%; margin-left:0; }

	
	
	
	
}