/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
	font-family: Go;
	src: url("../assets/fonts/Go-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Go Mono;
	src: url("../assets/fonts/Go-Mono.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

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

body {
    position: relative;
    background-color: #32343a;

    font-size: 18px;
    font-family: Go;
}

#fake-ballgame {
    /* background-image: url('../assets/images/backgrounds/grid.png');*/
    position: fixed;
    display: flex;
    inset: 0;
    background-image: url('../assets/images/backgrounds/hex.png');
    background-size: 16vw;
    background-position: center;
    background-attachment: fixed;
    transition: background-size 0.5s ease-out;
    z-index: -1;
}

#fake-ballgame.loading {
    background-size: 8vw;
}

a:link {
    color: #00CC00;
}

a:visited {
    color: #009900;
}

a:hover {
    color: #66FF66;
}

p {
    line-height: 1.5em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
    border: solid #00AA00;
    border-width: 2px 0 0 0;
}

code {
    font-family: "Go Mono";
}

#background {
    position: fixed;
    display: flex;
    background: rgba(0, 0, 0, 0.46);
    inset: 0;
    z-index: -1;
}

/* ----- Content ----- */

#content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    box-shadow: 0 0 8px black;
    border: 1px solid #a9a9a9;
    border-radius: 0.5em;
}

#content .right {
    float: right;
    margin-left: 1em;
}
#content .left {
    float: left;
    margin-right: 1em;
}
#content .center {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.caption {
    margin-top: 0;
    font-size: 0.9em;
    font-style: italic;
}

.image-container {
    display: flex;
    width: 100%;
}

.image-container img {
    width: 45%;
    display: block;
    height: auto;
    margin: 1em;
}

h1, h2, h3, h4, h5 {
    font-family: Go;
    color: #FFFFFF;
}

#loader {
    z-index: 1;
    inset: 0;
    position: fixed;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    background-color: #32343a;
}
#loader.hidden {
    opacity: 0;
}

#loader img {
    width: 35vw;
    height: auto;
}

#container {
    font-size: clamp(14px, 2vw, 20px);
    display: flex;
    gap: 1em;
    flex-direction: column;
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    color: #a9a9a9; 
}

/***** Art *****/

#galleryContainer {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 1em;
    justify-content: center;
}

#galleryContainer img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: none;
}

.gallery {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery i {
    display: block;
    padding: 6px;
}

.gallery small {
    display: block;
    color: #8f8f91;
    font-size: 0.8em;
}

.gallery:hover .gallery-thumb {
    border-color: white;
}

.gallery {
    cursor: pointer;
}

.gallery i:visited {
    color: #8f8f91;
}

.gallery i {
    color: #a9a9a9;
}

.gallery:hover i {
    color: #FFF;
}

.gallery.expanded {
    /* Span from first to last columns */
    grid-column: 1 / -1;
}

.gallery-thumb {
    background-color: #1F1F22;
    display: grid;
    border-radius: 0.5em;
    border: 1px solid #a9a9a9;
    overflow: hidden;
    box-shadow: 0 0 8px black;
}

.image-viewer {
    position: fixed;
    display: flex;
    visibility: visible;
    inset: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
    background: rgba(0, 0, 0, 0.50);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.image-viewer.hidden {
    opacity: 0;
    visibility: hidden;
}
.image-viewer.hiding {
    opacity: 0;
}
.image-viewer.no-transition {
    transition: none;
}
.image-viewer p {
    position: absolute;
    color: #a9a9a9;
    top: 0;
    text-align: center;
    color: gray;
    font-size: 18px;
    border: 1px solid white;
    border-radius: 0.5em;
    padding: 18px 32px;
    background: #343a40;
    margin: 32px;
    opacity: .8;
    box-shadow: 0 0 8px black;
}
.image-viewer b {
    color: #FFF;
}
.image-viewer img {
    user-select: none;
    max-width: 80%;
    max-height: 80%;
    cursor: zoom-in;
    border: 2px solid #FFF;
    border-radius: 0.5em;
    background-color: #343a40;
    transform-origin: center center;
    transition: transform 0.15s ease;
}
.image-viewer img.zoomed {
    cursor: zoom-out;
}


/***** Center *****/

#content {
    background-color: #343a40;
    padding: 10px 5% 20px 5%;
    border: 1px solid #FFF;
    border-radius: 0.5em;
    box-shadow: 0 0 8px black;
}

#logo {
    display: block;
    margin-inline: auto;
    width: 25%;
    height: auto;
}

/*HEADER STYLE*/
#header ul {
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#header li {
    display: inline-block;
    min-width: 33%;
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
    flex: 1 1;
    padding: 0;
    height: 2em;
    border-radius: 0.5em;
    border: 1px solid #FFF;
}

#header li.home {
    background-color: #ff4853;
    color: #000;
}
#header li.art {
    background-color: #ffd946;
    color: #000;
}
#header li.music {
    background-color: #46ff59;
    color: #000;
}
#header li.archive {
    background-color: #4467ff;
    color: #FFF;
}
#header li.about {
    background-color: #ab48ff;
    color: #FFF;
}

#header li a {
    display: flex;
    color: inherit;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: filter 200ms ease;
    text-decoration: none;
    background-color: inherit;
}
#header li a:hover {
    filter: brightness(0.7);
}

/*FOOTER STYLE*/
#footer {
    font-size: 0.8em;
    padding: 0 5% 10px 5%;
}

/***** Index *****/

#logo.index {
    width: 50%;
}

#pishiDrawing {
    width: 100%;
}

#pishiDrawing i {
    font-size: 1em;
}

#pishiDrawing img {
    margin: 0 0 0.2em 0;
    background-color: inherit;
    box-shadow:0 0 8px black; 
    border: 1px solid #a9a9a9;
    border-radius: 0.5em;
}

#recents-container {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    gap: 2em;
    width: 100%;
}

#recent-drawing {
    width: 100%;
}
#recent-drawing img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: none;
}

/***** Blog *****/

/*POST LIST STYLE*/

#recentpostlistdiv {
    width: 100%;
    height: auto;
}
#postlistdiv ul {
    font-size: 1.2em;
    padding: 0;
    list-style-type: none;
}
#recentpostlistdiv ul {
    font-size: 1.2em;
    padding: 0;
    list-style-type: none;
}
.moreposts {
    font-size: 0.8em;
    margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
    text-align: center;
    margin-top: 1.4em;
}

@media only screen and (min-width: 600px) {
    #content .small {
        max-width: 50%;
        height: auto;
	margin: 1em;
    }
    #content .right {
	margin: 1em 0 1em 1em;
    }
    #content .left {
        margin: 1em 1em 1em 0;
    }
    #content .center {
	margin: 1em auto;
    }
    #recents-container {
        flex-wrap: nowrap;
    }
    #header li {
        /* Never have >3 items in a row */
        min-width: 25%;
    }
}