/* STYLE OF THE GALAXY */

/* variables */
:root {
    --header-image: url('https://files.catbox.moe/hoeujy.png');
    --body-bg-image: url('https://files.catbox.moe/hr8vsw.png');
    
    --bar-bg: #0d001a;
    --box-bg: #1B0A27;
    --main-bg: #230d32;
    
    --border-color: #7befef; /* this is also txthead1 and the scrollbar */
    
    --def-text: #ffffff;
    --hyperlink: #ff38f8;
    --hyperlink-hover: #ff7dfa;
}



body {
    font-family: courier;
    margin: 0;
    background-color: #000000;
    background-size: 1625px;
    color: #fceaff;
    background-image: var(--body-bg-image);
}

* {
    box-sizing: border-box;
    border: 2px;
}

/* scrollbar */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background-color: rgba(13, 0, 26, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(123, 239, 239, 0.6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(123, 239, 239, 0.8);
}

::-webkit-scrollbar-thumb:hover:active {
    background: rgba(123, 239, 239, 1);
}

/* container for the whole website */
#container {
    max-width: 900px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
    and change the media query according to the comment! */
    margin: 0 auto;
    /* centers the page */
}

/* all links other than navigation */
#container a {
    color: var(--hyperlink);
    font-weight: bold;
}

#container a:hover {
    color: var(--hyperlink-hover);
}

/* header styling */
#header {
    width: 100%;
    background-color: var(--bar-bg);
    height: 200px;
    padding: 10px;
    
    margin-top: 10px;
    
    border-style: solid;
    border-color: var(--border-color);
    
    display: flex;
    flex-wrap: justify;
}

#header div {
    text-align: center;
    position: relative;
    font-size: 1.625em;
    font-family: courier;
    font-weight: bold;
}

#leftheadtxt {
    order: 1;
    width: 361.5px;
}

#headimg {
    order: 2;
    width: 177;
}

#headimgprop {
    width: 177px;
    height: 177px;
}

#rightheadtxt {
    order: 3;
    width: 361.5px;
}

/* class for centering something inside a box */
.center {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* navigation bar */
#navbar {
    height: 40px;
    background-color: var(--bar-bg);
    /* navbar color */
    width: 100%;
    
    margin-top: 10px;
    border-style: solid;
    border-color: var(--border-color);
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: var(--hyperlink);
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: var(--hyperlink-hover);
    text-decoration: underline;
}

#flex {
    display: flex;
}

/* sidebar styling */
aside {
    width: 190px;
    padding: 0px;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
    
    margin-top: 5px;
}

.sidebarlist li {
    margin-bottom: 5px;
    list-style-type: none;
}

/* main content styling */
main {
    background-color: var(--main-bg);
    flex: 1;
    padding: 20px;
    order: 2;
    
    border-style: solid;
    border-color: var(--border-color);
    margin-top: 5px;
}

/* main content grid */
.bodygridcontainer {
    display: grid;
    grid-template-columns: 134px 134px 134px 134px 134px;
    grid-template-rows: 125px 125px 125px 125px 125px;
    row-gap: 20px;
    height: 415px;
}

.bodygridcontainer div {
    text-align: center;
    background-color: var(--box-bg);
}

/*
#leftSidebar {
    order: 1;
}
*/
#rightSidebar {
    order: 3;
}


/* footer styling */
footer {
    background-color: var(--bar-bg);
    /* background color for footer */
    width: 100%;
    height: 30px;
    padding: 5px;
    text-align: center;
    /* this centers the footer text */
    font-family: courier;
    font-size: smaller;
    
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: var(--border-color);
}

/* text styles */

.txthead1 {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--border-color);
    text-align: center;
}

.txthead2 {
    font-size: 1.5625em;
    color: var(--hyperlink);
    font-weight: bold;
}

.txthead3 {
    font-size: 1em;
    color: var(--hyperlink);
    font-weight: bold;
}

h1,h2,h3 {
    color: #ED64F5;
}

h1 {
    font-size: 1.5625em;
}

strong {
    font-weight: bold;
    color: var(--hyperlink);
}

ul {
    padding-left: 7px;
    list-style-type: none;
}

.sociallinks {
    line-height: 25px;
    text-align: center;
    padding-left: 0px;
}

