html,body {
    height:100%;
    width:100%;
    overflow:hidden;
    background:#111b27;
    font-family: "Orbitron", sans-serif;
}

body > * {
    float:left;
}

#cloud {
    /*display: flex; !* Helps in centering or controlling content within if needed *!*/
    justify-content: center;
    align-items: center;
    z-index:10 !important;
    position:relative;
}

header {
    height:100px;
    width:100%;
    color:#fff;
    position:relative;
}

header .logo {
    position:absolute;
    left:50%;
    margin-left:-152px;
    top:0px;
    padding:10px;
    border-bottom:1px solid rgb(51, 55, 69);
    border-left:1px solid rgb(51, 55, 69);
    border-right:1px solid rgb(51, 55, 69);
}

header .meta {
    top:0;
    right:0;
    position:absolute;
    border-bottom:1px solid rgb(51, 55, 69);
    border-left:1px solid rgb(51, 55, 69);
}
section {
    position:relative;
    height:calc(100% - 202px);
    width:calc(100% - 302px);
    border-left:1px solid rgb(51, 55, 69);
    border-top:1px solid rgb(51, 55, 69);
    border-bottom:1px solid rgb(51, 55, 69);
    color:#000;
    overflow:hidden;
    /*background-color: rgb(51, 55, 69);*/
    /*background:url("../img/raw_universe.png") center center no-repeat;*/
    background:url("../img/universe_edited_2.png") center center no-repeat;
    background-size:cover;
}


section .canvasControle {
    position:fixed;
    top:101px;
    right:0px;
    border-left:1px solid rgb(51, 55, 69);
    border-bottom:1px solid rgb(51, 55, 69);
    z-index:20;
}

section .canvasControle div{
    display:inline-block;
    font-size:20px;
    color:#fff;
    padding:3px 5px;
    text-transform: uppercase;
    font-weight:600;
}

section .canvasControle div:hover{
    text-transform: uppercase;
    cursor:pointer;
    color:rgb(51, 55, 69);
    font-weight:600;
    background-color:#b3b3b3;
}



aside {
    width:300px;
    height:calc(100% - 200px);
    overflow:hidden;
    position: relative;

}

aside .sidebarVisibilityToggle {
    display:none;
}

aside .donatorListWrapper {
    height:100%;
    position: relative;
}

aside ul.sc2 {
    height:30px;
}

aside .donatorListWrapper .listContent {
    height:calc(100% - 49px);
}

aside ul.sc2 li {
    width:50%;
    box-sizing: border-box;
    text-align: center;
}

/* some sc2 menue overrides for aside box */
aside ul.sc2 li span{
    display:block;
    background:#111b27;
    cursor:pointer;
    padding:6px 11px 6px 12px;
    border-right:2px solid #002a50;
    color:#96f8ff;
}

aside .donatorListWrapper {
    width:252px;
    margin-left:23px;
}

aside .donatorListWrapper ul.sc2 {
    border:1px solid rgb(51, 55, 69);
}

aside .donatorListWrapper .listContent {
    background:#333;
    border:1px solid rgb(51, 55, 69);
    position:relative;
    margin-top:15px;
}



aside .donatorListWrapper .listContent ul {
    height:calc(100% - 2px);
    overflow-y:scroll;
}

aside .donatorListWrapper .listContent ul li:nth-child(2n) {
    background:#002a50;
}

aside .donatorListWrapper .listContent ul li{
    padding:6px 5px;
    font-size:15px;
    line-height:18px;
    background-color: rgb(51, 55, 69);
    overflow-wrap: break-word;
    animation-duration: 3s;
    animation-name: fadeAndShine;
    color:#96f8ff;
    font-family: "Montserrat", Sans-serif;
}

#itsame {
    position:absolute;
    left:0;
    top:0;
    border-bottom:1px solid rgb(51, 55, 69);
    border-right:1px solid rgb(51, 55, 69);
    display:block;
    background:#111b27;
    padding:8px 8px 8px 8px;
    font-size:16px;
    color:#96f8ff;
    z-index:100;
    line-height:22px;
        width:292px;
}

#itsame a{
    color:#fff;
}



@keyframes fadeAndShine {
    from {
        opacity:0;
        box-shadow: inset 0px -3px 15px 0px #3897f5,0px 0px 0px 0px #3897f5;
        transition: box-shadow .2s ease-in-out;
        color:#fff;
    }

    50%{
        color:#fff;
        box-shadow: inset 0px -3px 15px 0px #3897f5,0px 0px 0px 0px #3897f5;
    }

    to {
        color:#96f8ff;
        opacity:1;
        box-shadow: none;
    }
}





