body {
    background-color: #000;
    color: #a29a9a;
    font-family: 'Mooli', sans-serif;
    background-image: url('/img/star_bg.png')
}

a {
    color: #a29a9a;
    text-decoration: none;
}

#container {
    display: flex;

    /* mobile*/
    @media only screen and (max-width: 600px) {
        flex-direction: column;
    }
}
main {
    width: 80%;
    min-height: 700px;
    height: auto;
    background-color: #000 !important;

    /* mobile*/
    @media only screen and (max-width: 600px) {
        width: auto;
    }
}
aside {
    width: 20%;
    height: 100%;
    margin-right: .5em;

    /* mobile*/
    @media only screen and (max-width: 600px) {
        margin-right: none;
        width: 100%;
    }
}

#asideHeader {
    height: 15px;
}

#asideHeader h6 {
    font-size: 20px;
    margin: 0px;
    color: #fff;
    text-align: center;
}

#asideBody {
    display: block;
}

#asideBody.closed {
    /* mobile*/
    @media only screen and (max-width: 600px) {
        display: none;
    }
}

#asideBody a {
    color: #a29a9a;
    text-decoration: none;
    padding: 10px;
    display: block;
    border: 1px solid transparent;
    margin-bottom: 5px;
}

#asideBody a:hover {
    border-radius: 4px;
    padding: 10px;
    border-image: url('/img/border_hover2.png') 20 / 15px round;
    color: #fff;
}

#asideBody a:focus {
    border-image: url('/img/border_hover2.png') 20 / 15px round;
    border-radius: 4px;
    padding: 10px;
    outline: 0;
    color: #fff;
}

.section {
    border-image: url('/img/border.png') 50 / 39px round;
    padding: 2em;
    background-color: #00000091;
    font-weight: bold;
    font-size: 20px;
}

.section-main {
    display: none;
}

.section h2 {
    margin: .5em;
    margin-bottom: 1.5em;
}

.gr_grid_container {
    width: 500px;

    /* mobile*/
    @media only screen and (max-width: 600px) {
        width: 100%;
    }
}

.gr_grid_book_container {
    float: left;
    width: 80px;
    height: 130px;
    padding: 0px 0px;
    overflow: hidden;
    padding-right: .5em;
}

.gr_grid_book_container img {
    width: 100%;
}

#projectContainer {
    height: 100%;
    overflow-y: scroll;
}
.projects {
    display: flex;
    flex-direction: row;
}
.project {
    margin: 1em;
    margin-bottom: 4em;
}

.project-grid {
    display: flex;
    width:80%;
}

.project-grid img {
    width:100%;
}

/* mobile*/
@media only screen and (max-width: 600px) {
    .project-grid {
        width:95%;
        flex-direction: column
    }
}

.project img {
    border: 2px solid #000;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.project-single img {
    width: 45%;
}

/* mobile*/
@media only screen and (max-width: 600px) {
    .project-single img {
        width: 90%;
    }
}

.project h3 {
    color: #fff;
}

.project p {
    margin-bottom: .5em;
    margin-top: .5em;
    font-weight: normal;
}
.project strong {
    color: #fff;
}

.project a {
    color: #0b7c82;
}

.project .project-link-div {
    margin-left: .8em;
    margin-right: .8em;
}

.project .project-link {
    margin-right: .5em;
}

.project .rotating-sparkles {
    text-decoration: none;
    position: relative;
    transition: all .3s;
}

.project .rotating-sparkles:after, .rotating-sparkles:before {
    transition: all .3s;
}

.project .rotating-sparkles:after {
    content: "\2728";
    position: absolute;
    top: -4px;
    right: 0;
    color: transparent;
}
.project .rotating-sparkles:hover:after {
    right: -30px;
    color: pink;
    transform: rotate(360deg);
    padding: 5px;
}

.art-project {
    margin-bottom: 1em !important;
}

#sectionAbout {
    display: block;
}

#sectionAbout img {
    width: 300px;
    border-radius: 4px;
}

#navHamburger {
    display: none;
    float: right;
    cursor: pointer;

    /* mobile*/
    @media only screen and (max-width: 600px) {
        display: block;
    }
}

#navHamburger:hover {
    color: #666;
}

.blinkie {
    margin: 0 auto;
    width: 100px;
}