.panel,.wrapper{position:relative}
.content .info, .content p {text-align:justify}
.contentpwr .info, .contentpwr p {text-align:justify}

body{background:url(https://i.imgur.com/RkzbW5t.png);}

a{text-decoration:none;font-weight:700;color:#ba5757;-webkit-transition:all 1.2s ease-out;-moz-transition:all 1.2s ease-out;-ms-transition:all 1.2s ease-out;-o-transition:all 1.2s ease-out;transition:all 1.2s ease-out}
a:active,a:hover{color:#318B98}

#deetsleft {float: left; text-align: justify; width: 49%;}
#deetsright {float: right; text-align: justify; width: 49%;}
#left {float: left; text-align: justify; width: 33.6%;}
#middle {float: left; text-align: justify; width: 33.5%;}
#right {float: right; text-align: justify; width: 32.8%;}

strs {display: block; border-bottom: 1px solid #222;font-family:'Iceland',monospace;font-size:26px;line-height:1;letter-spacing:-1px;font-style:italic;font-weight:400;text-transform:uppercase;text-shadow:2px 1px 1px #192971;color:#0c6db2;background-color:rgba(16,16,16,.75);box-shadow:1px 1px 2px rgba(0,0,0,.7); padding: 3px;}
ason {margin-left: 8px; color: #b1b0d8; font-family: 'Iceland'; font-style:italic; display: block; padding: 4px; font-size: 20px; line-height: 12px;  text-align: justify; text-shadow: 0 0 1px #333; text-transform: uppercase;} ason a {color:#b1b0d8;}
prize {display: block; border-bottom: 1px solid #222; color: #b1b0d8; font-family: one; font-size: 24px; line-height: 24px; letter-spacing: .5px; text-shadow:  0px 0px 2px #363636; text-transform: uppercase; margin-top: 10px; margin-bottom: 5px;}
cup {display: block; text-indent: 15px; color: #db89f3; text-shadow: 0px 1px 1px #8500b6; font-family: Oswald; font-size: 10px; line-height: 10px; letter-spacing: 1px; margin-bottom: 15px; margin-top: 8px; text-align: justify; text-transform: uppercase;}
gris {font-family:GB, arial narrow, alegreya sans, sans-serif; letter-spacing:1px; display: block; margin-left: 27px;} gris p {color:#cf1b93; padding: 0px; margin:3px 0px;} gris a {font-family: calibri;letter-spacing: .5px; text-align: justify; text-shadow: 0 0 1px #333;line-height:17px;font-size:10px;padding-bottom:2px;text-transform: uppercase;vertical-align:middle;color:#2cdcb3; background-color:rgba(179, 44, 220,0.45);} gris a:hover {color:#ed11a4;cursor:pointer;} gris svg {width: 12px; height: 12px;}
gospel {font-family:GB, arial narrow, alegreya sans, sans-serif;font-size:12px;line-height:16px;letter-spacing:1px;text-indent:6px;color: #b1b0d8;text-shadow:  0px 0px 2px #363636;text-transform:lowercase; display:block; text-align:justify;} gospel a {color:#c400ab !important; text-shadow: 1px 1px 0px #000;}

cup .top {display:none;}
cup:hover .base {display: none;}
cup:hover .top {display: inline;}
cup a {color:inherit; font-weight:inherit;}

fnce {display: block; position: relative; font-family: SD, LD, arial narrow, serif;color:#fff;text-shadow:1 1 1px #555;font-size:42px;line-height:24px;letter-spacing:0px;text-transform: lowercase;-webkit-text-stroke: 0.2px;-ms-text-stroke: 0.2px; margin-bottom: -8px !important; margin-top: 10px; z-index: 99999999999999;}
fnce2 {text-align: right; display: block; position: relative; font-family: SD, LD, arial narrow, serif;color:#fff;text-shadow:1 1 1px #555;font-size:42px;line-height:24px;letter-spacing:0px;text-transform: lowercase;-webkit-text-stroke: 0.2px;-ms-text-stroke: 0.2px; margin-bottom: -8px !important; margin-top: 10px; z-index: 999999999999999;}

.content img {padding:3px; margin:3px 2px 0 0; border-radius: 50px; background-image:url('https://i.imgur.com/VAU5UPC.png'); box-shadow: 0px 0px 1px #AAA; transition:1.5s;}
.contentpwr img {padding:3px;border-radius:5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff;}
.cosmos img {filter: saturate(0.4); padding:3px; margin:3px 2px 0 0; border-radius: 50px; background-image:url('https://i.imgur.com/VAU5UPC.png'); box-shadow: 0px 0px 1px #AAA; transition:1.5s;}
.cosmos img:hover {filter: saturate(2);}

motto {color: #fff; font-family: consolas; font-size: 9px; text-shadow: #888 0px 0px 1px; letter-spacing: .5em; text-transform: uppercase;}

.wrapper{overflow:visible;width:998px;height:380px;margin:12% auto;background:0 0}
.panel{float:left;width:13.2%;height:99%;margin:.5%;background:50% #fff;box-shadow:3px 2px 1px 0 rgba(0,0,0,.3);background-size:auto 100%;cursor:pointer}
.panel-alt,.panel:after{position:absolute;left:0}
.panel:after{content:"";display:none;position:absolute;bottom:15px;left:0;padding:3px 10px;font-family:'Bangers',serif;font-size:22px;letter-spacing:1px;text-shadow:2px 1px 1px #711946;color:#0d9ab3;background-color:rgba(16,16,16,0.75);box-shadow:1px 1px 2px rgba(0,0,0,0.7);z-index:10;}
.panel-open:after,.panel:hover:after{display:block}
.panel-1:after{content:'personne'}
.panel-2:after{content:'belle vie'}
.panel-3:after{content:'provenance'}
.panel-4:after{content:'xsaya-rsa'}
.panel-5:after{content:'sÈvitÈ'}
.panel-6:after{content:'bokor'}
.panel-7:after{content:'intrigues'}
.panel-alt{top:0;width:100%;height:100%;background-size:auto 100%;background-position:50%;opacity:0;-webkit-transition:opacity .7s linear;-moz-transition:opacity .7s linear;-o-transition:opacity .7s linear;-ms-transition:opacity .7s linear;transition:opacity .7s linear}
.panel-alt:hover,.panel-open .panel-alt{opacity:1}
.panel>article{display:none;height:100%;width:860px;margin-left:137px;background-color:rgba(146,146,146,.3);box-shadow:3px 2px 1px 0 rgba(0,0,0,.3);border-top-right-radius:8px;border-bottom-right-radius:8px;overflow:hidden}

ul.bullets{margin:15px 0;padding:0;list-style-type:none;}
ul.bullets li{color: #aaa;font-family: calibri; font-size: 13px; line-height: 14px; letter-spacing: .5px; text-align: justify; text-shadow: 0 0 1px #333; margin:0 0 3px;}
ul.bullets li:before{vertical-align:middle;font-size:125%;padding-right:5px}
ul.bullets li.locked:before{content:'⦿';color:#25ad85;}
ul.bullets li.unlocked:before{content:'⦾';color:#98b30d;}
ul.bullets .highlight{line-height:17px;font-size:10px;padding-bottom:2px;text-transform: uppercase;vertical-align:middle;}
ul.bullets-nested{list-style:none;margin:0 0 0 27px;padding:0}
ul.bullets-nested li{margin-bottom:0;margin-left:-2px}
ul.bullets li.subitem{padding-left:25px}
ul.bullets li.subitem:before{font-size:150%}
li.locked{opacity:.6}

.connection a{font-family:'Bangers',serif;font-size:2.5em;border:1px dotted #775f76;background:rgba(0,0,0,0.3);padding:0 2px 1px;border-radius:3px;letter-spacing:1px;}
.connection a:hover,.connection a:active{border:1px dotted #25ad85;background:rgba(146,146,146,0.3);color:#0d9ab3;text-shadow:2px 1px 1px #711946;}
.connection a:after{content:' [' attr(alt-name) ']';display:none}
.connection a:hover:after{display:inline}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.connection{display:flex;margin:5px 0}
.connection img{display:block;width:115px;height:115px;border-radius:3px;-webkit-transition:all 1.2s ease-out;-moz-transition:all 1.2s ease-out;-ms-transition:all 1.2s ease-out;-o-transition:all 1.2s ease-out;transition:all 1.2s ease-out}
.connection div{flex-grow:1;margin-left:8px;padding:5px 0;border-top:1px dotted #306b5a;border-bottom:1px dotted #306b5a;font-size:1.2em;color:#e0e0e0;}

.content {width:99%;height:100%;padding:10px 15px;overflow:auto;color: #aaa;cursor:default;font-family: calibri; font-size: 9px; line-height: 11px; letter-spacing: .5px; text-align: justify; text-shadow: 0 0 1px #333; text-transform: uppercase;}
.content .bio {color:#e0e0e0; padding-bottom: 18px;}
.content .info{margin:0 0 5px;font-size:14px}
.content .label{color:#306b68;margin-right:-3px;padding:0 4px;background-color:rgba(255,255,255,.6)}
.content .highlight{background-color:rgba(48,197,154,0.65);padding:0 4px;color:#353828}
.content .unlocked-both .highlight,.content a .highlight{color:#2cdcb3; background-color:rgba(179, 44, 220,0.45); cursor:pointer;}
.content .notes{margin:8px 0 8px 10px}
.content .notes > span{display:inline;font-size:13px;border-bottom:2px #1f1f1f dotted;color:#85962d}
.content .notes > span.emptynote{display:block;min-height:18px}

.contentpwr {width:99%;height:100%;padding:10px 15px;overflow:auto;color: #aaa;cursor:default;font-family: calibri; font-size: 9px; line-height: 11px; letter-spacing: .5px; text-align: justify; text-shadow: 0 0 1px #333; text-transform: uppercase;}
.contentpwr .bio {color:#e0e0e0; padding-bottom: 18px;}
.contentpwr .info{margin:0 0 5px;font-size:14px}
.contentpwr .label{color:#306b68;margin-right:-3px;padding:0 4px;background-color:rgba(255,255,255,.6)}
.contentpwr .highlight{background-color:rgba(48,197,154,0.65);padding:0 4px;color:#353828}
.contentpwr .unlocked-both .highlight,.content a .highlight{color:#2cdcb3; background-color:rgba(179, 44, 220,0.45); cursor:pointer;}
.contentpwr .notes{margin:8px 0 8px 10px}
.contentpwr .notes > span{display:inline;font-size:13px;border-bottom:2px #1f1f1f dotted;color:#85962d}
.contentpwr .notes > span.emptynote{display:block;min-height:18px}

.cosmos {font-size:1.2em; line-height:14px; color:#e0e0e0;}
.cosmos b {color:#37adaf;}
.cosmos i {color:#ffe4c4;background-color:#af3781;}

::selection{background-color:rgba(152,179,13,.45)}
::-moz-selection{background-color:rgba(152,179,13,.45)}

::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.6)}
::-webkit-scrollbar-button:horizontal{display:none}
::-webkit-scrollbar{background-color:rgba(0,0,0,.02);height:0;width:5px}

.namgone{opacity: 0.9;}