:root{--bg:#444;--col1: white;--btnbg:#404040;--kieg:darkolivegreen;}
* {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #444;display:flex;justify-content: center;align-items:center;flex-wrap:wrap;flex-direction: column;font-size:16px;}

body{
opacity: 1;
background-image: linear-gradient(-45deg, var(--bg), var(--bg) 50%, var(--btnbg) 50%, var(--btnbg));
background-size: 8px 8px;}

p,a,a:target,a:visited,.infotext a.close,h1 {color: white;}
p{padding-bottom:0.5rem;}
a{text-decoration:none;}
h2{padding-bottom: 1.7rem;}
.infotext p,.infotext a{color: black;}
a.fslink {color:olivedrab;}
hr {margin: 0.5rem auto;}
img.fuzfa {max-height: 40vh;margin-top: 3vh;}

/* -----------------------------*/

.screen {display:flex;justify-content: space-between;align-items:center;flex-direction:column;height:100vh;max-height:100vh;max-width:300px;}
#main {text-align:center;}
.info {align-self:flex-end;padding:2px 10px;font-size:20px;color:var(--col1);border:2px solid;border-radius: 50%;margin-top: 3vh;font-family: serif;}

/* -----------------------------*/

.btns {display:flex;margin-bottom:10vh;}
.btn {display: flex;align-items: center;justify-content: center;border: 2px solid #bbb;margin: 20px 10px;flex:1;border-radius:12px;background:var(--btnbg);}
/*.btn:hover {background:var(--kieg);}*/
.btn:hover {border-width: 4px;margin: 18px 8px;}
.btn a {flex: 1;padding: 10px 20px;}

/* -----------------------------*/

.infotext,.fampics {position: fixed;top: 0;right: 0;bottom: 0;left:0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;pointer-events: none;}
.infotext:target,.infotext:target,.fampics:target {opacity:1;pointer-events: auto;}
.infotext .close,.fampics .close {padding: 10px;background: var(--btnbg);border-radius: 25px;text-align: center;align-self: flex-end;
    position: absolute;
    right: -15px;
    top: -20px;
    padding: 8px 15px;
    background: gray;}

.infotext > div {min-width: 270px;max-width: 60%;position:relative;margin: 10vh auto;border-radius: 1vh;
    background: white;height:80vh;display:flex; flex-direction:column;justify-content:space-between;}
.infotext > div > div {overflow:scroll;height:100%;text-align:justify;padding: 3%;}
/*.infotext .close {align-self: flex-end;}*/
.infotext.note .close {    position: static;
    top: unset;
    right: unset;
    padding: 8px 12px;}
.noteclose {text-align: right;
    margin: 5%;}

.close  {font-size:120%;}
.fampics > div {position: relative;margin: 5vh auto;border-radius: 1vh;max-height: 90vh;display: flex;flex-direction: column;}
.fampics > div > div {overflow: scroll;height: 100%;display: flex;align-self: center;margin: 5px;border-radius: 1vh;
    width: 90%;max-width: fit-content; background: var(--bg);}
.fampics img {width: 521px;height:492px;}
.fampics .close {position:relative; align-self: center;}

.close:hover {background: var(--kieg);}
.info:hover {background: var(--kieg);}

.fslink path{fill:none;stroke:var(--kieg);stroke-width:1.267;stroke-miterlimit:10;}
.fslink {display:flex;align-items: center;justify-content:center;}
.fslink svg {width:30px;height:20px;}