/* =========================================================
ROOT SETTINGS
========================================================= */

:root {
--font-size: 13px;
--background: #eeeeee;
--container: #ededed;
--posts: #fbfbfb;
--border: #d1d1d1;
--text: #4f4e4e;
--accent: #feabc5;
--accent-2: #f4c056;
--rgb-text: 79,78,78;
--rgb-accent: 254,171,197;
--font:    'Work Sans',    sans-serif;
--titlefont:    'Work Sans',    sans-serif;
}

/* =========================================================
GLOBAL RESET
========================================================= */
{
  box-sizing:             border-box;
}

html,
body {
  margin:                 0;
  padding:                0;
  min-height:             100%;
}

body {
  background:             var(--background);
  background-image:       url('/space/spacebackgroundrepeat.png');
  color:                  var(--text);
  font-family:            var(--font);
  font-size:              var(--font-size);
  line-height:            1.5em;
  font-weight:            400;
}

.clouds {
  overflow:               hidden;
  background-image:       url("space/clouds.png");
  position:               fixed;
  bottom:                 0;
  height:                 155px;
  width:                  100%;
  background-repeat:      repeat-x;
}


/* =========================================================
LINKS
========================================================= */

a {

color:
    var(--text);

text-decoration:
    none;

transition:
    color 0.3s ease,
    text-shadow 0.3s ease;

}

a:hover {

color:
    var(--accent);

}

/* =========================================================
TEXT
========================================================= */

img {

border:
    none;

}

b,
strong {

font-weight:
    700;

}

p b,
p strong,
.sidebar-desc b,
.sidebar-desc strong,
.pop-text b,
.pop-text strong {

color:
    var(--accent);

text-shadow:
    0 0 5px rgba(254,171,197,0.75);

font-family:
    'Old Standard TT',
    serif;

}

p i,
p em,
.sidebar-desc i,
.sidebar-desc em,
.pop-text i,
.pop-text em {

color:
    var(--accent-2);

text-shadow:
    0 0 5px rgba(244,192,86,0.75);

font-family:
    'Old Standard TT',
    serif;

}

/* =========================================================
HEADINGS
========================================================= */

h1 {

margin:
    0;

font-size:
    2em;

line-height:
    1.2em;

}

h2 {

font-size:
    1.5em;

}

h3 {

margin:
    0 0 15px 0;

color:
    var(--accent);

font-family:
    'Old Standard TT',
    serif;

font-size:
    1.4em;

font-weight:
    700;

}

/* =========================================================
WAVE LINKS
========================================================= */

p a,
li a,
.sidebar-desc a,
.pop-text a {

text-decoration:
    underline 1px var(--accent) wavy;

}

p a:hover,
li a:hover,
.sidebar-desc a:hover,
.pop-text a:hover {

text-decoration:
    underline 1px var(--accent-2) wavy;

}

/* =========================================================
HORIZONTAL RULE
========================================================= */

hr {

width:
    100%;

margin:
    15px 0;

border:
    none;

border-bottom:
    1px solid var(--border);

}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar {

width:
    1px;

height:
    1px;

background:
    transparent;

}

::-webkit-scrollbar-thumb {

background:
    var(--accent);

}

/* =========================================================
MAIN CONTAINER
========================================================= */

/*

MAIN CONTENT AREA
-----------------

Main sidebar:
    498px

Right sidebar:
    220px

Vertical tabs:
     60px

TOTAL:
    778px

*/

.container {

position:
    absolute;

z-index:
    400;

top:
    calc(50vh - 305px);

left:
    calc(50vw - 389px);

width:
    778px;

height:
    610px;

background:
    var(--container);

border:
    1px solid var(--border);

border-radius:
    7px;

box-shadow:
    0 0 5px rgba(0,0,0,0.05);

}

/* =========================================================
MAIN SIDEBAR
========================================================= */

.sidebar {

position:
    absolute;

z-index:
    10;

top:
    0;

left:
    0;

width:
    498px;

height:
    100%;

background:
    var(--posts);

border-radius:
    7px 0 0 7px;

overflow:
    visible;

}

/* =========================================================
LEFT TALL IMAGE
========================================================= */

.sidebar-tall {

position:
    absolute;

z-index:
    20;

top:
    15px;

left:
    -242px;

width:
    210px;

height:
    540px;

padding:
    15px;

background:
    var(--container);

border:
    1px solid var(--border);

border-radius:
    7px 0 0 7px;

box-shadow:
    0 0 5px rgba(0,0,0,0.05);

}

