@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.icon {font-weight:normal}
a.iconlink
a.iconlink:visited,
a.iconlink:active,
a.iconlink:link,
a.iconlink:hover
 {text-decoration:none}


a, a:visited, a:active, a:link {color:inherit}
a:hover {color:#FFA366}

.page {display:inline-block;background-size:contain;vertical-align:bottom;position:relative}
.page#p1 {border-right:1px solid black}
.page#p2 {background-image:url('/img/pages/cover.jpg')}
body {background-color:#C6E8F7;font-family: "Open Sans", sans-serif;}
body {margin:10px;margin-bottom:30px;margin-top:30px}

.sticker {display:inline-block;background-size:975px 825px;width:195px;height:165px}
.sticker.sheet0 {background-image:url("/img/sticker-sheet0-quarter.jpg");}
.sticker.sheet1 {background-image:url("/img/sticker-sheet1-quarter.jpg");}
.sticker.sheet2 {background-image:url("/img/sticker-sheet2-quarter.jpg");}
.sticker.sheet3 {background-image:url("/img/sticker-sheet3-quarter.jpg");}
.sticker.sheet4 {background-image:url("/img/sticker-sheet4-quarter.jpg");}
.sticker.sheet5 {background-image:url("/img/sticker-sheet5-quarter.jpg");}
.padtop {margin-top:3px}
img.sticker.new {box-shadow: 0 0 20px gold;}
div.sticker.duplicate {margin-left:-180px;}
.tc {display:inline-block}
.tc, div.sticker.shadow {box-shadow: -2px 0px 3px black;}
div.tc.duplicate {margin-left:-120px;}

img.zoomg {width:95%;max-width:650px;height:550px;object-fit:none;object-position:-10400px -7500px}
div.zoomg {width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(120,120,120,0.8);text-align:center;padding-top:100px;display:none}

.personname, .medtitle, .smalltitle {text-align:center;font-family: 'Raleway',sans-serif;font-weight:500}
.personname {font-size:120%;font-weight:500;margin-bottom:5px}
.medtitle {font-size:120%;font-weight:500;margin-bottom:5px}
.smalltitle {font-size:110%;font-weight:500;margin-bottom:3px}

.nav {position:absolute;bottom:10px;font-family:'Raleway',sans-serif;font-weight:500}
.nav.left {left:10px}
.nav.right {right:10px}

.legend {border-radius:15px;padding:10px;display:inline-block;margin:10px;width:200px}

.notifybg {width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(120,120,120,0.8);text-align:center;padding-top:20px}
.notify {background-color:white; width:95%; max-width:900px;margin-left:auto;margin-right:auto;padding:10px;font-family: 'Open Sans',sans-serif;border-radius:15px;max-height:100%;overflow:scroll}
.notify p {text-align:justify}
.footnotify {position:absolute;bottom:30px;right:20px;background-color:white;padding:5px;font-family: 'Raleway',sans-serif;font-weight:500;font-size:8px}

.swapgroup, .stickernew {text-align:center;font-size:12px;display:inline-block;font-weight:500}

.stat {font-family: 'Raleway',sans-serif;text-align:left;font-weight:500}

.swapgroup {padding:5px;padding-top:15px}

.stickercollection {background-color:white; left:0;right:0;padding:10px;font-family: 'Open Sans',sans-serif;border-radius:15px;margin:auto;margin-bottom:30px;max-width:900px;width:95%}
.stickercollection.full-width {max-width:95%}
.stickercollection p {text-align:justify;text-indent:10px}

.url {font-family:'Indie Flower',cursive}

.notificationbox {border: 12px double red;margin:10px;padding:10px;}

.swapme {display:inline-block;vertical-align:top;text-align:center}
.swapme .ul {border-bottom:2px solid black;font-size:120%}

.need {font-weight:500;color:#FFA366}
.got {font-size:80%}

.stat.topspace {margin-top:20px}
.stat.bottomline {padding-bottom:40px;border-bottom:3px dashed grey}

a.removelink:hover{text-decoration-line: line-through;
text-decoration-color: #FF0000;
text-decoration-style: wavy;}

.infosym {display:inline-block;border:2px solid black;width:20px;height:20px;border-radius:20px;line-height:20px;margin-right:3px;margin-left:3px;text-align:center}
a:hover .infosym {border:2px solid #FFA366}

table.shop td {padding:4px;font-size:14pt;padding-left:10px;padding-right:10px}
table.shop.centr td {text-align:center}

.toplinks {
    text-align:center;margin-top:50px;margin-bottom:50px;
}
.toplinks a {
    width:150px;font-family: 'Raleway',sans-serif;font-weight:500;
    border:4px solid black;border-radius:15px;padding:10px;margin:10px;
    text-decoration:none;font-size:120%;
    -o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;
    -webkit-transition:.5s;transition:.5s
}
.toplinks a:not(.current) {
    background:transparent;
}
.toplinks a.current {
    background-color:white;
}
.toplinks a:hover {
    color:black;
}
.toplinks a:not(.current):hover {
    background-color:white;
    color:black;
    border:4px solid red;
}

canvas#stickerbookpages {
    max-width:90vw;
    max-height:90vh;
}

.emptycard {
    display:inline-block;border:2px dashed black;width:150px;height:200px;margin:10px;vertical-align:middle;
}
a.tradingcard {
    display:inline-block; margin:10px; vertical-align:middle;
}
.tc {
    width:150px;height:200px;
    background-image:url("/img/trading-cards-small.jpg");
    background-size:1050px 400px;
}
.tc.equipped {
    filter: brightness(35%);
}
.unknown-card {
    width:150px;height:200px;background-color:#EEEEEE;display:inline-block;line-height:200px;color:#BBBBBB;font-size:200%;vertical-align:middle;margin:10px
}
.shop-container {
    width:95%;max-width:500px;display:inline-block;margin-left:10px;margin-right:10px;margin-bottom:40px;vertical-align:top
}

.swaps {display:inline-block;vertical-align:top;border:2px solid grey;text-align:left;direction:ltr}
.swapscontainer {text-align:center;direction:rtl}

@media (min-width:750px){
    .toplinks a {
        display:inline-block;
    }
    a#show-menu {
        display:none;
    }
    .swaps {width:43vw;padding:0.5vw;margin:0.5vw}
} /* @media (min-width:750px) */


@media (max-width:750px){
    .toplinks a {
        display:none;
    }
    a#show-menu {
        display:inline-block;
    }
    .swaps {padding:10px;margin:10px}
} /* @media (max-width:750px) */

a#hide-menu {
    display:none;
}