canvas {
    display: block;
}

#tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    font-size: 14px;
    display: none;
    z-index:100;
}

footer {
    height:130px;
    width:100%;
    position:relative;
    padding-top:15px;
    font-size:24px;
    line-height:24px;
    font-family:"Orbitron";
    text-align:center;
}

footer span {
    display:block;
    background:#111b27;
    cursor:pointer;
    padding:8px 14px;
    border-right:2px solid #002a50;
    color:#96f8ff;
}



footer .donationProgressWrap {
    left:5%;
    width:90%;
    height:30px;
    background:url("../img/load_back.png") top right no-repeat;
    position:relative;
    display:block;
}

footer .donationProgressWrap::before{
    position:absolute;
    display:block;
    width:8px;
    height:30px;
    top:0;
    left:-8px;
    background:url("../img/load_open.png");
    z-index:100;
    content:"";

}

footer .donationProgressWrap .donationProgress {
    height:30px;
    width:300px;
    position:relative;
    background:url("../img/load_progress.png") top left repeat-x;
}

footer .donationProgressWrap .donationProgress:after {
    height:30px;
    position:absolute;
    width:8px;
    right:-8px;
    top:0;
    content:"";
    background:url("../img/load_open.png") top right no-repeat;
    /* flip it */
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}




/* my custom build "sc2 like" nav element */
ul.sc2 {
    background:#111b27;
    display:block;
    margin:0;
    padding:0;
    list-style:none;
    border:1px #092144 solid; /* #06162f */
    /*background:#777;*/
}

ul.sc2 li {
    display:inline-block;
    font-size:16px;
    font-weight:400;
    margin:0;
    padding:0;
    vertical-align:top;
}

ul.sc2 li span,ul.sc2 li a {
    display:block;
    background:#111b27;
    cursor:pointer;
    padding:8px 14px;
    border-right:2px solid #002a50;
    color:#96f8ff;
    text-decoration:none;
    vertical-align:top;
}

ul.sc2 li span:hover,ul.sc2 li a:hover, ul.sc2 li.active > span{
    color:#fff;
    box-shadow: inset 0px -3px 5px 0px #3897f5,0px 0px 0px 0px #3897f5;
    transition: box-shadow .2s ease-in-out;
}

.shooting-star::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent);
    filter: blur(1px);
}


@media (max-width: 1400px) {
    header .logo {
        margin-left:0;
        left:330px;
        top:0;
    }
}



@media (max-width: 1000px)  {
    aside {
        position:absolute;
        left:-400px;
        top:130px;
        z-index:30;
        background:#111b27;
        opacity:1;
        width:400px;
        overflow:visible;
        height:calc(100% - 230px);
    }

    aside .donatorListWrapper {
        width:352px;
    }

    aside .donatorListWrapper .listContent ul li{
        font-size:20px;
        line-height:25px;
    }

    aside .sidebarVisibilityToggle {
        display:block;
        position:absolute;
        right:-74px;
        top:50%;
        margin-top:-25px;
        height:60px;/*48px;*/
        width:57px;/*46px;*/
        z-index:50;
        cursor:pointer;
        background:url('../img/openbutton.png') 0 0 no-repeat;
        background-size:cover;
    }

    aside .sidebarVisibilityToggle:hover {
        opacity:.8;
    }

    aside .sidebarVisibilityToggle.active {
        /* flip it */
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

    section {
        width:100%;
        border-left:none;
    }

    .meta ul.sc2 li{
        display:block;
    }

    ul.sc2 li span,ul.sc2 li a {
        display:block;
        background:#111b27;
        cursor:pointer;
        padding:8px 14px;
        font-size:20px;
        border-right:2px solid #002a50;
        color:#96f8ff;
    }

    header {
        height:130px;
    }

    section {
        height:calc(100% - 232px);
    }

    section .canvasControle {
        top:131px;
    }

    #itsame {
        font-size:20px;
        line-height:26px;
    }

}




/*@media (max-width: 1400px) and (min-width: 401px) {*/
/*    header .logo {*/
/*        margin-left:0;*/
/*        left:25px;*/
/*        top:0;*/
/*    }*/
/*}*/