body { background-color:var(--back1);background-image:var(--dots);background-attachment:fixed;margin:0px; --accent: #b85349; --thunder: #bf9643; --shadow: #807399; --wind: #659965; --river: #6b89b3; --outsider: #b36b95; --back1: #e5e5e5; --back2: #e2e2e2; --back3: #dfdfdf; --back4: #e9e9e9; --border: #cccccc; --dark1: #292929; --dark2: #2e2e2e; --dark3: #393939; --font: playfair display, serif; --title: abril fatface, serif; --body: source serif pro, serif; --dots: url(https://i.ibb.co/gRdFvZD/dark-spots2.png); --dots2: url(https://i.ibb.co/j4zSdj5/light-spots2.png); --banner: url(https://i.ibb.co/HxDQDfc/Shesa-Jackalope.png); --fast: .5s; --slow: 1s; } #thunder { --accent:var(--thunder); } #shadow { --accent:var(--shadow); } #wind { --accent:var(--wind); } #river { --accent:var(--river); } #outsider { --accent:var(--outsider); } body::-webkit-scrollbar { background-color:var(--back4);width:19px;height:19px; } body::-webkit-scrollbar-thumb { border:solid 9px var(--back4);background-color:var(--accent); } .elysian-left { height:100vh;background-color:var(--dark1);position:fixed;z-index:10;top:0;left:0px;display:grid; } .elysian-left-icons { padding:35px;display:flex;flex-direction:column;gap:15px; } .elysian-left-icons a { display:block;border:solid 1px var(--dark3);background-color:var(--dark2);height:38px;width:38px;border-radius:100%;text-align:center;line-height:43px;color:var(--border);text-decoration:none;background-image:var(--dots2);background-blend-mode:soft-light;transition:var(--fast);font-size:17px;cursor:pointer; } .elysian-left-icons a:hover { color:var(--accent); } .elysian-left .togged { transform:rotate(45deg); } .elysian-left-icons a span { display:block;height:20px;width:19px;padding-right:1px;position:absolute;background-color:var(--accent);border-radius:100%;font:700 8px var(--body);line-height:20px;color:var(--dark1);margin:0px 0px 0px 30px; } .elysian-left-icons div { flex-grow:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:var(--border);font:500 italic 11px var(--font);line-height:12px;letter-spacing:1px;width:40px;white-space:nowrap; } .elysian-left-icons div:before { content:'';display:block;width:1px;flex-grow:1;background-color:var(--dark3);margin:25px 0px 160px 0px; } .elysian-left-icons div span { align-self:flex-start;display:block;transform:rotate(-90deg);transform-origin:0px 0px;height:0px;width:0px;padding-top:5px; } .elysian-mid { position:fixed;top:0;left:-211px;height:100vh;border-right:solid 1px var(--border);z-index:9;width:320px;background-color:var(--dark3);color:var(--dark3);transition:var(--slow); } .mid-togged { left:109px; } .elysian-mid input { display:none; } .elysian-mid label { position:absolute;z-index:11;height:48px;width:48px;border:solid 1px var(--border);background-color:var(--back3);border-radius:100%;font:italic 800 20px var(--font);line-height:42px;text-align:center;cursor:pointer;top:50%;margin:-20px 0px 0px 295px;pointer-events:none;transform:scale(.65);opacity:0;transition:var(--slow); } .elysian-mid-arrow { position:absolute;z-index:11;top:50%;margin:-150px 0px 0px 295px;height:310px;display:flex;flex-direction:column;justify-content:space-between; } .elysian-mid-arrow a { pointer-events:none;transform:scale(.65);opacity:0;transition:var(--slow);height:48px;width:48px;border:solid 1px var(--border);background-color:var(--back3);border-radius:100%;font:italic 800 22px var(--font);line-height:42px;text-align:center;cursor:pointer;text-decoration:none;color:var(--dark3); } .elysian-mid-arrow a i::before { display:block;line-height:48px; } .mid-togged label, .mid-togged .elysian-mid-arrow a { transform:scale(1);opacity:1;pointer-events:auto; } .elysian-mid label:hover, .elysian-mid input:checked + label, .elysian-mid-arrow a:hover { color:var(--accent); } .elysian-pop { display:grid;grid-template-rows:100vh 100vh 100vh;transition:var(--slow); } #elysian-tab-2:checked ~ .elysian-pop { margin-top:-100vh; } #elysian-tab-3:checked ~ .elysian-pop { margin-top:-200vh; } .elysian-popout { padding:55px 60px;width:200px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;background-color:var(--back4);background-image:url(https://i.ibb.co/6Rnp2s1/Back-Broung.png);background-blend-mode:overlay;background-attachment:fixed;background-position:0px 0px;mix-blend-mode:lighten; } .elysian-popout-icon { height:74px;width:74px;padding:32px;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;background-image:var(--dots);background-attachment:fixed; } .elysian-popout-icon img { height:60px;width:60px;border:solid 7px var(--dark1);border-radius:3px; } .elysian-popout-icon a { display:block;position:absolute;height:35px;width:35px;border-radius:100%;background-color:var(--accent);z-index:1;font-size:17px;text-align:center;color:var(--back4);text-decoration:none;margin:45px 0px 0px -5px; } .elysian-popout-icon a i::before { display:block;line-height:35px;} .elysian-popout-name { text-transform:uppercase;font:47px var(--title);line-height:40px;padding:35px 0px 0px 0px;white-space:nowrap;text-align:right; } .elysian-popout-name div { font:700 italic 17px var(--font);letter-spacing:3px;line-height:15px;padding-bottom:5px;color:var(--accent); } .elysian-popout-blurb { font:500 12px var(--body);text-align:justify;line-height:18px;letter-spacing:.25px; } .elysian-popout-blurb:before { display:block;content:'';height:1px;background-color:var(--border);margin:27px 0px 25px 120px; } .elysian-popout-blurb span { text-transform:uppercase;font-weight:800!important;line-height:18px;color:var(--accent); } .elysian-popout-event { display:block;border:solid 1px var(--border);border-radius:5px;background-color:var(--back1);border-radius:5px;background-image:var(--dots);background-attachment:fixed;padding:14px;margin-top:25px;width:170px; } .elysian-popout-event div { height:75px;width:170px;background-color:var(--accent);border-radius:3px;background-blend-mode:multiply;background-size:cover;background-position:center; } .elysian-nav-name { font:800 italic 40px var(--font);line-height:25px;color:var(--accent1);letter-spacing:0px;text-transform:lowercase;padding:0px 0px 25px 0px; } .elysian-nav-name:before { content:'';display:block;position:absolute;height:1px;width:120px;background-color:var(--accent);margin:12px 0px 0px 75px; } .elysian-nav-title { font:800 11px var(--font);text-transform:uppercase;line-height:10px;padding:15px;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;letter-spacing:3px;margin:15px 0px 20px 0px;background-image:var(--dots);background-attachment:fixed; } .elysian-nav-links a { display:block;text-decoration:none;color:var(--dark3);font:600 12px var(--body);text-transform:uppercase;line-height:20px;letter-spacing:.5px;padding-left:10px;transition:var(--fast); } .elysian-nav-links a:before { content:'+';padding-right:15px;color:var(--accent);font-weight:800!important;transition:var(--fast); } .elysian-nav-links a:hover { color:var(--accent); } .elysian-nav-links a:hover:before { padding-right:20px; } .elysian-staff { display:block;text-decoration:none;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;margin-bottom:10px;align-self:stretch;padding:24px;text-transform:uppercase;color:var(--dark3);font:700 10px var(--font);line-height:10px;letter-spacing:2px;position:relative;overflow:hidden;background-image:var(--dots);background-attachment:fixed;transition:var(--fast);height:35px; } .elysian-staff:hover { background-color:var(--back3); } .elysian-staff div { font:27px var(--title);line-height:20px;padding-bottom:5px;letter-spacing:0px;color:var(--accent);position:relative; } .elysian-staff i { position:absolute;font-size:75px;color:var(--back1);text-shadow:0px 0px 1px var(--dark3);margin:-35px 0px 0px 109px;transform:rotate(30deg); } .elysian-staff i:before { display:block;line-height:75px; } .elysian-staff-name { font:500 italic 30px var(--font);line-height:20px;color:var(--border);letter-spacing:.5px;padding-right:10px; } .elysian-up { display:grid;grid-template-columns:50px auto;align-self:stretch;margin-top:20px; } .elysian-up-icon { display:flex;flex-direction:column; } .elysian-up-icon div { height:31px;width:31px;padding:5px;border:solid 1px var(--border);border-radius:100%;background-color:var(--back1); } .elysian-up-icon div img { height:31px;width:31px;border-radius:100%; } .elysian-up-icon:after { content:'';display:block;width:1px;flex-grow:2;background-color:var(--border);margin:0px 22px; } .elysian-up-blurb h1 { margin:10px 0px 0px 15px;font:700 15px var(--body);line-height:10px;text-transform:uppercase;color:var(--accent); } .elysian-up-blurb h2 { margin:5px 0px 15px 15px;font:700 12px var(--body);line-height:10px;text-transform:uppercase;letter-spacing:.25px; } .elysian-up-blurb div { font:500 12px var(--body);text-align:justify;line-height:18px;letter-spacing:.25px;max-height:108px;overflow:auto;padding-right:10px; } .elysian-up-blurb div::-webkit-scrollbar { width:10px;background-color:transparent; } .elysian-up-blurb div::-webkit-scrollbar-thumb { border-left:solid 9px var(--back4);background-color:var(--accent); } .elysian-up-blurb div a { text-decoration:none;font-weight:700!important;color:var(--accent);transition:var(--fast); } .elysian-up-blurb div a:hover { color:var(--dark3); } .elysian-right { padding-left:110px;border-right:solid 1px var(--border);color:var(--dark3);transition:var(--slow); } .right-togged { padding-left:430px; } .elysian-banner-img { height:400px;width:100%;border-bottom:solid 1px var(--border);background-color:#f5f5f5;background-image:var(--banner);background-blend-mode:multiply;background-size:cover;background-position:center;filter:grayscale(100%); } .elysian-banner-name { margin-top:-401px;padding-top:401px;position:relative;overflow:hidden;border-bottom:solid 1px var(--border); } .elysian-banner-name-1 { background-color:var(--back4);padding:0px 0px 75px 0px;display:flex;flex-direction:column;align-items:center;font:100px var(--title);line-height:80px;text-transform:uppercase; } .elysian-banner-name-2 { text-align:center;margin-top:-43px;position:relative;z-index:1;white-space:nowrap;background:linear-gradient(to bottom,var(--accent),var(--dark3) 60%);background-clip: text;-webkit-background-clip: text;color: transparent; } .elysian-banner-name-2 span { display:block;font:700 13px var(--font);letter-spacing:2px;line-height:10px;margin-top:30px; } .elysian-banner-name-2 span i { font-style:normal!important; } .elysian-banner-links { display:flex;justify-content:center;gap:10px;margin-top:-110px;position:absolute;z-index:1; } .elysian-banner-links a, .elysian-banner-links-1 { display:block;text-decoration:none;text-transform:uppercase;font:500 12px var(--body);color:var(--back1);background-color:var(--dark3);line-height:10px;padding:15px;border-radius:3px;letter-spacing:2px;transition:var(--fast); } .elysian-banner-links a:hover, .elysian-banner-links-1 b { color:var(--accent); } .elysian-body { padding:65px;position:relative;min-height:200vh; } .elysian-navigation { background-color:var(--accent);padding:20px;display:flex;gap:10px;text-transform:uppercase;position:sticky;top:0px;z-index:1000000000;overflow:hidden; } .elysian-navigation a { display:block;text-decoration:none;font:bold 10px var(--body);line-height:10px;padding:10px;border-radius:3px;background-color:rgba(20,20,20,.10);color:var(--back1);letter-spacing:1px;text-align:center;white-space:nowrap; } .elysian-navigation a:first-of-type { background-color:var(--dark1); } .elysian-category { margin:20px 0px;border:solid 1px var(--border);background:linear-gradient(to right,var(--back2) 500px,var(--accent) 200%);display:grid;grid-template-rows:170px 0px;height:170px;position:relative;overflow:hidden; } .elysian-category-img { background-image:var(--banner);background-size:cover;background-position:center;opacity:.35;grid-row-start:1;grid-row-end:2; } .elysian-category-name { grid-row-start:1;grid-row-end:2;position:absolute;height:400px;width:500px;border-radius:0px 100% 100% 0px;background-color:var(--back4);border:solid 1px var(--border);margin:-116px 0px 0px -1px; } .elysian-category-name div { padding:170px 0px 0px 55px; } .elysian-category-name div i { position:absolute;font-size:300px;color:var(--accent);opacity:.075;margin:-120px 30px; } .elysian-category-name div h1 { margin:0px;font:45px var(--title);line-height:35px;color:var(--accent);position:relative;z-index:1; } .elysian-category-name div h2 { margin:10px 0px 0px 0px;font:700 11px var(--font);text-transform:uppercase;line-height:15px;position:relative;z-index:1;letter-spacing:3px; } .elysian-category-1 { display:grid;gap:20px;grid-template-columns:31% auto 31%; } .elysian-category-1 div { border:solid 1px var(--border);background-color:var(--back4);min-height:350px; } .elysian-category-2 { display:grid;gap:20px; } .elysian-category-2 div { border:solid 1px var(--border);background-color:var(--back4);min-height:250px; } @media (max-width: 1400px) { .elysian-category-1 { grid-template-columns:49% auto; } .elysian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:3; } } @media (max-width: 1300px) { .elysian-banner-name-1 { font-size:75px; } .elysian-banner-name-1 span { font-size:11px;letter-spacing:1.5px; } } @media (max-width: 1100px) { .elysian-banner-name-1 { font-size:65px;line-height:55px;padding-top:13px; } .elysian-banner-name-1 span i, .elysian-banner-links-1 { display:none; } .elysian-category-1 { grid-template-columns: auto; } .elysian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:2; } } @media (max-width: 975px) { .elysian-mid, #js-toggle-sidebar { display:none; } .elysian-right { padding-left:110px; } }