103 lines
1.7 KiB
CSS
103 lines
1.7 KiB
CSS
|
@font-face {
|
||
|
|
font-family: 'bebas';
|
||
|
|
src: url('/font/BebasNeue-Regular.ttf');
|
||
|
|
}
|
||
|
|
|
||
|
|
:root{
|
||
|
|
|
||
|
|
--base-font-size: 30px;
|
||
|
|
--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: bebas;
|
||
|
|
font-size: var(--base-font-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credits::before{
|
||
|
|
content:'created by';
|
||
|
|
display:block;
|
||
|
|
font-size: 60%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.country{color: gray;}
|
||
|
|
.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-size: 60%;
|
||
|
|
}
|
||
|
|
#collaborators .credit{
|
||
|
|
margin-right:10px;
|
||
|
|
}
|