.sidebar-tall-img {

display:
    block;

width:
    100%;

height:
    100%;

background-size:
    cover;

background-position:
    center center;

background-repeat:
    no-repeat;

border-radius:
    7px;

}

.toggle-right {

width:
    28px;

height:
    28px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

padding:
    0;

margin:
    0;

background:
    transparent;

border:
    none;

color:
    var(--text);

text-decoration:
    none;

cursor:
    pointer;

}

.toggle-right i {

display:
    block;

width:
    auto;

height:
    auto;

font-size:
    16px;

line-height:
    1;

color:
    var(--text);

opacity:
    1;

visibility:
    visible;

transition:
    color 0.3s ease,
    text-shadow 0.3s ease,
    transform 0.3s ease;

}

.toggle-right:hover i {

color:
    var(--accent);

text-shadow:
    0 0 5px var(--accent);

transform:
    scale(1.12);

}


/* =========================================================
WEATHER BAR
========================================================= */

.sidebar-top {

position:
    absolute;

z-index:
    30;

top:
    0;

right:
    0;

width:
    100%;

height:
    60px;

display:
    flex;

align-items:
    center;

gap:
    10px;

padding:
    0 20px 0 210px;

background:
    rgba(237,237,237,0.5);

border-bottom:
    1px solid var(--border);

border-radius:
    7px 0 0 0;

}

/* WEATHER ICON */

.weather-icon {

display:
    block;

flex:
    0 0 18px;

width:
    18px;

height:
    18px;

font-size:
    18px;

line-height:
    18px;

color:
    var(--text);

opacity:
    1;

visibility:
    visible;

}

/* WEATHER TEXT */

.sidebar-top-text {

flex:
    1;

}

.sidebar-top-text b {

display:
    block;

margin-bottom:
    -3px;

font-family:
    'Old Standard TT',
    serif;

font-size:
    1em;

line-height:
    1em;

}

.sidebar-top-text span {

font-size:
    0.8em;

line-height:
    0.8em;

opacity:
    0.75;

}

/* CLOCK */

#currentTime {

color:
    var(--accent);

font-family:
    'Old Standard TT',
    serif;

font-size:
    1.5em;

font-weight:
    700;

text-shadow:
    0 0 5px var(--accent);

}

/* =========================================================
MAINFRAME
========================================================= */

.mainframe {

position:
    absolute;

z-index:
    2;

top:
    75px;

right:
    15px;

width:
    450px;

height:
    400px;

overflow:
    hidden;

border-radius:
    0 7px 7px 0;

}

.mainframe iframe {

display:
    block;

width:
    100%;

height:
    350px;

margin:
    0;

padding:
    0;

border:
    none;

}

/* =========================================================
RIGHT TOGGLE SIDEBAR
========================================================= */

.righttoggle {

position:
    absolute;

z-index:
    60;

top:
    15px;

left:
    498px;

width:
    220px;

height:
    540px;

padding:
    15px;

background:
    var(--container);

border:
    1px solid var(--border);

border-radius:
    0 7px 7px 0;

box-shadow:
    0 0 5px rgba(0,0,0,0.05);

opacity:
    1;

transform:
    translateX(0);

pointer-events:
    auto;

transition:
    transform 0.4s ease,
    opacity 0.3s ease;

}

.righttoggle:not(.open) {

opacity:
    0;

transform:
    translateX(-100%);

pointer-events:
    none;

}

/* =========================================================
PROFILE IMAGE
========================================================= */

.sidebar-profile-icon {

position:
    absolute;

z-index:
    8;

top:
    0;

right:
    20px;

width:
    90px;

height:
    135px;

background-size:
    cover;

background-position:
    center center;

background-repeat:
    no-repeat;

border:
    1px solid var(--border);

border-radius:
    60px;

}

/* =========================================================
PROFILE TEXT
========================================================= */

.sidebar-profile {

position:
    absolute;

z-index:
    5;

top:
    20px;

left:
    10px;

width:
    220px;

height:
    200px;

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

padding:
    30px 20px 20px;

text-align:
    center;

}

.sidebar-profile b {

color:
    var(--accent);

font-family:
    'Old Standard TT',
    serif;

font-size:
    1.3em;

font-weight:
    700;

text-shadow:
    0 0 5px var(--accent);

}

