*,*:before,*:after{box-sizing:border-box;}
body{
margin:0;
padding:0;
font-family:'avant garde', avantgarde, 'century gothic', centurygothic, 'applegothic', sans-serif, arial;
color: #fff;
background-color: #000;
/*background:linear-gradient(#222,#111 30%,#000 100%);border:0px solid lime;background-attachment:fixed;min-height:100vh;*/}

.ghst{
width:100%;
height:2px;
/*background-color:transparent;*/
visibility:visible;
outline:0px solid blue;}

#cntr{position:relative; /* for ghosts */}

.bxs{display:contents;outline:0px solid orchid;}

.btn1{position:fixed;left:30px;top:0;z-index:999;}
.btn2{position:fixed;left:30px;top:30px;z-index:999;}



header {outline:0px solid blue;}
header * {outline:0px solid red;}

header {
  width: 100%;
  text-align: center;
}

header .hwrp {
  display: inline-block;
  text-align: center;
  line-height: 1.2;
  margin-top: 0px;
}

header .hwrp span {
  font-size: clamp(0.4rem, calc(0.7vw + 1rem), 2.0rem);
  font-weight: normal;
  vertical-align: middle;
  margin-right: 10px;
}

header .hwrp h1 {
  display: inline;
  margin: 0;
  font-size: clamp(1.2rem, calc(2.2vw + 1rem), 3.2rem);
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}



footer{
position: relative;
color:white;
text-align:center;
padding:10px 20px;
}

.art{
display:flex;
max-width:100%;
/* fade */
opacity:0;
visibility:hidden;
/*transform:translateY(10px);*/
transition:opacity 1.0s ease; /*, transform 0.5s ease;*/
outline:0px solid red;}

.art.fade{
opacity:1;
visibility:visible;
/*transform:translateY(0);}*/}

/*.itm1{outline:1px solid cyan;}*/
.itm1{flex:0 0 auto;width:100%;margin:0px;padding:0px;outline:1px solid cyan;}
    

.btn1{display:none;position:fixed;left:30px;top:0;z-index:999;}
.btn2{display:none;position:fixed;left:30px;top:30px;z-index:999;}
pre{display:block;position:fixed;margin:0;padding-bottom:4px;z-index:999;}