@import "main.css";
@import "frames.css";

:root {
}

body.Bright {
    --bg-image      : url('../img/backgrounds/bg_bright2.webp') !important;
    --bg-color		: white;
	--fg-color		: white;
	--font-m-color	: black;
    --font-h-color  : black;
    --font-a-color  : black;
	--floor-type 	: var(--floor-003);

	--frame-border  : var(--frame-004);
	--screen-border : var(--screen-002);
	--pedestal-type : var(--pedestal-002);
}

body.Dark {
    --bg-image      : url('../img/backgrounds/bg_dark2.webp');
    --bg-color		: #555;
	--fg-color		: black;
	--font-m-color	: #ddd;
    --font-h-color  : white;
    --font-a-color  : white;
	--floor-type 	: var(--floor-001);

	--frame-border  : var(--frame-003);
	--screen-border : var(--screen-001);
	--pedestal-type : var(--pedestal-005);
}

/* -- */

body { scrollbar-color: var(--font-m-color) var(--fg-color); }
body::-webkit-scrollbar-track { background-color: var(--fg-color); }
body::-webkit-scrollbar-thumb { background-color: var(--font-m-color); }

body {
    background-size: 100%;
}

main {
    background: none;
}

section {
    background: none;
}

img {
    width: 100%;
}

/* -- */

#info {
    background: var(--fg-color);
	color: var(--font-m-color);
    padding: 1em;

	justify-content: center;


    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-areas:
        "img desc"
        "img links";
	grid-gap: 1em;
}

#info img { grid-area: img; }
#info div { grid-area: desc; }
#info ul { grid-area: links; }

#info ul {
	list-style-type: none;
	padding: 0px;

	display: grid;
	grid-auto-flow: column;
	justify-content: space-around;

	grid-gap: .5em;
}

#info img {
	border-radius: 100%;
    align-self: center;
}

#info div {
	padding: 1em;
}

@media only screen and (max-width: 700px) {
    #info {
        grid-template-columns: auto 50% auto;
        grid-template-areas:
            "x img y"
            "desc desc desc"
            "links links links";
    }
}

#wall, #floor {
    margin: 1em 0px;
    display: grid;

    grid-auto-flow: column;
    grid-gap: 5em;

    align-items: flex-end;
	justify-items: center;

    padding: 2em 1.5em;

    overflow-x: auto;
}

#wall p, #floor p {
    text-align: center;

	color: var(--font-m-color);
	background: var(--fg-color);
}

#wall a, #floor a {
	text-decoration: none;
}

#wall img, #floor img {
    margin: 1em 0px;
}

#floor {
	background-image: var(--floor-type);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;
}

.space {
    /* overflow-x: auto; */
}

.frame, .screen, .pedestal {
    width: 250px;
}

.frame img {
    border-image: var(--frame-border);
}
.screen img {
	border-image: var(--screen-border);
}
.pedestal img {
	transform: translate(0px, 5px);
}
.pedestal div {
	background-image: var(--pedestal-type);
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;

	height: 250px;
}


/* This tutorial helped me code this gallery: https://dev.to/elvessousa/lightbox-with-no-javascript-48l4 */
.lightbox {
    display: none;

    z-index: 2;
    background: #000000dd;

    width: calc(100% - 4em) !important;
    height: calc(100% - 4em);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.lightbox:target {
    display: grid;
    grid-template-columns: 1fr 30% 10%;
    grid-template-rows: 10% 1fr;

	grid-gap: 2em;
	padding: 2em;

    grid-template-areas:
      "image x close"
      "image desc desc";
}
.lightbox .close { grid-area: close; }
.lightbox .info { grid-area: desc; }
.lightbox .img { grid-area: image; }

.lightbox .close {
    font-size: 4em;

    color: white;
    cursor: pointer;

    text-align: center;
    text-decoration: none;
}
.lightbox .close:hover {
    opacity: 0.8;
    background: black;
}

.lightbox .img {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox .img video {
	width: 100%;
}

.lightbox .info {
    background-color: var(--fg-color);
    color: var(--font-m-color);
    padding: 2em;
    overflow: auto;

    text-align: center;
}

.lightbox h1 {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
    color: var(--font-m-color);
}

.lightbox a { color: var(--font-m-color); opacity: 0.8; }
.lightbox a:hover { opacity: 1; }

@media only screen and (max-width: 1000px) {
    .lightbox:target {
        grid-template-columns: 10% 1fr 10%;
        grid-template-rows: 1fr 15% 10%;
        grid-template-areas:
            "image image image"
            "desc desc desc"
            "x close y";
    }
    .lightbox .info {
        padding: 0.5em;
    }
}