furizon_webint/res/boopbox.css

/* Fonts */
@font-face {font-family: 'Alegreya';src: url("font/alegreya-latin-600-normal.woff2") format('woff2');}
@font-face {font-family: 'Nexa Rust Sans'; src: url("font/NexaRustSans-Black.otf");}
@font-face {font-family: 'Ticketing'; src: url("font/ticketing.otf");}
@font-face {font-family: 'Trade Winds'; src: url("font/TradeWinds-Regular.ttf");}

* {margin:0;padding:0;border:0;box-sizing:border-box;}
body {font-family: 'Alegreya', serif;background:#000;color:#fff;overflow:hidden; /*cursor: none;*/}
em {color:#fc0;}
#border {border:red 1px dotted;position:absolute;top:50%;left:50%;transform:translateX(-640px) translateY(-400px);width:1280px;height:800px;z-index:1000;}
#main {position:absolute;top:50%;left:50%;transform:translateX(-640px) translateY(-400px);background:linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ),url('bg.png');background-size:cover;background-repeat:no-repeat;width:1280px;height:800px;border:1px solid #000;overflow:hidden;}
#commands a {color:#fff;display:inline-block;padding:0.2em;margin:0 0.25em;background:#009;font-family:monospace;font-size:2em;line-height:1.2em;}

#debug {font-family:monospace;}

#error {font-family:'Ticketing';font-size:2em;position:absolute;top:50%;left:50%;transform:translateX(-640px) translateY(-400px);background:#333;width:1280px;height:800px;background:rgba(0,0,0,0.75);z-index:200;box-sizing:border-box;}
#error p {display:block;margin-top:10em;text-align:center;background:#00c;padding:0.5em 0;}

/* Personaggi */
.char {position:absolute;transform:translateX(0px);transition: all 0.3s;z-index:500;}
#wolf {width:400px;left:880px;top:240px;}
#tiger {width:500px;left:-60px;top:90px;}
#wolf[disabled] {transform:translateX(398px);}
#tiger[disabled] {transform:translateX(-440px);}

/* Nfc status in basso a dx */
#nfcstat {background:#090;position:absolute;right:32px;width:320px;top:716px;font-size:1.7em;padding: 8px 16px;text-align:center;border-radius:8px}
#nfcstat[disabled] {background:#a00;}
#nfcstat img {margin-left:0.2em;margin-top:-4px;height:0.9em;display:inline-block;vertical-align:middle; filter: invert(100%);}

.hidden {opacity: 0;}
.welcome-back {transition: all .25s;}

/* Message box */
#msgbox {backdrop-filter: blur(3px);position:absolute;width:1180px;height:190px;background:rgba(0.7,0,0,0.5);padding:26px;left:20px;bottom:20px;border-radius:8px;color:#fff;font-weight:bold;font-size:32px;opacity:1;transition: opacity .3s;z-index:600;}
#msgbox[disabled] {opacity:0;}
#msgbox img {height:60px;display:inline-block;vertical-align:middle; filter: invert(100%)}
#msgbox span {display:block;}

@keyframes touch {from{opacity:0.3;} to{opacity:0.9;}}
#touch {animation-name:touch;animation-duration:0.7s;animation-iteration-count:infinite;animation-direction:alternate;}
#touch[disabled] {display:none;}

/* Events */

#events > p {margin-bottom:1em;}
#events > p > a {display:inline-block;border-radius:16px;padding:0.1em 0.7em;margin-right:0.3em;text-decoration: none;color:#fff;font-size:1.3em;background:rgba(100,0,200,0.2);border:4px solid rgba(0,0,0,0);}
#events > p > a:hover {border:4px solid darkorchid;}

#eventsbox div, #column {backdrop-filter: blur(6px);background:rgba(0,0,0,0.2);border-radius:16px;text-shadow: 0 0 5px rgba(0,0,0,0.5);}

#events {transition: all .25s;position:absolute;left:32px;height:740px;width:870px;top:32px;}

#eventsbox span {float:right;background:#300;border-radius:6px;font-size:0.9em;padding:0.3em 0.5em;}
#eventsbox span[data-location~="Reception"] {background:#613583;}
#eventsbox span[data-location~="Restaurant"] {background:#26a269;}
#eventsbox span[data-location~="Disco"] {background:#e5a50a;}
#eventsbox span[data-location~="Dealers"] {background:#1a5fb4;}
#eventsbox span[data-location~="Tent"] {background:#a51d2d;}
#eventsbox span[data-location~="Stage"] {background:#63452c;}

#eventsbox > div {padding:1em 1em 0.5em 1em;font-size:1.5em;margin-bottom:1em;border-bottom:5px solid;border-radius:8px 8px 0 0;border-image: linear-gradient(to right, darkblue, darkorchid 50%, rgba(0,0,0,0) 50.1%) 1;transition:all 0.5s;}

#eventsbox {height:690px;overflow:auto;overflow:auto;scrollbar-width: none;-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent);}

.eventmeter {box-sizing:border-box;display:inline-block;background:#090;height:4px;width:100%;margin-left:-1em;}

/* Side column and tv */
#tv {position:absolute;background:#000;right:32px;width:320px;height:180px;top:32px;border-radius:16px;}
#column {transition: all .25s;text-align:center;position:absolute;right:32px;width:320px;height:460px;top:230px;padding:1em;}
#column p {font-size:1.3em;}

h1,h2,h3 {font-family: 'Trade Winds';}
h1 {text-align:center;font-size:2em;}

hr {border: 1px solid white;opacity:0.2;width:320px;max-width:60%;margin:0.5em auto;}

@keyframes shake {
	0% { transform: translate(1px, 1px); }
	10% { transform: translate(-1px, -2px); }
	20% { transform: translate(-3px, 0px); }
	30% { transform: translate(3px, 2px); }
	40% { transform: translate(1px, -1px); }
	50% { transform: translate(-1px, 2px); }
	60% { transform: translate(-3px, 1px); }
	70% { transform: translate(3px, 1px); }
	80% { transform: translate(-1px, -1px); }
	90% { transform: translate(1px, 2px); }
	100% { transform: translate(1px, -2px); }
}

.yell {line-height:1.1em;font-size:2.5em;animation: shake 0.5s;animation-iteration-count: infinite; }