/* sidebar box */
.box {
    background-color: var(--box-bg);
    border: 2px solid var(--border-color);
    padding: 10px;
}

/* top bar styling (the randomly generated marquee) */
#topBar {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    line-height: 30px;
    font-family: courier;
    font-size: smaller;
    background-color: var(--bar-bg);
    text-align: center;
    
    border-style: solid;
    border-color: var(--border-color);
}

.imgcenter {
    width: 100%;
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

/* css animation for top bar marquee */
.marquee15s {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee15s div {
    display: inline-block;
    padding-left: 100%;
    animation: marquee linear infinite;
}

.marquee15s:hover div {
    animation-play-state: paused;
}

@keyframes marquee {
    from {
        transform: translateX(7%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* grid styling */

.widebodygridcontainer {
    overflow-x: scroll;
    overflow-y: hidden;
    display: grid;
    
    grid-template-columns: 325px 325px 325px;
    grid-template-rows: 380px;
    
    column-gap: 20px;
    row-gap: 10px;
    
    height: 380px;
    width: 857px;
}

.widebodygridcontainer div {
    text-align: center;
    font-size: 0.95em;
    background-color: var(--box-bg);
}

.bigbodygridcontainer {
    overflow-x: scroll;
    overflow-y: hidden;
    display: grid;
    
    grid-template-columns: 325px 325px 325px;
    grid-template-rows: 380px;
    
    column-gap: 20px;
    row-gap: 10px;
    
    height: 380px;
    width: 670px;
}

.bigbodygridcontainer div {
    text-align: center;
    font-size: 0.95em;
    background-color: var(--box-bg);
}

.biggridtxt {
    font-size: 1.25em;
    font-family: courier;
    text-align: center;
}

.biggridbox {
    width: auto;
    height: auto;
}

.biggridbox img {
    width: 200px;
    background-color: transparent;
}

.headgridcontainer {
    display: grid;
    grid-template-columns: 134px 134px 134px 134px 134px;
    grid-template-rows: 125px;
    row-gap: 20px;
    height: auto;
}

.headgridcontainer div {
    text-align: center;
    font-size: 1.875em;
    background-color: var(--box-bg);
}

.nosidebarheadergrid {
    display: grid;
    grid-template-columns: 172px 172px 172px 172px 172px;
    grid-template-rows: 125px;
    row-gap: 20px;
    height: auto;
    width: 845px;
}
.nosidebarheadergrid div {
    text-align: center;
    background-color: var(--box-bg);
}

.gridboxcenter {
    width: 100%;
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gridcenter {
    width: 90%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gridtxt {
    font-size: .7em;
    font-family: courier;
    
    width: 90%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.imgborder {
    border: solid 2px var(--border-color);
    border-radius: 5%;
}

.imgborder:hover {
    border: solid 2px var(--hyperlink);
    cursor: pointer;
}

.imgbordernohover {
    border: solid 2px var(--border-color);
    border-radius: 5%;
}

/* grid spanning */

.gridspan1 {
    position: relative;
    grid-column: span 1;
    place-items: center;
    display: block;
}

.gridspan1withpadding {
    position: relative;
    grid-column: span 1;
    place-items: center;
    display: block;
    
    padding: 10px;
}

.gridspan2 {
    position: relative;
    grid-column: span 2;
    place-items: center;
    display: block;
}

.gridspan3 {
    position: relative;
    grid-column: span 3;
    place-items: center;
    display: block;
}

.gridspan4 {
    position: relative;
    grid-column: span 4;
    place-items: center;
    display: block;
}

.gridspan5 {
    position: relative;
    grid-column: span 5;
    place-items: center;
    display: block;
}

.gridspan6 {
    position: relative;
    grid-column: span 6;
    place-items: center;
    display: block;
}

ul {
    list-style-type: none;
}

li {
    color: white;
}

#container a.bluelink {
    color: cyan !important;
}
#container a.bluelink:hover {
    color: rgb(182, 255, 255) !important;
}

.gridtxt a.bluelink {
    color: cyan !important;
}
.gridtxt a.bluelink:hover {
    color: rgb(182, 255, 255) !important;
}

/*
by default, the container width is 900px. 
if you want to change it, then in order to keep things responsive, 
take your new height,and then subtract it by 100. 
use this new number as the "max-width" value below
*/
@media only screen and (max-width: 900px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}