@import url('https://fonts.googleapis.com/css2?family=Great+Vibes:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&display=swap');
:root {
    --bg: #C7AFB0;
    --fgbold: #745;
    --imgsize: 256px;
    --backdrop: rgba(187,187,187,0.9);
}
body {
    font-family: "Faculty Glyphic";
}
header {
    font-family: "Faculty Glyphic";
}
header p {font-size: 80%;}
body.hidedescription .description {
    display:none;
}
body.hideupdate .updated {
    display: none;
}
body.hidemap {
    & .map {
	display:none;
    }
    & section {
	min-height:auto;
    }
    & br {
	display: none;
    }
}
#kiosk {display:none;}
body.kiosk #nokiosk {display:none;}
body.kiosk #kiosk {display:inline;}
#togglemaps:before{content:"Hide";}
body.hidemap #togglemaps:before {content:"Show";}
#toggleupdate:before{content:"Hide";}
body.hideupdate #toggleupdate:before {content:"Show";}
#toggledescription:before{content:"Hide";}
body.hidedescription #toggledescription:before {content:"Show";}
	

header {
    background-color: var(--backdrop);
    max-width:min(85vw,800px);
}
main {
    width:min(85vw,800px);
    background-color:var(--backdrop);
    padding-top:5px;
    padding-bottom: 5px;
}

body {
    background-image: url("img/Animated6.png");
    background-size: 200px;
    background-repeat: repeat;
    background-color: var(--backdrop);
    font-family: "Faculty-Glyphic";
    font-size: 20px;
    margin-left: 2ex;
}
table {
    border: 1px solid var(--fgbold);
}
tr.region {
    width: 100%;
    background-color: var(--bg);
    column-span: all;
}
h2 {
    font-size:1.2em;
    width: 100%;
    color:#745;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-top-style:solid;
    border-top-width:1px;
    text-align:center;
    padding-top:3px;
    background-color: var(--bg);
}
span.description {
    display:block;
    font-size:70%;
    font-style:italic;
    color:black;
    text-overflow:ellipsis;
    wrap:word;
    max-width:100%;
    overflow:hidden;
    white-space:pre-line;
}
td.name {
    font-size:100%;
    color:maroon;
}
td.owner {
    font-size:80%;
    color:#040;
    padding:0ex 3ex;
    text-align: center;
}
span.updated {
    font-size:50%;
    padding:0px 5px;
    display:block;
    text-align: center;
}
span.updated.expiring {color: red;}
a:link, a:visited {color: rgb(120, 0, 2);}
a:hover {color: #040;}
td {
    border-bottom-style:solid;border-bottom-width:1px;
    text-wrap: balance;
}
h1 {
    font-size:3rem;
    text-align:center;
    margin: 0;
    padding-block: 3px;
    font-family: "Great Vibes";
}
table {
    border-collapse: collapse;
    background-color:#ddd;
    table-layout: fixed;
    margin-right:2ex;
    margin-left:2ex;
    margin-bottom:2ex;
}
section {
    clear:right;
    min-height: var(--imgsize);
}
.map {
    float:right;
    margin: 5px;
    width: var(--imgsize);
    position:relative;
    --digitsize: 1rem;
/*    --max: calc(var(--imgsize) - var(--digitsize));*/
}
.maplabel {
    position:absolute;
    color: black;
    background-color: rgba(255,255,255,0.5);
    font-size:calc(var(--digitsize)*0.75);
    width:var(--digitsize);
    height:var(--digitsize);
    text-align: center;
    clip-path: circle(50%);
	 
}
.maplabel.hilabel {
    background-color: gold;
    z-index:3;
}
td.name.hilabel {
    background-color: gold;
}
.counter {
    vertical-align:top;
}

/*OLD STUFF*/
p {margin-top: 0.2em; margin-bottom: 0.075em;}
td.sim {font-size:100%;color:#745;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px;text-align:center;padding-top:3px;background-color:#C7AFB0;}
.button {font-size:70%;margin-left:3ex;margin-right:3ex;float:right;text-decoration:underline;color:green}
.showdesc span {display:inline-block}
.hidedesc span {display:none}
.expand {display:none;}

.logo {
    float: left;
    padding: 5px;
    height: 100px;
    >img {height:100px;}
}
header>.text {
    text-align:justify;
    margin-right:2ex
}
@media screen and (max-width:575px){
    body {
	margin: 0;
    }
    header,main {
	width: 100vw;
	margin: 0px;
	max-width: none;
    }
    section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
    }
    .map {
	float:none;
    }
}