.sidebar-profile i {

margin-top:
    3px;

font-family:
    'Roboto Mono',
    monospace;

font-size:
    0.8em;

font-style:
    normal;

opacity:
    0.75;

}

/* =========================================================
RIGHT SIDEBAR CHAT
========================================================= */

.sidebar-desc {

position:
    absolute;

z-index:
    1;

left:
    0;

bottom:
    0;

width:
    100%;

height:
    250px;

padding:
    10px;

overflow:
    auto;

background:
    rgba(237,237,237,0.5);

border-top:
    1px solid var(--border);

border-radius:
    0 0 7px 0;

}

.sidebar-desc iframe {

display:
    block;

width:
    200px;

height:
    175px;

max-width:
    100%;

border:
    none;

}

/* =========================================================
RIGHT VERTICAL TAB BAR
========================================================= */

.rside {

position:
    absolute;

z-index:
    200;

top:
    0;

right:
    0;

width:
    60px;

height:
    100%;

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

gap:
    12px;

background:
    rgba(251,251,251,0.85);

border-left:
    1px solid var(--border);

border-radius:
    0 7px 7px 0;

}

/* =========================================================
VERTICAL POPUP TABS
========================================================= */

.popup-tab {

position:
    relative;

width:
    40px;

height:
    80px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

padding:
    0;

background:
    var(--posts);

color:
    var(--text);

border:
    1px solid var(--border);

border-radius:
    6px;

cursor:
    pointer;

transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.popup-tab:hover {

color:
    var(--accent);

background:
    var(--container);

transform:
    translateX(-3px);

box-shadow:
    0 0 8px rgba(254,171,197,0.4);

}

.popup-tab i {

font-size:
    15px;

}

/* =========================================================
TAB LABELS
========================================================= */

.popup-tab span {

position:
    absolute;

z-index:
    300;

right:
    45px;

width:
    125px;

padding:
    5px 8px;

background:
    var(--posts);

color:
    var(--text);

border:
    1px solid var(--border);

font-family:
    'Roboto Mono',
    monospace;

font-size:
    9px;

line-height:
    1.3em;

letter-spacing:
    0.5px;

text-transform:
    uppercase;

opacity:
    0;

visibility:
    hidden;

pointer-events:
    none;

transition:
    opacity 0.2s ease,
    visibility 0.2s ease;

}

.popup-tab:hover span {

opacity:
    1;

visibility:
    visible;

}

/* =========================================================
POPUP WINDOWS
========================================================= */

.popup-window {

position:
    absolute;

z-index:
    500;

top:
    50%;

right:
    70px;

width:
    300px;

min-height:
    250px;

max-height:
    500px;

overflow:
    auto;

padding:
    20px;

background:
    var(--posts);

border:
    1px solid var(--border);

border-radius:
    7px;

box-shadow:
    0 0 15px rgba(0,0,0,0.12);

transform:
    translateY(-50%) translateX(20px);

opacity:
    0;

visibility:
    hidden;

pointer-events:
    none;

transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;

}

.popup-window.open {

transform:
    translateY(-50%) translateX(0);

opacity:
    1;

visibility:
    visible;

pointer-events:
    auto;

}

.popup-window h3 {

margin:
    0 0 15px 0;

}

.popup-window iframe {

display:
    block;

width:
    100%;

height:
    300px;

border:
    none;

}

/* =========================================================
POPUP CLOSE BUTTON
========================================================= */

.popup-close {

position:
    absolute;

z-index:
    10;

top:
    8px;

right:
    10px;

width:
    25px;

height:
    25px;

padding:
    0;

background:
    transparent;

border:
    none;

color:
    var(--text);

font-size:
    20px;

line-height:
    20px;

cursor:
    pointer;

}

.popup-close:hover {

color:
    var(--accent);

}

/* =========================================================
POPUP TEXT
========================================================= */

.pop-text {

line-height:
    1.7em;

}

.pop-text p:first-child {

margin-top:
    0;

}

/* =========================================================
CREDIT
========================================================= */

.credit {

position:
    absolute;

z-index:
    600;

right:
    80px;

bottom:
    20px;

width:
    20px;

height:
    20px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

}

.credit i {

font-size:
    16px;

}

.credit:hover {

color:
    var(--accent);

text-shadow:
    0 0 5px var(--accent);

}