guest_worker/www/worker_specs/style.css

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

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


:root{

  --base-font-size: 17px;
  --big-font-size: calc(var(--base-font-size)*1.5);
  --bigger-font-size: calc(var(--big-font-size)*1.5);
  /* --spec_name-font-size: 120%;
  --spec_value-font-size: 250%; */

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

  /* /////// GAT VOORKANT PLEK & POSITIE //////// */
  /* */                                        /* */
  /* */ --pos-x: 555px; 		       /* */
  /* */ --pos-y: 110px;                         /* */
  /* */ --width: 420px;      /*  115mm            */
  /* */ --height: 1000px;    /*  270mm            */
  /* */                                        /* */
  /* //////////////////////////////////////////// */

}


html, body{
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  font-family: 'bebas';
  font-size: var(--base-font-size);
  line-height: 1.1;
  background: var(--alt-color);
  overflow: hidden;
}


#wrapper{

  position: absolute;
  left: var(--pos-x);
  bottom: calc(100vh - (var(--pos-y) + var(--height)));
  width: var(--width);
  height: auto;

  background: var(--alt-color);
  box-sizing: border-box;
  padding: 2%;
}



#wrapper .hit{
	display:block;
}




.transition{
	overflow:hidden;
  display: block;
	position:relative;
	padding-left: calc(50% + 20px);

	font-size: var(--base-font-size);
	height: 40px;
  /* text-align: center; */
	animation-duration: 3s;
  	animation-name: slidein;
    margin: 20px 0px;
}

.transition p{
      margin:2px;
}

.transition::before{
	content:'⇩'; /*'⇓';*/
	display:block;
	position:absolute;
	font-family:'monospace';
	font-size: 80px;
	top:10px;
	left:calc(50% - 30px);
	line-height:0;

}



.state{
	overflow:hidden;
	animation-duration: 3s;
  	animation-name: slidein;
  	transition: max-height 1s;
  	/* max-height: 200px; */
    margin: 2px;
    border:solid 2px black;
    padding: 4px;
}

.state h2{
  font-family: 'bebas';
  font-size: var(--bigger-font-size);
    margin: 2px;
    font-weight: normal;
}


.state p{
  margin: 0;
  font-family: 'bebas';
  font-size: var(--big-font-size);
}

.state img{
  max-width: 100%;
}

.state .descriptor{
  font-family: 'freesans';
  font-size: var(--base-font-size);
  margin-top: var(--base-font-size);
}

.state.assignment-hidden {
	/*On abandon etc.*/
	max-height: 0px;
}



@keyframes slidein {
  from {
    max-height:0;
  }

  to {
    max-height: 600px;
  }
}

/*
#worker_specs{
  display:grid;
  grid-template-columns: 1fr ;
  grid-template-rows: repeat(50, 1fr 2fr);
}

.grid-item{
  color: var(--base-color);
}

.spec_name{
  font-size: var(--spec_name-font-size);
  font-family: 'freesans';
}

.spec_value{
  font-size: var(--spec_value-font-size);
  padding-bottom: 3%;
  white-space:nowrap;
}


.phase{
  display:none;
}


.phase:not(#worker_specs){
  padding-top: 100%;
  text-align: center;
}

.narrative_phase_text{
  font-size: var(--spec_value-font-size);
}
#hit_id{
	font-size: 190%;
	position: relative;
	top: 5px;
}
*/

.columns{
	display: flex;
	flex-direction: row;
	
}

.columns .column{
	flex-grow: 1;
}