guest_worker/www/backend/style.css

@font-face {
    font-family: 'bebas';
    src: url('/font/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: 'freesans';
  src: url('/font/FreeSans.ttf')
}

@font-face {
  font-family: 'bt';
  src: url('/font/steelfish_rg.ttf')
}

:root{

  --base-font-size: 60px;
  --spec_name-font-size: 120%;
  --spec_value-font-size: 250%;

  --base-color: #271601; /* tekst */
  --alt-color: #FFF5DF;  /* achtergrond */
  --amazon-color: #F0C14C;

  /* ////// GAT ACHTERKANT PLEK & POSITIE /////// */
  /* */                                        /* */
  /* */ --pos-x: 0px; 			       /* */
  /* */ --pos-y: 50px;                         /* */
  /* */ --width: 100%;        /*  285mm           */
  /* */ --height: 100%;      /*  500mm            */
  /* */                                        /* */
  /* //////////////////////////////////////////// */

}


body{
	background: black;
	margin:0;
	color:white;
	font-family: 'bt';
	font-size: var(--base-font-size);
  line-height: var(--base-font-size)*1.5;
}

.hit{
	position:absolute;
	top:var(--pos-y);
	left:0;
	right:0;
	bottom:0;
	text-align: center;
	transition: opacity 1s;
	opacity: 1;
	/*animation: fadeIn 1s, fadeOut 1s 2s;*/
}

.hit.invisible{
	opacity: 0;
}

@keyframes fadeIn{
	from{opacity:0;}
	to{opacity:1;}
}

@keyframes fadeOut{
	from{opacity:1;}
	to{opacity:0;}
}


.hit img{
	display: block;
	margin: 10vh auto 7vh;
	width: 1000px;
	height: 500px;
	border: solid 1px white;

}

.credits{
	font-size: var(--base-font-size);

  text-transform: uppercase;
}

.credits::before{
	content:'created by';
  font-family: 'freesans';
  text-transform: lowercase;
	display:block;
	font-size: calc(var(--base-font-size)/3);

}

.country{
  /* color: #fff; */
  /* font-family: 'freesans';
  text-transform: lowercase; */
  font-size: calc(var(--base-font-size)/2);
  vertical-align: 67%;
  margin-left: -5px;
  margin-right: 15px;
}
.country::before{content:'(';}
.country::after{content:')';}

#collaborators{
	height: 30vh;
	width: 1000px;
	margin: 0 auto;
}
#collab_items{
	text-align: justify;
}
#collaborators::before{
	margin-top: 7vh;
	content:'in collaboration with';
	display:block;
  font-family: 'freesans';
	font-size: calc(var(--base-font-size)/3);
  text-transform: lowercase;
}
#collaborators .credit{
	margin-right:10px;
}