main.css

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6,article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,svg,embed,iframe,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}b{font-weight:600;font-size:1.01em}i{font-style:italic}@font-face{font-family:'notosans';font-style:normal;font-weight:400;src:local('Noto Sans'),local('NotoSans'),url('https://static.artificialmuseum.com/font/notosans-400-normal.woff2') format('woff2')}@font-face{font-family:'notosans';font-style:normal;font-weight:700;src:local('Noto Sans Black'),local('NotoSans-Black'),url('https://static.artificialmuseum.com/font/notosans-700-normal.woff2') format('woff2')}@font-face{font-family:'notosans';font-style:italic;font-weight:400;src:local('Noto Sans Italic'),local('NotoSans-Italic'),url('https://static.artificialmuseum.com/font/notosans-400-italic.woff2') format('woff2')}*{box-sizing:border-box;scrollbar-color:#0c0c0c #fafafa;scrollbar-width:thin}.visible{display:inherit !important}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#fafafa}::-webkit-scrollbar-thumb{background-color:#0c0c0c;border-radius:20px}body{background-color:#fafafa;color:#0c0c0c;font-family:notosans,ubuntu,"Segoe UI",roboto,"Lucida Grande","Helvetica Neue",helvetica,arial,sans-serif
;font-size:15px;line-height:1.2;margin:0;min-height:100vh;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:none;padding:0 15px;position:absolute;width:100%}h1{font-size:1.5em}h2{font-size:2em}h3{font-size:1.2em}h4{font-size:1.1em}h1,h2,h3,h4,h5{margin:1em 0 0.5em}p{margin:0 0 1em}a{color:#000}a.no-style{text-decoration:none}nav{line-height:1em}nav ul{color:#333;display:inline-block;list-style:none;margin:0;padding:0}nav ul .active,nav ul a.active{-webkit-text-decoration:underline 2px;text-decoration:underline 2px}nav li{cursor:pointer;float:left;margin:0 1em 0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}nav li:last-child{margin:0}.nav.menu.toggle.list{text-decoration:none}.nav.menu.toggle.list span:last-child{color:#666}.nav.menu.toggle.list.exit span:first-child{color:#666}.nav.menu.toggle.list.exit span:last-child{color:#0c0c0c}canvas{display:block;left:0;position:fixed;top:0}header.main,footer.main{background-color:#fafafa;display:inline-block;margin:0;width:100%}header.main nav a,header.main nav span,footer.main nav a,footer.main nav span{font-size:14px}header.main nav.right,footer.main nav.right{float:right}header.main nav.left,footer.main nav.left{float:left}header.main a,footer.main a{text-decoration:none}.nav{cursor:pointer}#show-artifact{color:white;background-color:black;margin:1em 0}header.main{font-size:18px;padding:7px 0 3px;top:0}header.main nav{font-size:16px}header.main .logo{display:inline-block}header.main .logo span{cursor:pointer;float:left;line-height:1;margin:-1px 3px 0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}header.main .logo span.logo{font-size:18px;font-weight:900}header.main .logo svg{cursor:pointer;float:left;height:17px}header.main .logo ul{background:#fafafa;height:0;overflow:hidden;padding:0 0.5em;position:absolute;top:1.5em}header.main .logo ul li{margin:0.8em 0.5em 0.5em 0}header.main .logo:hover ul,header.main .logo:active ul,header.main .logo.visible ul{height:auto}footer.main{bottom:0;padding:10px 15px}footer.main nav li{font-size:0.9em}.friendListItem img{margin:0 1em 1em 0}.exitScreenButton{height:26px;position:fixed;right:15px;top:60px;width:26px}.arrow{display:block;position:absolute;right:0;top:25px;width:15px}.arrow.up{display:none}.screen-visible .screen.visible{display:block}.screen-visible .screen.visible .detail.visible .arrow.up{display:block}.screen-visible .screen.visible .detail.visible .arrow.down{display:none}.screen-visible .screen.visible .sub{margin:15px 0 0;overflow-y:scroll;width:100%}.screen-visible .screen.visible.list,.screen-visible .screen.visible.help{border-top:1px solid #e0e0e0}.screen-visible .screen.visible.list nav,.screen-visible .screen.visible.help nav{display:inline-block;margin:15px 0;width:100%}.screen-visible .screen.visible.list nav ul,.screen-visible .screen.visible.help nav ul{display:inline-block;float:right}#map-container{height:calc(100% - 40px);outline:none;position:fixed;top:30px;width:calc(100vw - 30px)}.content{display:inline-block;position:relative;top:60px;width:100%}.VideoEmbed{height:0;overflow:hidden;padding-bottom:calc(56.25% - 1px);position:relative}.VideoEmbed iframe{height:100%;left:0;position:absolute;top:0;width:100%}.Partners img{max-height:62px;width:auto}button,.button{background:#000000;border:0 none;cursor:pointer;padding:2px;color:#fafafa;font-family:notosans,ubuntu,"Segoe UI",roboto,"Lucida Grande","Helvetica Neue",helvetica,arial,sans-serif
;letter-spacing:1px;outline:none;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}button.styled,.button.styled{background:#0c0c0c;border-radius:2em;box-shadow:5px 0 10px #e0e0e0 -5px 0 10px #fff;display:block;font-size:1em;margin:0 auto;padding:0.8em}button.styled.margin,.button.styled.margin{margin:1em auto 0}button.inline,.button.inline{display:inline-block}button.inverse,.button.inverse{background:#fafafa;box-shadow:none;color:#0c0c0c}button:disabled{background:#555;color:#0c0c0c;cursor:not-allowed}.phase-1-link{text-align:center}.backToTop{height:auto;margin:4em auto 1em;width:26px}.rotate{animation:rotation 5s;animation-iteration-count:infinite;animation-timing-function:linear;transform-origin:50% 50%}@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}#Locator{bottom:0;color:#fafafa;display:none;font-size:1.5em;left:auto;padding:5px;position:fixed;right:0;top:auto;z-index:5000}#Locator div,#Locator a{color:#fafafa;float:left}#LocatorButton{background-color:#0c0c0c;border-bottom-left-radius:0.5em;border-top-left-radius:0.5em;border-top-right-radius:0.5em;float:left;font-size:1.2em;padding:0.3em 0.3em 0}#LocatorInactive,#LocatorCloseToCity,#LocatorActive,#LocatorTimeout{background-color:#0c0c0c;display:none;margin:0;position:relative;padding:0 0.5em 0.1em 0.2em;top:0.54em}.warning{background-color:rgba(0,0,0,0.8);color:#fafafa;display:none;left:15px;position:fixed;text-align:center;top:36px;width:calc(100vw - 30px);z-index:2001}.warning .container{margin:0 auto;max-width:400px;padding:15px}.warning .container button{margin:1em auto}.warning svg{width:50px;height:50px}.warning .w{display:none}.warning .cancel-button{cursor:pointer;position:absolute;right:15px;top:15px}#timeout-warning-webgl-disabled{display:none}#timeout-warning-info,#timeout-warning-confirm,#timeout-warning-header,#timeout-warning-header-done{display:none}.popup{background-color:rgba(0,0,0,0.8);color:#fafafa;display:none;left:15px;position:fixed;text-align:center;width:calc(100vw - 30px);top:36px;z-index:4000}.popup .container{margin:0 auto;max-width:400px;padding:15px}.popup .cancel-button{cursor:pointer;position:absolute;right:15px;top:15px}body.three-running{overflow:hidden}#three-container{display:none}#three-canvas{background-color:#000;outline:none;z-index:10000}#hud{color:#fafafa;display:none;position:relative;top:0;left:0;text-align:center}#hud #hud-menu{display:none}#hud #hud-menu-sub{display:none}#hud #hud-menu-record-video{display:none}#hud .w{background-color:rgba(0,0,0,0.4);height:auto;left:50vw;max-width:90vw;opacity:0;padding:20px 70px;position:fixed;top:50vh;transform:translate(-50%,-50%);transition:opacity 500ms,visibility 500ms;visibility:hidden}#hud .w.visible{opacity:1;transition:opacity 500ms,visibility 500ms;visibility:visible}#hud-exit-button{border:0 none;background:transparent;cursor:pointer;left:auto;margin:0;padding:0;position:fixed;right:10px;top:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:40px}#hud-exit-button:focus{background:transparent}#three-video{width:0;height:0;left:0;top:0;position:absolute;overflow:hidden}#toggle-animation-button{width:66px;height:48px;position:fixed;left:1em;bottom:1em;display:none}#toggle-animation-button .visible{display:block}#toggle-animation-button svg{position:absolute;max-height:100%;max-width:100%}#toggle-animation-button .pause{display:none}#toggle-animation-button.play .play{display:none}#toggle-animation-button.play .pause{display:block}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg,.leaflet-tile-pane{z-index:200}.leaflet-pane,.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-zoom-box{z-index:800}.leaflet-control{z-index:800}.screen{z-index:999}.leaflet-top,.leaflet-bottom,header.main,footer.main{z-index:1000}#onboardings{z-index:3000}#hud,#hud .w,#hud-exit-button{z-index:11000}@media screen and (min-width:400px){.screen[data-name="about"].visible .team li{max-width:47%;float:left;margin:0 2.99% 0 0}.screen[data-name="about"].visible .team li:nth-child(2n){margin:0 0 0 2.99%}.screen[data-name="about"].visible .manifest.questions span{display:block}}@media screen and(maxHeight:500px) and(orientation:landscape){#map-container{font-size:0.8em}}@media screen and (min-width:500px){body{font-size:14px}.screen.list .location .artifact picture,.screen.list .artist .artifact picture{width:50%;float:right}.screen.list .location .artifact .info,.screen.list .artist .artifact .info{width:45%}.screen[data-name="help"].visible .sub{font-size:inherit}.screen[data-name="about"].visible .team{margin:0 0 5em}.screen[data-name="about"].visible .mission .manifest{width:80%}.screen[data-name="about"].visible .support img{width:auto;height:70px}}@media screen and (min-width:800px){body{font-size:16px}.screen-visible:not(.about) #map-container{width:calc(100vw - 520px)}.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) #toofar-warning,.screen-visible:not(.about) .popup{width:calc(100vw - 515px)}.screen.visible{left:auto;right:0;width:500px}.screen[data-name="list"] .detail .button.close{display:none}.screen[data-name="about"].visible{font-size:20px}.screen[data-name="about"].visible .content{margin:120px auto 0;padding:0 50px}.screen[data-name="about"].visible .artist-list{font-size:1.5em}.screen[data-name="about"].visible .mission > div,.screen[data-name="about"].visible .mission .challenge{margin:120px 0 0}.screen[data-name="about"].visible .mission .solution{display:inline-block}.screen[data-name="about"].visible .mission .solution .explained{width:55%;float:left;margin:0}.screen[data-name="about"].visible .mission .solution picture{float:right;width:35%;margin:0}.screen[data-name="about"].visible .mission .solution picture img{margin:0}.screen[data-name="about"].visible .mission .manifest{margin:0 auto;max-width:1200px;width:70%}.screen[data-name="about"].visible .mission .manifest.questions{margin:1em auto}.screen[data-name="about"].visible .mission .challenge picture{max-width:40%;float:left;height:auto}.screen[data-name="about"].visible .mission .challenge picture img{width:100%;height:auto}.screen[data-name="about"].visible .mission .challenge .postulate{float:right;max-width:55%;margin:0}.screen[data-name="about"].visible .team li{width:31%}.screen[data-name="about"].visible footer{background:linear-gradient(#fafafa 0,#0c0c0c 420px);padding:70px 0 50px;font-size:18px}.screen[data-name="about"].visible footer svg.logo{right:50px}}@media screen and (min-width:1200px){.screen.visible{width:600px}.screen-visible:not(.about) #map-container{width:calc(100vw - 620px)}.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) .popup{width:calc(100vw - 615px)}.screen[data-name="about"].visible{font-size:30px}.screen[data-name="about"].visible .cities ul li{font-size:2em}.screen[data-name="about"].visible .mission .manifest{font-size:2em}.screen[data-name="about"].visible .mission .solution .explained,.screen[data-name="about"].visible .mission .challenge .postulate{width:50%}.screen[data-name="about"].visible .mission .solution picture,.screen[data-name="about"].visible .mission .challenge picture{width:45%}.screen[data-name="about"].visible .featured-artist .artists{font-size:1.5em}.screen[data-name="about"].visible .featured-artist .artists .artifact-name{font-size:1.2em}.screen[data-name="about"].visible footer{background:linear-gradient(#fafafa 0,#0c0c0c 470px)}}@media screen and (min-width:1600px){.screen.visible{width:700px}.screen-visible:not(.about) #map-container{width:calc(100vw - 720px)}.screen-visible:not(.about) #timeout-warning,.screen-visible:not(.about) .popup{width:calc(100vw - 720px)}}