@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; }