@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
body::before{
        content:"";
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        z-index: -1;
        position:absolute;
        background:transparent;
}
body{color:#112;
        background-color:#a5a4aa;
        background-image:url("/img/tribg.png?v2");
        background-attachment:fixed;
        background-size:cover;
        font-family:'Quicksand',Verdana,sans-serif;
        margin:0px;margin-top:16px}

h1{text-align:center}
li{list-style-type:none;margin-left:-40px}

#hamburger{position:fixed;opacity:0;left:-400px;top:0px;width:400px;height:100%;background-color:rgba(50,50,50,0.7);z-index:1001;transition:0.4s ease}
#hamburger a{text-decoration:none;color:#DDD;text-shadow:1px 1px #0002;font-size:22px;line-height:2.5;transition:0.3s ease;width:100%;display:inline-block;text-align:center}
#hamburger a:hover{background-color:rgba(0,0,0,0.4)}
.special {font-weight:600;color:#FFF!important;text-shadow:1px 1px #222!important;background: linear-gradient(50deg, #df3e3e, #dfdc3e, #3fdf3e, #3eacdf, #7a3edf, #df3e7d, #df3e3e, #dfdc3e, #3fdf3e, #3eacdf);
background-size: 550% 1000%; animation: r 4s linear infinite; transition: 0.4s ease; border-radius:10px}
.special:hover {background: linear-gradient(50deg, #df3e3e80, #dfdc3e80, #3fdf3e80, #3eacdf80, #7a3edf80, #df3e7d80, #df3e3e80, #dfdc3e80, #3fdf3e80, #3eacdf80);
background-size: 550% 1000%; animation: r 4s linear infinite}
#hb_button{display:inline;left:0px;top:0px;position:fixed;z-index:1002}
#hb_top{height:65px}
#hb_cb{display:block;width:56px;height:56px;position:absolute;cursor:pointer;opacity:0;z-index:1004}
#hb_b {position:fixed;z-index:1002;height:56px;width:56px;transition:0.4s ease}
#hb_b span{display:block;width:32px;height:4px;margin-left:14px;margin-bottom:5px;position:relative;background:#000;border-radius:3px;transition:0.4s ease}
#hb_cb:checked ~ #hamburger{left:0px;opacity:1}
#hb_cb:hover ~ #hb_b span:nth-last-child(2){transform:scale(0.9,1)}
#hb_cb:hover ~ #hb_b span{background-color:#000}
#hb_cb:checked:hover ~ #hb_b span{background-color:#000}
#hb_cb:checked ~ #hb_b span{background-color:#000;width:34px}
#hb_cb:checked ~ #hb_b span:nth-last-child(2){opacity:0;transform:translate(-5px,0px)}
#hb_cb:checked ~ #hb_b span:nth-last-child(1){transform:rotate(135deg) translate(-31px,-8px)}
#hb_cb:checked ~ #hb_b span:nth-last-child(3){transform:rotate(-135deg) translate(-34px, 1px)}

#fn{transition:0.2s ease 0s;transform:translate(0px,18px)}
#fn, #fn_tt{position:fixed;bottom:1px;color:#423c38;font-size:11px;font-family:courier,monospace;margin:5px}
#fn:hover{transform:translate(0px, 3px);transition-delay:0.5s}
#fn a {color:#423c38;font-size:11px;line-height:1}


#top img{background:linear-gradient(110deg,#dde,#eee2);border-radius:50%}
#top img:hover{animation:jiggle 0.5s ease-in-out;}
@keyframes jiggle{40%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}100%{transform:rotate(0deg)}}
#center a{color:#0099FF}
#center a:visited{color:#AA55DD}
#center {background-image:url(/img/banner.webp);background-repeat:no-repeat;background-size:contain}
#items{width:100%;display:flex;justify-content:center;align-items:center;outline:1px solid transparent;transition: 0.1s ease}
#items:hover{outline:1px solid #09F3;filter:brightness(99%)}

.ftext{padding:50px;padding-top:0px;line-height:1.5;letter-spacing:-0.7px;font-size:17.5px}
.pageitem{box-shadow:0px 0px 8px rgba(0,0,0,0.4);border-radius:8px;background-color:#EEE;position:relative;width:50%;max-width:400px;max-height:280px;margin:10px;float:left;text-align:center}
.pageitem:hover .itemtext{color:rgba(0,0,0,0.6);background-color:rgba(255,255,255,0.4)}
.itemtext{font-weight:900;color:rgba(0,0,0,0);border-radius:8px;position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;transition:0.4s ease;background-color:rgba(255,255,255,0);font-size:40px}
.itemlink{outline:none}
.itemimg{border-radius:8px;width:400px;height:280px;object-fit:cover}
.idesc{width:50%;margin:10px}
@media screen and (max-width: 1300px) {
    .pageitem{width:29vw}
    .itemtext{font-size:0px}
    .itemimg{width:100%}
}

.imgmid{max-width:70%;display:block;margin-left:auto;margin-right:auto;border-radius:6px;border:1px solid #025;transition:0.2s ease}
.imgmid:hover{border:1px solid #09F}

.pageicon{box-shadow:0px 0px 8px rgba(0,0,0,0.4);border-radius:4px;background-color:#6d6662;position:relative;width:100px;height:80px;margin:5px 20px 5px 20px;float:left;text-align:center}
.pageicon:hover .icon_text{color:rgba(0,0,0,0.6);background-color:rgba(255,255,255,0.4)}
.icon_text{font-weight:900;color:rgba(0,0,0,0);border-radius:4px;position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;transition:0.4s ease;background-color:rgba(255,255,255,0);font-size:20px}
.icon_link{outline:none}
.icon_img{border-radius:4px;width:100px;height:80px;object-fit:cover;background-color:#fff}

.email{display:inline}
.mp{color:#aaa;display:inline;position:absolute;font-family:courier,monospace;margin-top:3px;font-size:17}
.noselect{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none}

.separator{text-align:center;font-weight:900}

#hb_b span{transition: all 0.4s ease, background-color 0s ease}
#hb_cb:hover ~ #hb_b span{background: linear-gradient(200deg, #3e3edf, #3edcdf, #3f8edf, #3eacdf, #3e7adf, #3e7ddc, #3e3edf, #3edcdf, #3f8edf, #3eacdf);
background-size: 1000% 1000%; animation: r 10s linear infinite;}
@keyframes r {0%{background-position:0% 50%}100%{background-position:100% 50%}}

table{font-size:18;border-collapse:separate;border-spacing:0px 0px;width:100%}
.trheader{font-weight:800;background-color:#aad}
td,th{border-bottom:1px solid #ddd;padding:8px}
tr{transition:0.1s ease}
tr:nth-child(even){background-color: #f2f2f2}
tr:hover:not(.trheader):not(.tnoselect) {background-color: #ddd}
.tnoselect{background-color: #eee}

h3{line-height:normal;letter-spacing:normal;margin-bottom:10px}