/* canvas.css */
@layer components{.canvas{height:calc(100vh - 100px);width:100vw;position:relative;z-index:1;.slide{position:absolute;visibility:hidden;pointer-events:none;inset:0;&.active{visibility:visible;pointer-events:auto;}}}}
/* footernavi.css */
@layer components{.footernavi{height:100px;display:flex;width:100%;padding-inline:20px;gap:2px;background:white;box-shadow:0 0 20px rgba(0,0,0,0.5);position:relative;z-index:2;background:#333;button{background:#333;display:block;width:100%;flex:1;color:white;display:flex;text-align:left;align-items:flex-start;justify-content:flex-start;font-size:2.2vw;padding:10px 12px;text-shadow:1px 1px 1px rgba(0,0,0,0.8);position:relative;transition:all 0.07s;&::before{content:"";position:absolute;top:0;left:-2px;width:100%;bottom:0;background:var(--green);z-index:-1;transition:all 0.07s;border-left:2px solid white;border-right:2px solid white;border-top:2px solid white;}&.active,&:focus,&:active{&::before{top:-10px;box-shadow:0 0 20px rgba(0,0,0,0.5);border-top-left-radius:3px;border-top-right-radius:3px;}background:var(--green);text-shadow:none;}}}}
/* map.css */
@layer components{.map{width:100%;height:100%;.walklabel{}}}
/* terminals.css */
@layer components{.terminals{display:flex;align-items:center;justify-content:center;gap:1rem;margin:2rem 0;& > *{text-align:center;width:120px;flex:1;background:url(../img/stele.svg) no-repeat center 10px;background-size:50px;height:180px;padding-top:120px;border-radius:5px;&:focus,&:hover{outline:2px solid white;}}}}
/* welcome.css */
@layer components{.welcome{justify-content:center;align-items:center;&.active{display:flex !important;}}}